Css

[MazY]

I can't remember which two members have been trying to convince me about the benefits of CSS. However, credit to both of them.

I have spent the afternoon learning them and I'm hooked! Not exactly rocket science is it?

Much nicer page code, I agree.

Oh well, VBMedia version 9 coming up.....

[ihelpyou]

Yes. a couple of them have but I have not looked at it as of yet. Show us the final version 9 when completed.

[Mel]

Hey MazY

Right on - its not rocket science, but you can write better code faster and have nice effects and control over the appearance of your entire site with just one file. And as you said you can learn it in a few hours.

Seldom something comes along that is free, useful and easy to use.

Now download TOPSTYLE (http://bradsoft.com) and you have another free helper that will integrate with your design program and help you write and validate your CSS file.

[glengara]

Does using CSS have any downsides? I seem to remember some older/text browsers can have trouble with it. Just thinking of good ol' Y!, and accessability.

[Mel]

Hi Gelngara

Yes, as mentioned in another thread, the implementation of the W3 CSS standards between browsers is not 100% (or even 90%) but IMO the biggest problems come when using absolute postioning.

The topstyle freeware program mentioned above also has a handy feature in that you can set it to a particular compatibility (say IE 4 and NS4) and it will then only display codes which can be shown by browsers of that level of compliance and in addition will give you a graphic representation of how compliant the four or five most popular browsers are for that term.

But don't let this discourage you. IMO the best feature of CSS is the ability to turn a bit of code with widths fonts sizes colors and weights etc into a simple <p> tag which is fully defined in the css file, and which is used for all the <p> tags so that changing the font size in the CSS file will change all the font on your site.

[glengara]

Thanks Mel, worth exploring. Send out a search party if I'm not back in a couple of weeks.

[highman]

CSS is a great help these days, for SEO it lightens your code a LOT, in terms of site maintenance its a boon.

To get you head round the whole css thing have a look at the code of a website i.e. this site
In the header you will see:
<link rel="stylesheet" type="text/css" href="/forums/style.css">

Now add 'forums/style.css' to the end of http://www.ihelpyouservices.com and you will see the style sheet controlling the site.

I’m not suggesting you copy it but it does give you an idea of how its working:

as an example here is my stylesheet:

BODY
{
SCROLLBAR-FACE-COLOR: #669966;
FONT-SIZE: 9pt;
MARGIN: 0pt;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #990033;
SCROLLBAR-ARROW-COLOR: #990033;
FONT-FAMILY: Arial, Helvetica, sans-serif;
SCROLLBAR-BASE-COLOR: #669966;
scrollbar-3d-light-color: #ffffff;
scrollbar-width: 30;
scrollbar-dark-shadow-color: #669966
}
.body
{
FONT-WEIGHT: normal;
FONT-SIZE: 9pt;
COLOR: #000000;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #ffffff
}
.shopr
{
FONT-WEIGHT: normal;
FONT-SIZE: 9pt;
COLOR: #ffffff;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #990033
}
.shop
{
FONT-WEIGHT: normal;
FONT-SIZE: 9pt;
COLOR: #000000;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #cccccc
}
TD
{
FONT-WEIGHT: normal;
FONT-SIZE: 9pt;
COLOR: #000000;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #ffffff
}
.body1
{
BACKGROUND-COLOR: #ffffff
}
.menu
{
FONT-WEIGHT: bold;
FONT-SIZE: 9pt;
COLOR: #ffffff;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #669966
}
H1
{
FONT-WEIGHT: bold;
FONT-SIZE: 14pt;
MARGIN: 0pt;
COLOR: #990033;
FONT-FAMILY: Arial,Helvetia,San Serif
}
H2
{
FONT-WEIGHT: bold;
FONT-SIZE: 12pt;
MARGIN: 0pt;
COLOR: #990033;
FONT-FAMILY: Arial,Helvetia,San Serif
}
H3
{
FONT-WEIGHT: bold;
FONT-SIZE: 10pt;
MARGIN: 0pt;
COLOR: #990033;
FONT-FAMILY: Arial,Helvetia,San Serif
}
H4
{
FONT-WEIGHT: bold;
FONT-SIZE: 12pt;
MARGIN: 5pt;
COLOR: #990033;
FONT-FAMILY: Arial,Helvetia,San Serif
}
A:link
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana,Helvetia,San Serif;
TEXT-DECORATION: none
}
A:visited
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana,Helvetia,San Serif;
TEXT-DECORATION: none
}
A:active
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana,Helvetia,San Serif;
TEXT-DECORATION: none
}
A:hover
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
COLOR: #990033;
FONT-FAMILY: Verdana,Helvetia,San Serif;
TEXT-DECORATION: none
}
INPUT
{
FONT-WEIGHT: bold;
FONT-SIZE: 9pt;
MARGIN: 0pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana,Helvetia,San Serif;
BACKGROUND-COLOR: #669966
}
SELECT
{
FONT-WEIGHT: bold;
FONT-SIZE: 9pt;
MARGIN: 0pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana,Helvetia,San Serif;
BACKGROUND-COLOR: #669966
}
TEXTAREA
{
FONT-WEIGHT: bold;
FONT-SIZE: 9pt;
MARGIN: 0pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana,Helvetia,San Serif;
BACKGROUND-COLOR: #669966
}
INPUT.BUTTON
{
FONT-WEIGHT: bold;
FONT-SIZE: 9pt;
MARGIN: 0pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana,Helvetia,San Serif;
BACKGROUND-COLOR: #990033
}
LI
{
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
LIST-STYLE-POSITION: outside;
MARGIN-BOTTOM: 2mm;
BORDER-LEFT: medium none;
TEXT-INDENT: 0mm;
LINE-HEIGHT: normal;
BORDER-BOTTOM: medium none;
LIST-STYLE-TYPE: disc;
LETTER-SPACING: normal
}

[JuniorHarris]

Ah, a CSS awakening!~ Very nice at keeping your code lean and mean. Also wanted to add that style sheet properties can still be overridden through the use of in-line styles, so that custom changes can still be applied.

[Mel]

Right on Junior - thats where the cascading part comes in - the styles can cascade down inheriting the propeties of the last open declaration and the old html tags also work fine when used inline

[MsSearch]

I use CSS but only for the basics as mentioned before...fonts, weights, colors, background colors...haven't tried inline styles and positioning yet.

How compliant is CSS2? I seem to have problems with Netscape when using CSS2 features...

[Mel]

Hi Mssearch:

Well its the browsers that are supposed to be compliant with CSS2 which is a W3 standard. Netscape 6.0 is supposed to be fully compliant, earlier versions less so.

What in particular are the problems you are experienceing?

[Web Witch]

....you've talked me into CCS, I started working on a website today using the. Funny thing is DW3 doen't recognize them but when I bring it up in a browser there there <scratching head>.

WW

[MsSearch]

Most of the problems I encountered was with tables...Versions of Netscape earlier than 6.0 had trouble displaying those tables properly when there styles were defined in CSS.

[Mel]

Hi MsSearch:

without a lot more information this is going to be hard to track down, but if you download a copy of TOPSTYLE (Http://www.bradsoft.com) you can view the terms in your CSS stylesheet and see an indication of how well each is supported in various browsers, and also some alternate ways of expressing the same things.

[highman]

Use css to detect browsers which are not SO css complient i.e NS4
By placing the css tags in the head section as shown below will allow NS4 to pick up the css listed first and then continue with the document (it does not understand the @import command)
All complient browsers IE5+ and NS6 understand the @import command and ALSO pick up the 2nd css which cascades over the first sheet

<link rel="stylesheet" type="text/css" href="ns4.css">
<STYLE type="text/css">@import url(allothers.css);</STYLE>

Kinda neat I thought :cool:

(ok so everyone say 'we knew that')

[JuniorHarris]

Didn't know that...we use style sheets, but have not had the need to get very complex with them. I'll have to make a note of what you found, just in case we do find the need!~

Thanks for the homework!~ :read:

[Mel]

Great tip Highman - this is a new one on me and one that I can see several uses for.

Thanks

[MsSearch]

I don't understand the '@import url(allothers.css);'

Could you give an example...

[highman]

The above code was an example, the @import command is ONLY read by later browsers and overwrites the first stylesheet call

Its sort of browser detection..... ish

[Web Witch]

highman, sounds cool:thebomb: I designing my first site with CSS and my husband is my garu on the subject he wants to check it out this weekend.

Mel I sent my husband to TOPSTYLE from you post, he says he new about the site and hadn't been there in ages ago. NOW I remember him rattling on about it and showed me how fu**ed the site looked in NS; boy that was some time ago....guess he's fixed the problem:rolleyes:

WW

[Blue]

Nor did I know.

Excellent tip highman!

May I suggest you post that info in the "tips of the Day" section of these forums?

[highman]

Good Idea -- done

[Web Witch]

WW

[hotpepper]

Hi Mel:

Just thought you would like to know how your site shows up in my preferred browser - Netscape 3.0 (yes there are still idiots like me around - who like the OLD browsers!) LOL

There is no word wrap - would need a monitor a yard wide to view your site in that browser! Perhaps there is a CSS remedy 'somewhere.'

It comes up fine in Netscape 4.8!

hotpepper

[ihelpyou]

I could be wrong but I do not think version 3 supported any CSS at all? no matter what you did to try.

[MsSearch]

I remember seeing somewhere on a CSS complaint browser chart that Netscape 3.0 and earlier versions are not CSS compliant.

If i can dig up the chart I will post a link to it.

[Web Witch]

I think early on they were hyped as being compatiable but actually weren't.

hotpepper, how's about a nice 4.0 browser. Gosh, I'm getting up to the 6.0's already:thebomb::)

[JuniorHarris]

Nothing wrong with running a current browser, but do remember there are visitors out there with older versions.

I typically test using Netscape 4.76, so version 3 probably would not do well, but then again I don't support Mosaic either!~;)

[highman]

Junior, how about using css to detect the browser, so if its earier than V4 then the code below should supply an empty style sheet therefore leaving all your bare bones html to fend for itself, may even work in mosiac.... lol

<Style>

</Style>
<link rel="stylesheet" type="text/css" href="ns4.css">
<STYLE type="text/css">@import url(allothers.css);</STYLE>

[hotpepper]

Originally posted by Web Witch

hotpepper, how's about a nice 4.0 browser. Gosh, I'm getting up to the 6.0's already:thebomb::) [/B]

Hi WebWitch'

I'm a stubborn old bat LOL :D . Have 4.8 but rarely ever use it (just to access certain java coded sites) I love my trouble-free 3.0!!! Won't use AOL modified Netscape or IE!!!:cig:

hotpepper
:eyes:

[JuniorHarris]

Great tip highman!~ ;0

I'll have to review our browser log and see just how many prehistoric browsers we have. There may be a few hotpeppers out there, and I understand why, as the performance is probably much better then all these new feature-laden browsers which can be exploited by spammy sites.

[kaj]

Hi,

The @import method is a very clever one; I've always employed this approach:

<script language="JavaScript">
(document.layers) ? document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"ns.css\">") : document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"ie.css\">")
</script>

.. of course, putting the Javascript into a .js file as well. I might just start using the @import method, however; as it's a bit shorter. Thanks!

I tend to find normally I only need the one CSS file, but if I need to define fonts within an INPUT box... it's a necessity! The respective sizes in IE and NS are so different it's ridiculous.

Warmest regards,
Kaj

[Kal]

If you want to check your site's backwards compatibility, you can just use the trial HTML code checker tool here: http://www.netmechanic.com/toolbox/html-code.htm

Hi kaj :hi:

Welcome to the forums from a fellow Aussie. I'm in Queensland too!

[pageoneresults]

The best way to use css right now is to stick with the basics. Absolute positioning as mentioned above can cause problems even with newer browsers. Ever browse to a page and see text overlapping text? If you haven't, adjust your viewing font size in your browser, that's when you start to see the problems.

Hey highman, check your spelling on Helvetica from your H1 tag down. I use the W3C validation tool and have even formatted my css to their specifications. Works great!

W3C CSS Validation Service (http://jigsaw.w3.org/css-validator/validator-uri.html)

[ihelpyou]

Good points PageOne! Hey, good to read you. :)

[Web Witch]

Thanks, thanks and thanks again. :thumb:

I just finished a shell using CSS for the first time and forgot to check it in Net Mechanic and just found out about Validation Service from this post. http://209.15.80.90 Seems I might have problems using an underscore for my tag names and not having a background for cells might be a problem according to Validation Service. Now do I need to remove the underscore in the tag names? Should cells that I want the background to show through have a color assigned to them? Also, Net Mechanic had a problem with my z index not being in the correct order. Now I think only Dreamweaver only uses z indexes, do you think this will be a problem?:(

Oh, this is just a shell/quickie for a much BIGGER site to be developed once we gather the information need to fill all of those 'Under Construction' areas. This post got me spoofed but I think I'm under control now:D

[pageoneresults]

Take a look here and you'll see the errors that the W3C is reporting. I uploaded your style sheet to my site for testing. I'm going to run it through the mill and get it to validate for you, I've got some free time on my hands this evening!

bs-style.css (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.123seo.com%2Fcss%2Fbs-style.css&warning=1&profile=none)

[pageoneresults]

Here ya go! No error or warnings found according to the W3C. This is also reformatted based on the W3C recommendation. All yours for the taking, Happy Holidays!

bs-style.css (http://www.123seo.com/css/bs-style.css)

[Web Witch]

Thanks pageoneresults!!! I realize the way to go is with CSS and being a newbee to using them your help is appreciated. I’m thinking it’s DreamWeaver 3 because it says you can use style sheets I did but I’ve had to use a work-around to get it to work right.

Thanks again:hi:

[pageoneresults]

You are quite welcome! I know what I went through when I first started using them and the W3C validator was my savior. There is also a lot good information there on using css and how to properly format it.

Does this newly formatted style sheet meet the Net Mechanic validation tests?

P.S. The one thing I did do was add the...

background: none repeat;

to the syntax on most of the selectors. If you need to add background color, just change the background: none repeat; to...

background-color: #000000 (specify color)

[ihelpyou]

hey PageOne, do you or anyone know how to get this to validate?

body {
scrollbar-arrow-color : #DC143C;
scrollbar-base-color : #FFFFDD;
scrollbar-face-color : #FFFFDD;
}

It does not recognize it but it does work. :)

[pageoneresults]

The properties you are using are Microsoft extensions to CSS. It appears that support for these properties are for IE 5.5 or higher. No Netscape support at the moment and I tested on 4.75 and 6.01.

Scrollbar Properties (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/scrollbararrowcolor.asp)

[ihelpyou]

Thanks PageOne! Yes. I knew the scrollbar did not work in Netscape but did not know if any type of property for the bar worked yet in Netscape. thanks!

[pageoneresults]

Welcome to CSS School (http://www.w3schools.com/css/)

[WebSavvy]

Hey Doug,

It works in AOL too. The scrollbar is yellow. :)

[ihelpyou]

It should be a real light color of yellow, right? Hopefully anyway.

[WebSavvy]

Yeah, the slider area is: #FFFFFA
The scrollbar piece itself is: #FFFFDD

There's this great little program that I have called TrayColor and you just click on anything and it'll give you the color codes in HEX, HTML, or Decimal.

It's pretty cool. :D

[ihelpyou]

FFFFFA?

the css says "FFFFDD" for all the colors.

[ihelpyou]

Very cool little tool! Just grabbed it. Mine says both are FFFFDD.

[WebSavvy]

Yeah #FFFFFA

(R) 255
(G) 255
(B) 250

HEX: $FAFFFF
Decimal: 16449535


You know the background color behind the scrollbar, that's what's #FFFFFA .... at least it is in AOL anyway. But the moving scrollbar piece that you slide up and down is #FFFFDD

Does that info help any? Wonder if it's just this way to users of AOL?

==================

Where'd you find it at Doug? I did a search at download.com and it seems they don't have it there anymore.

[ihelpyou]

Yep. It's an aol thing. The css says ffffdd, and the tool says the same on my end. aol is giving you their version only of colors on the web. You may wish to be careful when using those same colors on a site as they would only be true according to aol users.

[ihelpyou]

More examples to check for you:

I am viewing the board now with Style I. You can change styles in your control panel. I like to switch styles about once a week. :)

The blue color in that layout of the board is this:
#C6D0E7

I am curious as to what AOL shows?

The yellow color is again this:
ffffdd

The reddish/pink color is this:
#DCA8A5

and the light gray color is this:
#F1F1F1

Very curious as to what aol shows. The color codes shown by the tool are exactly what the css files show for the boards. I am using IE browser.

[WebSavvy]

I just changed it to style I and checked it with TrayColor. It's exactly as you have listed, so there's no color change with it in AOL for that style set. :)

[crifer]

Hello! Alot of talk around css, like it :)

I have used css for a while and have read pretty much about it, i was almost frighten to use it first but when i started to look how to handle it in both NS and IE it was not as horrible as i thought. Alot of books exaggerate how it can end up looking and show ugly pics on homepages using it.

From my experience i would say start with simple functions and use only simple functions since some people can't learn to upgrade or use another browser then NS 4.+ I lay my hands on a Browser Compatibility Chart and it was the best thing i did, i printed it and put it in a folder.

You can find it at http://www.webreview.com/style/

Another thing is windows and MAC. Always use pixels when defining font-size, the standard on both OS is 72dpi screen view but windows shows it in 96dpi så the font's will look ALOT bigger if you have a MAC and defines the font-size in pt in the css style. So try to avoid that.

Kristoffer

[ihelpyou]

Thanks for the info Crifer! Very nice link! :thumb:

[pageoneresults]

I've updated all of my style sheets to now use pixels (px) instead of points (pt). I spent the last hour testing in IE 5.5, 6.0, and NN 4.7, 6.01.

It appears that the px displays more accurately than the pt measurement. I also decided to do something else. I have my monitor resolution set to 1024 x 768. I also have my display font size set to large fonts (125% normal size).

right click desktop > properties > settings > advanced > general > font size > large fonts

When I changed this to the default setting of 100%, boy did I get a smack in the face. I rarely change to 100%, the display text for windows is just too small at higher resolution. You should see what 8pt looks like at 1028 x 768 100%, its borderline microscopic! When specifying points in your style sheet, the user will see font size based on their display resolution! When specifying pixels, you see exactly what it should be!

I'm going to test on the Mac tomorrow when I get into the office. I'm also going to test print size. If I'm not mistaken, I read somewhere that pixels may not print correctly and I'll confirm that tomorrow. I know points do just fine.

I've also been keeping up with another thread at WebMaster World where they've been discussing css. Man, those guys are just too much for me. They are using css to control entire page layout, no tables or cells, everything controlled through css!

Right now I'll stick with the basics.

P.S. I'm currently using verdana 13px for all text and 14px for h1, h2, h3, h4, h5 and h6 tags. I tested using arial and you need to add a couple of pixels to adjust for the font variation, arial is not as bulky as verdana. My preferences would be...

Verdana
13px, 14px 15px

Arial
16px, 17px, 18px

[WebSavvy]

I use css in all my sites, and have only ever used the font set at px vs pt

This idea of controlling everything with css (no tables, etc.) sounds like it'd be a lot more work. How would nested tables be handled?

[MazY]

Originally posted by pageoneresults
I'm going to test on the Mac tomorrow when I get into the office. I'm also going to test print size. If I'm not mistaken, I read somewhere that pixels may not print correctly and I'll confirm that tomorrow.

I for one would love to read all the conclusive findings when you have them.

[Advisor]

They are using css to control entire page layout, no tables or cells, everything Yes, that is the wave of the future with some very interesting implications (all good!). I've heard a bit about this sort of thing and it all sounds wonderful. It's supposed to make it so that you can simply "pour" your text right into your css created design. This way you can use your text for other things too such as articles, ebooks, whatever. It sounds extremely interesting and beneficial if I'm understanding it right. And of course the implications for SEO are even better because you're dealing basically with just text. Great stuff!

Jill

[Web Witch]

This is very interesting, having just started using CSS I'm only a novice but very interested to find out pageoneresults' finding tomorrow on a Mac. I've had some problem with using CSSs in Dreamweaver, my programmer has shown me how you have to go in an change the order of mouseovers in the style sheet itself so it works right when you're using the CSS that DW sets up; seems like more work than needed but in the long run it's actually easier now I'm hoping it looks ok on all platforms:(

In DW you set text size with 1, 2, 3, etc. what is the point size for these? Also, I would think pix size would be more accurate on a monitor. Also, would anybody know what the pix size for the 1, 2, 3, etc. is:confused:

My programmer is working on a site using tables and he's been able to coordinate the boarder table colors to match my design exactly, now I wonder how the coloring looks on other machines. We've tested this page on in IE and Netscape on IBM compable machines http://www.softdesigns.net/FCR/h_about.cgi could someone check on a Mac, odd machines or running odd software and see if it looks bad; we're still in the testing mode. Thanks.:hi:

[pageoneresults]

done a lot more reading on css before taking the plunge. crifer, I want to thank you for being the one that sent me over the edge. I've read many times that px was the way to specify font sizing but was hard headed and tested points on the PC and Mac with satisfactory results.

There were differences on Mac and PC and they were acceptable. I can't wait to get in tomorrow and fire up the G4 and see what's up. I'll bet some of those issues are now non existent.

In researching this further, I found this resource which has a wealth of information on the topic...

Working with Fonts (http://developer.apple.com/internet/fonts/fonts_sizing.html)

[pageoneresults]

To answer your question, here is the conversion for font size 1-6 to point size:

1 = 8pt
2 = 10pt
3 = 12pt
4 = 14pt
5 = 16pt
6 = 18pt

Or at least that is my understanding.

As I read more about pixels vs. points I'm beginning to wonder which way to go?
Note, however, that this technique is controversial. Usability experts feel strongly that you shouldn't override your visitor's preferences. If a user has increased the browser's font size, they've probably done so for a good reason, such as eyestrain or disability. Overriding these preferences forces your tastes on your visitors.

As a result, it's a bad idea to use this approach to set font size throughout your page. Rather, you should use pixel sizes sparingly and only in areas where large fonts cause problems for your layout. We suggest limiting use of pixel sizes to your navigation bars.This is hilarious (http://webworst.about.com/library/weekly/aa052600a.htm), you've got to read the entire page!

[pageoneresults]

For the life of me, I cannot figure out how to control the size of a bulleted list. I can control everything else but the darn circular (disk) bullets. Any help would be greatly appreciated!

P.S. I do have li, ol and ul in my style sheet. It works for the numbers and letters but not for the bullets!

[MazY]

I looked at that a while back and couldn't find a way either. I deduced that the easiest route around it was to use an image for bullets.

[pageoneresults]

I had a feeling someone would reply with that statement. Thanks Mazy, I've tried so many different combinations using text and css and it just won't work.

Before I give in to image bullets, anyone else out there been able to solve this one?

[WebSavvy]

PO,

Not sure if this is what you're looking for (but it's how I do it)

in the css file do this as such:

<style type="text/css">
<!--

.li {font-size: 12px; color: #000063; font-family: Verdana, Helvetica, sans-serif; font-weight: bold;}

// -->
</style>


In the <body> add this as such:

<ul>
<li class="li">some text here
<li class="li">some text line 2</li>
</ul>

Hope this helps you some.

Regards,
Deborah

[pageoneresults]

Hi savvy1! Actually that is very close to the tag I am currently using in my style sheet...

li{
font-family:"verdana", arial, helvetica, sans-serif;
font-size:13px;
}

The only problem is that it does not control the size of the actual bullet that appears for the list item. Browse to one of those pages where you have li styles and let me know what happens when you increase or decrease the font size through your browser.

There just has to be some way other than an image, arrrgh!

P.S. The style works as it should for ol tags.

[Kal]

That's a lovely design WebWitch - well done :thumb:

(Hope - make room on the "I feel so inadequate" couch, I'm coming over...)

[WebSavvy]

PO,

I tried enlarging the size, no improvement. Maybe someone else can solve this riddle?


WW,

WOW! That is a very nice design. kudos!
Kal, Hope, slide over, make room for one more on that couch? ;)

[pageoneresults]

Do you mean the bullets did not increase in size? Now, how could that be? Are your styles in an external style sheet or inline?

[WebSavvy]

Nope, my bullet size didn't get any bigger. I use an inline css style sheet. I find that calling it externally slows down the page download time considerably.

Have you had any success getting larger bullets using the css tag that either of us have listed?

[MazY]

Originally posted by savvy1
I find that calling it externally slows down the page download time considerably.

Surely you jest? That must be one mammoth css file if it does!

[WebSavvy]

Yeah Maz, it is a pretty big css file. The one in my Announce It! site is pretty big, but the one in my SE is even bigger.

[pageoneresults]

Okay, I tried the inline style and the bullet was still sizable using IE's increase/decrease font size feature. Savvy1, are you using IE? If so, what version?

When I first started researching css, everyone was touting external css files as opposed to inline. Why? For obvious reasons, the main one being site management through a global file or files. I use a few different style sheets depending on the page layout. It works really well if you have a site where color combinations change based on the product colors.

When I made the conversion to css, my page file sizes dropped anywhere between 2k to 8k. That is a lot when the pages were already trimmed of most fat!

Savvy1, I'll agree that large css files will probably cause a slight delay when first visiting the site. But, once that css is loaded into the user's cache, surfing through the site should be a breeze!

If your css file requires word pad instead of note pad to open, then you know you've crossed the line. :)

[MazY]

Originally posted by pageoneresults
If your css file requires word pad instead of note pad to open, then you know you've crossed the line. :)

Or when you have to start burning the backup copy on to CD!

[Web Witch]

Bullets are really weird. With Dreamweaver I had to use an indent and a bullet from a character set to be able to change the color and size, even in Front Page there was no way around it. Bullet with there indent must be an oddity for CSS.

Thanks for the GREAT comments. My programmer did a wonderful job with the tables and CSS but it took a little stomping of feet to get him to use the coloring that I had requested:rolleyes:

[Mel]

Bullets are not normally a part of the font set of normal fonts, but are mostly found in fonts like wingdings, etc.

Try changing the bullet font to wingdings in your CSS file and then you should have no problem resizing them.

[WebSavvy]

Great idea Mel. Question though, a font can only display assuming that the user has that font installed on his/her computer. If the user does not have wingdings installed, what would be the default font displayed for them if the default font is not specified in the css font-family for the tag?

[pageoneresults]

Okay, it is now 1847 PST and I am on the Mac periodically throughout this evening, probably until 2200. If you have any requests, make them now! I'm on a Mac G4 with OS 9.2 and IE 5.0 (2022). I have a Sony monitor set at a resolution of 1152 x 870, millions of colors.

In reference to points vs. pixels, I am now convinced that pixels are the measurement to use (thanks again crifer). The issues I had previously using points are now pretty much non-existent using pixels.

One big advantage to pixels is print quality. I printed two identical pages; one using 8pt the other using 13px. The page using pixels prints much nicer than the one using points. In fact, the points version is almost too small to read in some areas. The one using pixels prints just as I see it on the screen, large enough to read and a very nice printout if I might say so myself!

Hurry and send in those review requests. Post replies here in this topic and I'll take a look at what I can and offer feedback where applicable.

P.S. IE on the Mac overides style sheets and allows you to still zoom in or out on text. Its not a fixed size like IE on the PC.

[pageoneresults]

Do you have a style sheet in place for the forums? If so, was it your intention to have your H tags in Times along with the links on the main page of the forums? Everything else appears to be in Verdana with the exception of those items mentioned.

[ihelpyou]

Nope. I have not used the h tag anywhere in the forums that I know of. My css file only specifies regular fonts and they are all Verdana.

[pageoneresults]

There is an H3 tag on your main entrance page to the forums that reads; Free Search Engine Discussion Forums. And then all the links on that page for the forums only are being affected. The rest of the site looks fine and uses Verdana.

The Page In Question (http://www.ihelpyouservices.com/forums/)

[Web Witch]

pageoneresults how about:

http://209.15.80.90/club_life.htm

http://www.softdesigns.net/FCR/h_about.cgi

Thanks,
WW

[pageoneresults]

Hi Web Witch! I checked out both sites and everything appears to be just fine, nice sites by the way! I did notice that the main content text is sitting very close to the table borders. I usually have some sort of cell padding specified so there is adequate white space between body text and cell borders, especially when you have a white cell and dark surrounding cell colors.

[ihelpyou]

Yep. Forgot about that one but how does the rest render a font family of Times??? That is what I simply cannot figure out, and I have tried. It looks like that in Netscape but not in IE.

[Web Witch]

Thanks pageoneresults. I know on the club site there is cell padding so you must mean the realty com. My programmer wanted to see how close he could get the text next to the background pic, he thought it would give the page a more realistic look; I don't like it:( I'll start stomping when the site gets closer to coming online:) Picky litte one you might say I am; anyone what to work under me:eek: 8)

Thanks again pageoneresults:hi:

[pageoneresults]

Doug, it might be possible that you are missing a font declaration in your css file for one of the styles. To play it safe, I add the...

font-family:"verdana", arial, helvetica, sans-serif;

to most of my styles. I've seen these problems before in Netscape and on the Mac. H tags and list item tags are the main ones that I see problems with. Just include the font-family and you'll be all set.

[pageoneresults]

Web Witch, the cell padding issue applies to both sites. On the Club Life site there is about a 1 or 2 pixel gap between the text and the black background surrounding that white content cell in the middle.

[WebSavvy]

PO,

Can you tell me how these two URLs look on Mac? They both use CSS also:

http://www.websavvy.cc
http://announce.esubmit-it.com

Thanks!

:)

[pageoneresults]

Here are Mac screen shots for Doug and Web Witch...

Free Search Engine Discussion Forums (http://www.123seo.com/images-forums/doug-mac-ie5-011402.jpg)

Web Witch Club Life (http://www.123seo.com/images-forums/club-live-mac-ie5-011402.jpg)

Web Witch FCR (http://www.123seo.com/images-forums/fcr-mac-ie5-011402.jpg)

[ihelpyou]

Yep. Looks pretty much like Netscape. Not as bad as I would have thought!

[Mel]

Hi Debi:

I am not sure what the alternate font for wingdings is on Macs, but believe that almost everyone running MS has this font.

Regarding your slow load time, I have looked at your inline CSS file and that should have no effect, but there is something not quite right, perhaps with your hosting arrangment, as it took 67 seconds for your index page to load using a 128k ISDN connection.

You should look into this.

[WebSavvy]

Yeah, I know my hosting situation is bad. That's why I am going to be switching hosts here shortly.


:)

[pageoneresults]

Announce It! (http://www.123seo.com/images-forums/announce-it-mac-ie5-011402.jpg)

Web Savvy (http://www.123seo.com/images-forums/web-savvy-mac-ie5-011402.jpg)

I see similar issues with H tags not having a font family declaration. Times is the default font for anything that is not specified by the css. If you change your browser settings to display fonts in arial or verdana, then you will not see this problem in IE but you will in Netscape or Mac browsers. IE for the PC is just too damn forgiving!

[MazY]

Originally posted by pageoneresults
Okay, it is now 1847 PST and I am on the Mac periodically throughout this evening, probably until 2200. If you have any requests, make them now! I'm on a Mac G4 with OS 9.2 and IE 5.0 (2022). I have a Sony monitor set at a resolution of 1152 x 870, millions of colors.

I have a quickie if you wouldn't mind. Would you just give my site, http://www.vbmedia.co.uk the once over on a MAC and let me know if there are any immediate problems that hit you. You should only need to look at the home page a the rest use the same layout and styles.

Many thanks

[WebSavvy]

Thanks PO! Boy what a difference it makes between OS. Geez. Hey what resolution do you have your screen set at?

I am an 800x600 die hard. WebSavvy's design looks cruddy in Mac. Announce It! looks the same on Mac & PC.

Guess I need to do some code updates at WebSavvy, again. ;)

Thanks!

[pageoneresults]

Hi Mazy! I was actually taking the screen shots when you made your post. From there, I have to walk through our 6,000 sqaure foot office back to my corner office. Open the shot with Fireworks, optimize it and then upload to my server. It takes a few minutes, here ya go!

VB Media (http://www.123seo.com/images-forums/vbmedia-mac-ie5-011402.jpg)

[MazY]

Originally posted by pageoneresults
Hi Mazy! I was actually taking the screen shots when you made your post. From there, I have to walk through our 6,000 sqaure foot office back to my corner office.

Oh dear. Sorry. Well, it looks pretty OK to me. But I'm not happy with the top <H1> tag. Why is there never a blank line underneath it like there is in IE?

Is there a CSS fix for this?

Other than that, I'm pretty happy with the MAC rendering. OK, if I'm brutally honest, I rather fancy a MAC myself now I've seen it!

Thank for taking the long walk across the office.

[Web Witch]

Thanks everyone:cheers:

WingDings should come with all software WP, graphics and other such software. My character set calls • the bullet, and in WingDings it's 61623

There is a key stroke combination that gives you a bullet; where are my notes :o:

[pageoneresults]

Savvy1, here are my current settings...
I'm on a Mac G4 with OS 9.2 and IE 5.0 (2022). I have a Sony monitor set at a resolution of 1152 x 870, millions of colors.If you are using pixels for measurement in your style sheet then I am pretty much seeing the same thing on a Mac as I would on the PC. All of you using h tags in your css need to include the font family declaration to eliminate the problem of h tags defaulting to Times in Netscape and IE on the Mac.

[MazY]

Never one to miss an opportunity, I've saved the screenshot and will find some way of putting it on the web-design site! :D

[MazY]

Originally posted by pageoneresults
All of you using h tags in your css need to include the font family declaration to eliminate the problem of h tags defaulting to Times in Netscape and IE on the Mac.

One step ahead of ya. I also include the Geneva font within the family, which from my searching the web for info on designing for macs, I seem to remember is installed on all MACS?

[pageoneresults]

You are correct MazY. Geneva is a system font for the Mac and so is Helvetica. I specify Helvetica as that is the font I've used for years and I started on the Mac back in 1990!

I've narrowed it down to;

PC - Arial, Tahoma, Verdana
Mac - Geneva, Helvetica

These are the system fonts for both platforms. I've mentioned only non serif fonts as that is what I like to work with. I'm not real fond of Times or Garamond on the Web.

[MazY]

Originally posted by pageoneresults
I'm not real fond of Times or Garamond on the Web.

I would have to agree with you. In fact, I'm not a fan of Times New Roman in any format! I believe I also include Helv in my family.

I seem to rembemer quite clearly spending hours and hours on the web one night, reading article after article about Mac fonts!

At least, it seems, it was worth it.

[Web Witch]

WOW that work in the BB and I just noticed, now how can I type that without it becomming a bullet hum-m-m-m-m-m

(•)
-•-
:)•:)

Ok that doesn't work:

ampersand, pound sign, 149, semi-colan

NO comas or spaces.

[pageoneresults]

At one point in my career my colleagues would refer to me as the King of Fonts. I could look at a font and pretty much tell you what family it was and also which version. Over the past few years there has been such an influx of new fonts that I cannot keep up with them all.

When it comes to the web, there are only a few that you need to be concerned about and they are;

arial - PC and Mac
garamond - PC and Mac
geneva - Mac
helvetica - PC and Mac
tahoma - PC
times - PC and Mac
verdana - PC and Mac
serif - PC and Mac
sans-serif - PC and Mac

I've been using all lower case in my css getting prepared for the jump to xml in the near future. xml is very strict when it comes to coding and upper case produces different results than lower case.

P.S. Please do not use impact. Even though this is a resident font on most newer PC's and the Mac, the rendering in the browsers is questionable, especially at smaller sizes.

P.S.S. These are the two declarations that I use most frequently...

font-family:"arial", verdana, helvetica, sans-serif;
font-family:"verdana", arial, helvetica, sans-serif;

This covers pretty much your entire audience and the addition of the generic font family sans-serif will use the default non-serif font for the users system.

[WebSavvy]

WW,

Here's a good list for special char's too:


http://www.w3.org/MarkUp/html-spec/html-spec_13.html

[MazY]

Originally posted by pageoneresults
At one point in my career my colleagues would refer to me as the King of Fonts.

I've been using all lower case in my css getting prepared for the jump to xml in the near future. xml is very strict when it comes to coding and upper case produces different results than lower case.

P.S. Please do not use impact. Even though this is a resident font on most newer PC's and the Mac, the rendering in the browsers is questionable, especially at smaller sizes.

I can't say I'm a font king but over the past couple of months I've absorbed that much information about fonts (Mainly because of the new XP styles which VBMedia is emulating to a very large extent.) that I have developed font madness!

The only one that I would strip out of your list is Garamond. Verdana is always at the top of my list. A gorgeous font with great rendering on the web.

Good tips about the lowercase and impact!

[pageoneresults]

Because times is named differently on the PC (times new roman) and Mac (times and/or times new roman) in some instances, garamond is the next best thing. It is also a preinstalled system font for the Mac and renders nicely if the type size is correct. Any serif fonts at small sizes are difficult to read and don't print worth a damn!

[MazY]

Thanks again, pageone. Just converted my CSS fonts declarations to lowercase!

[WebSavvy]

The font I prefer most is a font called Optimum. It looks similair to 1920's newspaper font. Simple, clean, and elegant. I'm not sure how well that would render on a Mac though, or for that matter, how many users would even have that font on their system.

I use it in quite a bit of my graphics as my font of choice. :)

[Web Witch]

Verdana is my choice for web design but if the client wants those little feet:rolleyes: on their text garamond would be my first choice because of the spread between characters.

:thebomb:

[Web Witch]

Now isn't that funny savvy1 that list doesn't include #149 but it works; the list says that #127 through @159 aren't used. From that part of the list it seems thay are used  - Ÿ Unused. Me thinks the list needs updating.:thebomb:

Had to see what happens with this ª it's a Feminine ordinal
:eek:

[WebSavvy]

Hey PO!

I just went through my bookmarks, because I remembered this one site that had great tag info. Anyway, here's the link:

http://www.home.zonnet.nl/robschluter/htmltaglist/

and the bullet sign can be accomplished by using &bull;

ampersand,bull,semicolon

(no spaces no coma's)

[Mel]

Nice site Debi!

and the bullet mark does scale when you change the font size in IE and NS6

[WebSavvy]

Yeah, that should scale nicely with CSS. :)

[crifer]

I would like to add a font to MazY and onepageresult font discussion.

Georgia

Verdana and Georgia is font's that is particualy made for the web and screen reading by microsoft.

Verdana has bigger gaps inside the letters to make them really easy and clear to read and Georgia has smaller serifes then Times for better reading in big artikels, becouse of the serifes the eyes have it easier to follow the words in one line.

[MazY]

Agreed about the Georgia font. However, I dropped it when I realised that it was not part of the XP font family. As stated before, we are moving towards a more XP look and feel as that is what most people will be used to within months.

All part of the VBMedia world domination plan... :)

[crifer]

That's good thinking MazY, didn't know that. But still there is a long time before everyone have xp as OS. Thats why i don't use layers och dynamic menus on my homepages, there is still people using NS 4.+ I'm thinking of block them out of sites and give then a hint how crapy their browser really is.

[Web Witch]

Forgot about Georgia font that would have been #2 but Mazy bring up a good point.

Yeah the bullets scale even with the code I gave ya, check out http://209.15.80.90/game_room02.htm For some reason I remember you need the number to make it compatiable across all languages.

What's this about NO layers in the future, browsers are just starting to make them universial:confused:

[ihelpyou]

Hey Maz, I love that blue color on your site. I had to see what color it was. You have two different colors. The table at the top is:

#0064D0

The left nav bar table is:

#0066CC

I was wondering if there is a reason for this, or simply a boo-boo? :)

The left nav is a slightly darker blue than the top table.

[MazY]

Originally posted by ihelpyou
Hey Maz, I love that blue color on your site. I had to see what color it was. You have two different colors. The table at the top is:

#0064D0

The left nav bar table is:

#0066CC

I was wondering if there is a reason for this, or simply a boo-boo? :)

The left nav is a slightly darker blue than the top table.

Doug

You are absolutely right and it is something that I only noticed a few evenings ago. Not sure how it happened but you can be rest assured it was my fault somewhere along the line.

The reason I haven't changed it is because I want an even more true XP colour but I wanted to check through my logs and see what the largest and most popular colour resolution was. (I also have the official XP design guide to hand now to ensure I get the colours and fonts exactly right.)

Luckily, 32 Bit is by far the most popular. So, check back in a couple of days and all should be even better than it is now!

Of course, it's all a big gamble, but one that I think will pay off as months progress.

And as if to mark the occasion, my partner in crime purchased the newest Bill Gates book, "Business @ The Speed of Thought" for me today. I'm about halfway through and it really is very good!

[ihelpyou]

Let me know which color of blue works the best. I love that color and will use it in other stuff.

[crifer]

MazY, im quite interested in the XP design guide. Where did you find it? I searched the microsoft.com with no results. :(

Have anyone read Designing Web Usability by Jakob Nielsen? I'm reading it when I have time, it's really good and very true.

BIG rekommendation for all webdesigners.

[MazY]

Originally posted by crifer
MazY, im quite interested in the XP design guide. Where did you find it? I searched the microsoft.com with no results. :(

Have anyone read Designing Web Usability by Jakob Nielsen? I'm reading it when I have time, it's really good and very true.

BIG rekommendation for all webdesigners.

Sorry, this post escaped me somehow...

The design guide did come from the Microsoft site. (My second home.)

I can mail you a copy if you need one. Just drop me your e-mail in PM. Warning, it's quite a large file but well worth it.

As for Jakob Neilsen - I think I've expatiated my views on his so called "web design" before and so won't go through them again. Suffice to say, if I had to send him respect in the post, I wouldn't need a large envelope. :)

[WebSavvy]

Someone had asked about css for scrollbars. This works pretty well in most browsers:

<head>
<style type="text/css">
<!--
BODY {

scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #484848;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #8E929D;
scrollbar-arrow-color: #484848;
}

-->
</style>
</head>

[kneelsit]

Hey Guys and Gals,

Thanks for a really Great thread - just finished reading from beginning to end. Thanks for all the tips and web links.

Guess I'll have to go in now and start learning CSS - my SEO started it so I guess I have to just get stuck in and find out where he is taking me. :D

[pageoneresults]

Okay, this one has baffled me for years. I can control the margins of my pages by using the body style like this...

body{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}

What I cannot figure out is how to control the margin for Netscape 4. The above style works fine in Netscape 6 and all versions of IE.

Because there is still a small number of visitors using 4.7 I had to opt for the marginheight and marginwidth in my <body> tag.

Because of those two declarations, I cannot validate 100% which has been a lifelong desire of mine. Those are the only two warnings that I get and if I remove the declarations, all my sites get a big 12 pixel white margin at the tops of the pages in Netscape 4.

Does anyone have the secret code?

[Mel]

Hi Page1

You might try removing the "margin bottom" line which I do not believe is supported in NS4. The other three are supported as far as I know.

[pageoneresults]

Actually all four of those are not supported in NS4. All four are supported in NS6 and all versions of IE.

Netscape 4 only recognizes marginheight and marginwidth and does not recognize margin top or margin left. It was a battle back then and NS4 still doesn't support it! That's okay, I'll keep the declarations in the body tag for now. When that NS4 usage level drops below 5%, I'm taking it out!

[WebSavvy]

I was experimenting with some CSS today while designing some new web forms, and happened on a way to use CSS to make some really cool buttons.

In the <head></head> tags add:

<style type="text/css">
<!--

.but {border-top:solid #000063 1px; border-bottom:solid #000063 1px; border-right:solid #000063 1px; border-left:solid #000063 1px; font-family: Verdana, Helvetica, sans-serif; font-size:11px; font-weight: bold; cursor: hand; color: #000063; background-color: #ffffff;}

.buto {border-top:solid #A0B5D7 1px; border-bottom:solid #A0B5D7 1px; border-right:solid #A0B5D7 1px; border-left:solid #A0B5D7 1px; font-family: Verdana, Helvetica, sans-serif; font-size: 11px; font-weight: bold; cursor: hand; color: #A0B5D7; background-color: #ffffff;}

// -->
</style>


In the body tags within your form add:

<INPUT TYPE=submit VALUE=" MY CSS BUTTON " class="but" onmouseover="this.className='buto'" onmouseout="this.className='but'">


:)

-Deb

[ihelpyou]

Nice Deb!!

[pageoneresults]

I liked it so much I was going to set up a test navigation using the concept.

First thing I did was check browser cross compatability. Here is what I found...

NN4.78 - Standard Form Button Look

NN6.2 - Looks great!

Opera 6.01 - Standard Form Button Look

IE6.0.26 - Looks great!

Mozilla 0.9.8 - Looks great!

I've got all five browsers open right now jumping back and forth, this is crazy. Makes you really appreciate the standards!

[WebSavvy]

Cool! So, it renders well in all browsers? I was playing around with the same CSS elements in tables too.

You can use it like this:

In the <head></head> tags add:

<style type="text/css">
<!--

.td1 {border-top:solid #A0B5D7 1px; background-color: #e8f1f9; color: #000000; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; font-weight: bold;}

.td2 {border-bottom:solid #A0B5D7 1px; background-color: #ffffff;}

// -->
</style>

Then in the table itself just do
<table>
<tr>
<td class=td1> stuff here </td>
<td class=td2> more here </td>
</tr>
</table>


:)

-Deb

[pageoneresults]

Actually that one seemed to be a little more compatible. The darker blue border above did not show in NN4.78 but worked well in all the others.

Hey, don't you have all these browsers installed on your system?

[WebSavvy]

No, I don't have all those browsers installed on my system. I use AOL as my internet provider and it bugs out big time using anything other than IE or the AOL/IE browser.

But thanks for the info. :)

[WebSavvy]

Hey PO,

Do you maybe know how to do this or where I can find out how to do this?

I'm trying to position footer.shtml at the bottom of a page that has random size content displayed in it on the fly. It's called through a .cgi that pulls 6 different files in and the footer doesn't want to stay put.

I'd like to try layering it with Z position elements in the table tag called from the CSS file itself.

Any ideas?

Thanks!

-Deb
:)

[pageoneresults]

I use AOL as my internet provider and it bugs out big time using anything other than IE or the AOL/IE browser.And here I thought you were the savvy1. Actually, if you can debug using AOL, then it has to work just about everywhere else!

[kneelsit]

Quote:- "That's good thinking MazY, didn't know that. But still there is a long time before everyone have xp as OS. Thats why i don't use layers och dynamic menus on my homepages, there is still people using NS 4.+ I'm thinking of block them out of sites and give then a hint how crapy their browser really is."

Hey Crifer Do you work for M$ :D Several of our forum readers still use NS3 would you believe.

I feel that wherever possible you should apply the KISS formula the beauty of the old browsers is their clean, simple approach and lack of crappy FEATURES which take up huge amounts of your hard drive, fill your system with garbage - ah heck don't get me started.

A long term project of mine is to try and learn linux so I can get right away from the BIG BOYS as much as possible - Long live the revolution!!

Greg

[crifer]

Kneelsit, I definitly don't work for m$, they have there flaws like every big company. I don't want to get in to deep on that :) NS according to me wasn't good until 6.x arrived, that was a real lift. The way NS (before 6) showing the pages and lack of good functions that is almost neccisery for e-commerce or lighten it up, is why i don't like it.

I don't know about all the other but i always had problems with NS it's always how the page look to javascript not working as it should be. And as IE have the bigger part of the market there is not much to do as a tiny webdesigen and follow that bigger part and try compensate for the other browsers.

Im with you trying to use linux insted, but for now m$ got the best solution and is a only choice for me. I haven't tried Mac yet but thinking of buying one as soon as i get enough money.

[kneelsit]

Hey Crifer,

No offense meant - just being sarcastic. :) - about working for M$
I am just sorry to see the decline of Netscape - especially after the takeover by AOL . I know that since M$ has won by their shrewd tactics you can't do much except go along as far as setting up your site to suit.

Have you tried Opera - I like their latest release for personal surfing.?

[crifer]

Originally posted by kneelsit

No offense meant - just being sarcastic. :) - about working for M$

I understod that, just wanted to point out to be sure that anyone don't start thinking crazy thoughts about me :)

I was a NS fan when i had win98 as OS, but when i switched to win2k that is so much better i didn't seen any advantages using NS anymore.

Originally posted by kneelsit
Have you tried Opera - I like their latest release for personal surfing.?
I haven't tried the latest, i got 5.something installed. I like Opera it have some nice features, and are the browser that follow the HTML standard best (or am i wrong?). I think im going to download the newest one now, thanks for reminding me :)

[WebSavvy]

Hey PO, I know how CSS crazed you are, so I thought I'd post this link as you may very well like to use the code. I made some cool CSS style link buttons with the new flash design I did for Mel.

http://announce.esubmit-it.com/Mel/index.shtml

[kneelsit]

Hi Deb,

document.write('<style type="text/css">')document.write('.BUTTON { font-size: 13px; font-family: times new roman, verdana, helvetica; font-weight: normal; color: #404040; '

Was this the coding you are referring to ?

[WebSavvy]

Sorry Greg, I just read your post again, and I thought you asked "what's this code you're referring to?"

No, the code for the buttons with the JavaScript and CSS is the entire thing where you see LumUP and code like that, that's it.

If you'd like I can put it in a text file for you with some example URLs. Just let me know. You can PM me.

[pageoneresults]

Hey PO, I know how CSS crazed you are, so I thought I'd post this link as you may very well like to use the code.Looks great although I'm not a fan of Times! Good job on cross compatibility also. The rollover of course does not work in NN4.x but the buttons look almost identical!

Is there supposed to be one extra space in front of all the links from Ecommerce Hosting down? I like clean simple sites like that! Makes it so much easier to navigate. I'm a long time fan of the right hand navigation. I started 123seo like that, switched to left, and now I'm back to the right. Useability studies show that people were more comfortable with navigation at right because of where you usually have your cursor when you surf.

P.S. The "s" in Hosts is getting cut off at the right, do you see that?

[pageoneresults]

Savvy1, Mel, Here are a couple of home page screen shots...

Ecommerce Hosts - Internet Explorer 6.0.26 (http://www.123seo.com/images-forums/screen-shot-ecommerce-hosts-ie6-041502.gif)

Ecommerce Hosts - Netscape Navigator 4.78 (http://www.123seo.com/images-forums/screen-shot-ecommerce-hosts-nn478-041502.gif)

[WebSavvy]

The extra space was there from when I'd used a different font, and tried to have it line up where it wasn't three lines deep before moving to times new roman. It was the only font that made it small enough where all of it fit and still be readable. I just forgot to take out the extra space.

Yeah, I'll have to fix the "s" problem with Hosts. Mel really likes the design and I am happy about that. Now I am working on some for Dougie too. :)

I thought that color blue was a much happier color blue (Thanks Farhan!) :)


- Deb

[F-S]

Pristine look & css as a bonus!

Now tie in some absolute positioning and you'll have yourself a masterpiece! :o)

[pageoneresults]

Hey savvy1, did you get a chance to see my CSS button effect? Check this one out, makes you want to press them, huh?

Windows Keyboard Shortcuts (http://www.123seo.com/information-tips/windows-keyboard-shortcuts.htm)

[F-S]

Are those scratch-n-sniff buttons? For a second I thought my mouse was broken!

[WebSavvy]

Originally posted by pageoneresults
Hey savvy1, did you get a chance to see my CSS button effect? Check this one out, makes you want to press them, huh?

Hi PO, yes I did check it out. Great job on that BTW! I must say that is the first time I have ever seen that done.

I've been playing with flash now for about a week (Mel's was the first one I'd ever done) and I must say that now I am hooked. I used flash and CSS on my search engine marketing tools site (not completed yet, just the index is up)

http://arachnid.esubmit-it.com

I downloaded this program called SWISH and it's great. It has a 15 day demo then you can buy it for like $59.00 not a bad deal. It's quality like macromedia but without the learning curve.

I love to try new programs for designing as I am a die hard fan of PSP and Xara3D, it's nice to add a flash program to the list of my fav's now. :)

[WebSavvy]

Ed - You will probably like this one!

I was playing around with CSS tonight trying to display images using CSS.

Here's the code I came up with, and it works great, but I haven't been able to figure out how to get the alt text to display.

in the CSS file:

.logo {background-image:url('300x80.png');background-repeat: no-repeat; background-color: visible; width:300px; height:80px; border:0px;}


code that goes in the page where you want the image displayed:

<em><a href="http://www.websavvy.cc" class="logo"></a></em>


Now, can anyone add to this to get the alt text to display? I've tried everything I could think of, and it's a no go. RATS! :mad:

[WebSavvy]

OK, playing with it a little more, this is what I now have. It's not alt text, it's TITLE text, but at least it works! :D


<em><a class="logo" href="http://www.websavvy.cc" TITLE="WebSavvy Smart Search!"></a></em>