Newbie: CSS Positioning Questions

[kwilliams]

I'm in the new process of converting our entire site from using tables to using CSS positioning. (NOTE: I've included what I have so far at this location: http://www.douglas-county.com/test_folder/ie6.css) But I've run across a few questions:

1) Shouldn't the units of measurement ('em' in my case) be interpreted the same accross all browsers? If not...why not?

2) Is there a way for me to develop for all of the other alternative browsers (besides IE and Gecko-based) that are out there, or is that just impossible?

3) Who is covered under "Gecko-based Browsers" besides Mozilla, Netscape, and Galeon?

4) Is there a simpler way to work with the 'em' unit of measurement? (NOTE: I've set my page's main font size to '62.8%' as noted in previous posts in this forum)

5) Is there a way of previewing my design & formatting with old versions of browsers? I only have IE 6.0 and Mozilla, and I intend to download Opera and Safari if possible. But what about IE 3.0 to IE5.5, Mac's, Netscape, Kong, etc.? Is there one central resource for all of these browsers to debug an individual css and display page?

I'm using the 'em' unit of measurement for my site because I heard from several sources that it's the best choice concerning accessibility, since users can resize your font if they need to do so.

Ok, that should do it. So far, I've found the process to be exilerating and frustrating at the same time. The biggest pain is how one set of properties will not work the same for IE as it would for say Mozilla. It would be nice for them to all work together to make the user and developer's experience easier, but I guess that's doubtful. Anyway, and and all advice is appreciated. Thanks.

[Sanim]

If it does work in Internet Explorer and not in Mozilla, you didn't code "right." Mozilla displays Web sites correctly; Internet Explorer is more likely to give you errors because it's a "bad" browser. Also, if you use a Windows, I don't think you can download Safari.

[BonRouge]

5) Is there a way of previewing my design & formatting with old versions of browsers? I only have IE 6.0 and Mozilla, and I intend to download Opera and Safari if possible. But what about IE 3.0 to IE5.5, Mac's, Netscape, Kong, etc.? Is there one central resource for all of these browsers to debug an individual css and display page?

You can install older versions of IE (http://www.skyzyx.com/archives/000094.php) and you can easily download Netscape (http://browser.netscape.com/nsb/download/default.jsp) .

For the rest, you could try Browsercam.com. It's expensive, but I know a group of developers (http://www.sitepoint.com/forums/showthread.php?t=252885) who are chipping in to split the cost (so it actually becomes quite cheap). I'm in one of these groups and I highly recommend joining.

[kwilliams]

If it does work in Internet Explorer and not in Mozilla, you didn't code "right." Mozilla displays Web sites correctly; Internet Explorer is more likely to give you errors because it's a "bad" browser. Also, if you use a Windows, I don't think you can download Safari. -Sanim

Actually...I was working with coding one stylesheet for both browsers, but I ran into several issues. Several of the alignments didn't work in both browsers, properties for each were handled differently, and css rollovers work completely differently in those two browsers alone...not to mention the others.

After a lot of frustration, I researched it a bit further and found that several repuatable developers use more that one stylesheet for different browser types, browser versions, and devices. I also saw that I could use CSS hacks to get one stylesheet to work in all browsers, but the upkeep of those same hacks as things change overtime would be a pain in my a**. So I decided to follow the K.I.S.S. motto, and that's what I intend to do.

P.S. I personally think that designing stylesheets for each set of users that works properly for them is the correct way to do it, as opposed to a bunch of hacks that would end up being a slippery-slope of future revisions.

You can install older versions of IE and you can easily download Netscape. For the rest, you could try Browsercam.com. It's expensive, but I know a group of developers who are chipping in to split the cost (so it actually becomes quite cheap). I'm in one of these groups and I highly recommend joining. -BonRouge

Thanks for those great suggestions. I really appreciate you pointing me in the right direction, as it will greatly help me to design my site to be accessible to as many users as possible. Have a good one.

[toicontien]

... 1) Shouldn't the units of measurement ('em' in my case) be interpreted the same accross all browsers? If not...why not?
An 'em' is a unit of measure equal to the point size of a font. The font size is determined by each user in their browser settings. Different browsers interpret the pixel value for pt differently, as do differing operating systems. The reason an 'em' isn't the same size cross-browser is because there really isn't a set pixel value for what 1 point is, at least nothing that's standard across all operating systems. No one operating system has it right and interprets the meaning of font size as best as it can.

2) Is there a way for me to develop for all of the other alternative browsers (besides IE and Gecko-based) that are out there, or is that just impossible?
It's not impossible. There really are only six basic browsers: Internet Explorer/Win, Internet Explorer/Mac, Safari, Omniweb, Gecko, and Opera. You can also install multiple versions of IE-Win (http://www.skyzyx.com/archives/000094.php). (BonRouge beat me to it :) )

3) Who is covered under "Gecko-based Browsers" besides Mozilla, Netscape, and Galeon?
Quite a few. You only have to worry about Mozilla/Firefox and Netscape. All the others have, like, two users... total.


4) Is there a simpler way to work with the 'em' unit of measurement? (NOTE: I've set my page's main font size to '62.8%' as noted in previous posts in this forum)
Well, if IE-Win interpreted fixed font sizes correctly, you could set the body font size to something like 10px. then a 1.2em font size would be 12 pixels tall. IE-Win won't let users resize text if it is set in pt or px.

5) Is there a way of previewing my design & formatting with old versions of browsers? I only have IE 6.0 and Mozilla, and I intend to download Opera and Safari if possible. But what about IE 3.0 to IE5.5, Mac's, Netscape, Kong, etc.? Is there one central resource for all of these browsers to debug an individual css and display page?
refer to installing multiple versions of IE-Win, link above. Only worry about the following browsers:

Windows
Mozilla/Firefox
Opera 7+
IE-Win 5.01+
Netscape 7+

Macintosh OS 8/9
Netscape 7.01 - 7.02 (I think)
Internet Explorer 5.1

Macintosh OSX
Safari
Internet Explorer 5.1 and 5.2.
Omniweb, if you want to pay for it.
Netscape 7.01+

Linux/Unix
Mozilla/Firefox.
Netscape 7+

I'm not totally against using style sheets geared to a specific browser, however browser detection should be done on the server side and not with JavaScript. Users can disable JavaScript on their browser.

[kwilliams]

Wow, what a great and thorough answer toicontien. I completely appreciate all of the detailed suggestions, as they will greatly help me to develop my stylesheet/site in the proper fashion.

And I really appreciate the tip concerning "browser detection should be done on the server side and not with JavaScript. Users can disable JavaScript on their browser.". I'm going to be using ASP.NET with VB.NET for my new site, so is there a simple way to detect browsers within this site model? Thanks again.

[Sanim]

Yes, there is, though I don't know how to do it. I'm just starting PHP 5.

[kwilliams]

Ok, thanks though.

[BeachSide]

One thing you must remember is that em font sizes were never meant for digital design. They were left over from print design days.

[speedbird]

For font sizing issues have a look at these sources,

http://www.alistapart.com/topics/typography/

http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html

Then have some strong coffee...

[kwilliams]

Thanks for the reference sites...I'll check them out ASAP.

So were those people correct that 'em' is the correct font to use for design is you want accessibility on your site? Or should I have stuck to 'px' 'for design and 'pt' for print?

If I'm going to make a change back from 'em' to 'px', I'll need to do it now. But I want to do what's best for the user and for me as the developer.

[NogDog]

The important thing to remember about the em is that it is a relative size, not an absolute size. It is equal to the point size of the current font (and named because a 'M' in most fonts typically took up the space of a square with each side about equal to the point size).

As you change font sizes within your document, the em will therefore have different sizes. As the user increases/decreases font size for ease of reading for their hardware and for their eyes, the em's size will change. This can be an advantage in some respects for your visual design in that you can keep the size and spacing of elements consistent in proportion to the size of the font. For instance, 10px of padding might look like quite a bit when using a 10pt font-size, but might look too small if the font-size is upped to 20pt; but if you use 1em for the padding, then the spacing will be consistent relative to the font size.

PS: Yes, I once worked for 3 years at a typesetting company - back in the Dark Ages when computers were just starting to make inroads into that industry.

[kwilliams]

So I've read through your post and those two referenced articles, and I'm now even more confused on what to do. What I understand is that if the developer uses 'em' as their unit of measurement, the user will be able to resize the text with their browser, which will allow for more accessibility. The downside of this is that the design can be pretty much destroyed with this method if text is used within images, like with CSS <div> tags.

But if a developer chooses to use 'px' as their unit of measurement, the site's design won't be affected by what the user chooses as their browser's text-size, which will result in more uniformity. The downside to this is that the user has no choice but to view the site in the set font size that uses 'px'.

Am I correct in my assessments? If so, then is there a best solution for both the developer and the user? If not, then I guess I'll have to choose between two options that each have their individual faults. What a pain...

[Sanim]

You can change the text size on any web site, even if their text is in pixels measurement. I'm using a Mac, so I wouldn't know about IE6, but if I hold down command (looks like the Apple logo) and press the "+" sign, the text gets bigger, and if I do the same thing but press the "-" button instead, it gets smaller. In the Opera 7 demo that I downloaded, there's a box right below the address bar and to the right that lets you change the font size as well.

[kwilliams]

But I just read a brief note from another article (see http://www.scotconnect.com/webtypography/pixels.php) that noted that IE with Windows was the only browser that can't resize 'px' text, so I gave it a try.

First, I viewed my current site, which uses 'px' exclusively as its unit of measurement, in both IE6 and Mozilla. In IE6, the text size didn't change a bit, but in Mozilla it did.

Second, I viewed my new site in the same fashion. Both browsers were able to resize the site's text, but since the graphics, id's, and classes also use 'em', it completely messed up the design of the site.

So I'm thinking that I'm going to go ahead and either:
1) Create my stylesheets to only use 'em' for text size, and not graphic size
or...
2) Use 'px' as my unit of measurement, and "provide a style-sheet switcher in order to give IE Win users the same control as other browser users", as noted from that article.

I'm not sure which one of these options I'm going to go with at this time, but any advice would be greatly appreciated. Thanks.

[BonRouge]

Hey,

Let's say you have a horizontal menu that is 400px wide, you have it centred with your auto margins and your text fits into it quite nicely - you're very happy with what you see. Then the user increases the size of the text because she has a small monitor or bad eyes or whatever - your menu, which was lined up in one row might become two rows and look bad. If, on the other hand, your menu is Xem wide, it will stay centred, and the text will remain on one line.

[kwilliams]

I understand what you're saying, but from what I've seen, that's only true of all browsers except IEWin. No matter what, almost all of the other browsers will be able to change the text size if they want to, whether I use 'px' or 'em'. But if I only use 'em' for text, and 'px' for graphics, then only the text would be resized. Am I wrong is that assessment?

[BonRouge]

No - that's right. It's an interesting discussion actually - I was reading this page on/at A List Apart (http://www.alistapart.com/articles/elastic/) just the other day about 'elastic' design. You can skip straight to this htmldog page (http://www.htmldog.com/articles/elasticdesign/demo/) to see the ideas in action. I'm a bit confused about this because as far as I was aware, the common concensus on images was that you should set them to the actual height of the image - don't resize them in html or css as they don't look right. The images (and everything else actually) on this demo page are in em and when you resize the page, the layout keeps its shape very nicely (and I don't see any problem with the images being resized).

[Sanim]

Well, you know what I say to that?
IE blows!!

[kwilliams]

...ain't it the truth. I can't believe how much trouble I have to go through just to get the same site working in IE vs. every other browser. I'm a believer that in another 20 years, MS will greatly lose their ground as "the" browser because of this kind of crap. But we'll just have to wait and see if I'm correct.

Anyway, I'm going to use your suggestion and take all of my images out of the CSS stylesheet to use directly on the page. The only problem I'll have are the tabs that I have that I wanted to use with regular text vs. using graphic text for those same tabs. But I guess that's what I'll have to do to get this to work properly.

I GREATLY appreciate all of your advice and suggestions through this thread. Thank you all so much, as it's really helped me to make some important decisions at a very important point in the development of my new site. Once I'm done with this site, and it's been uploaded to the main web server, I'll forward you a link for your ideas. Thanks again:)