10-16-2006, 03:33 AM
I'm working on a zenGarden to brush up on my CSS skills after a long time not using them. I noticed that my content displays differently accross different browsers. I did a little research and found that standard browsers (such as firefox) use a different box model than that of Internet explorer (darn IE and PCs!!!) I've began using the star html (* html) style to set my styles specifically for IE, since it is the only browser that displays styles with that element. So the IE thing is no longer a problem. NOW my problem is that even with the same browser, my code is not displaying the same accross different platforms. The way my page looks on firefox on a pc is different from firefox on a Mac. I think the only thing that displays differently is the absolutely positioned link list. Am I missing something here?
My page isn't yet 100% finished...i need to complete it before I post it. Here is the url for my page
and for my style sheet
Thanks a bunch.
10-16-2006, 05:56 AM
You really should not use the star html hack anymore. MS already said that many of such hacks will not work in IE7 in an IEBlog "Call to action" (http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx) on October 12, 2005, and may even break the layout in IE7. Instead, MS has provided a mechanism known as conditional comments (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp) since IE5, and they continue to work through IE7. Instead of using CSS hacks, serve IE with stylesheets specific for IE using downlevel-hidden conditional comments.
10-16-2006, 06:17 AM
Varying box models are not an issue as of Internet Explorer 6, assuming the page is displaying in standard-compliance mode, as that page appears to be doing.
10-16-2006, 06:22 AM
Thanks for your comments about IE, but my real question is why my page is displaying differently on PCs than on Macs--even when you use the same browser. I use Firefox to view my page on a PC, then I go to a Mac and it looks bad, so I adjust it and then go back to a PC and it looks bad again!
Another note, I don't know if you know anything about the zenGarden, but when you submit a design you're not aloud to alter the HTML file---all formatting is done with CSS. The comments about the conditional elements are helpful and I will use them with other projects, but this one I'm really just limited to CSS adjustments! Thanks
10-16-2006, 06:26 AM
To be sure you need to be more thoughtful with using the star html hack now. I use it and conditional comments when needed.
byuhobbes85, are you sure that the versions of Firefox are the same? Are the problems because of a difference in the font used?
Keep in mind that IE5.x/Win is very different from IE5.x/Mac -- they were developed by different teams.
10-16-2006, 06:30 AM
Hmm it actually seems like default margins and padding are causing your problems. Add this to your CSS
That makes all margins and padding on all elements 0 making it look more or less the same among browsers. Just add in margin/padding where necessary.