Hi, I'm new to CSS, though I'm a Flash person and this is my first site I'm creating and I'm getting annoyed with IE and Firefox. I was designing my site with IE and then opened it in Firefox to see it all positioned differently on the page! Instead, I repositioned everything so that it looks properly done in Firefox. So, I moved the navigation using 'margin-top' to exactly where I want the navigation to position itself in Firefox. But, with IE the navigation appears higher, leaving less space for me to insert my logo in the header. I've attached pictures to show this. What I want to ask is that what should I do. I would be happy using one stylesheet for Firefox and one for IE, but is it good to do this? What would people in the real world do in this situation? Would they sacrifice a browser so that the site only appears well positioned on only one browser and not the other? Or would they actually use two or more stylesheets (one for each browser)? A lot of people still use IE, so I wouldn't want to design my site only for Firefox and to leave the IE design looking worse off. FIREFOX INTERNET EXPLORER CSS Code <style type="text/css"> body { background-image:url(page_bg.png); background-repeat:repeat-x; font:11px Verdana, Arial, Helvetica, sans-serif; margin:0px; padding:0px; text-align:center; } div#nav_main ul { padding-left: 0; margin-left: 0; margin-top: 50px; background-color: #b6793d; color: white; float: left; width: 100%; font-family: arial, helvetica, sans-serif; } div#nav_main ul li { display: inline; } div#nav_main ul li a { padding: 0.3em 1em; background-color: #b6793d; letter-spacing:.3em; color: white; text-decoration: none; float: left; border-right: 1px solid #fff; } img { position: absolute; left: 247px; top: 220px; } div#nav_main ul li a:hover { background-color: #cc9966; color: #fff; } p#content_top { padding: 5em; margin-top: 50px; letter-spacing: .1em; word-spacing: .1em } p#content_center { padding: 5em; margin-top: 40px; letter-spacing: .1em; word-spacing: .1em } p#content_bottom { padding: 1em; background-color: #cc9966; margin-top: 30px; } </style> Code (markup): Thanks for your help.
Set the default margins and paddings. For example, in p#content_top use margin: 50px 0 0; instead of margin-top:50px;
This is a simple case for using some IE-specific CSS hacks - I decrbied them a bit on my site here: http://www.mdibb.net/web/generic_cross-browser_css_hacks/ The idea is that you use a "hack" that only IE can understand - this means that in the same style sheet you have a IE and Firefox/Opera/other rule for the same thing. Its best to avoid two different style sheets because you have to keep them both up to date and its a pain in the arse.
thanks for the replies. I'll try it out later. But I have one other problem that I want to ask about. Why is it that the colours come out lighter in Firefox, but darker in IE (or shall i say 'normal' in IE) because the colour of the logo appeared in Adobe Illustrator as the exact same shade as the colour of it in IE, but in Firefox, every colour appears lighter. Is this a common problem and why does this happen? Is there any hack for this available? Also, is there a site which has a list of all different hacks available? I've attached pictures of the colour difference below, I don't if you can notice it because of the low quality image, but here it is: IE Firefox Thanks again.
Hmm not seen that before - I can only assume that it is a different in the libraries used to decode the image. As for a page of CSS hacks - this is probably the best: http://css-discuss.incutio.com/?page=CssHack The generic ones will be all you need 99.9% of the time though!
in re: images Ask yourself whether it matters. That is, when you look at one without comparing to the other, is it bad? It is very unlikely you will be able to achieve exactitude among various browsers, and especially not among the various operating systems or among various monitors. Fortunately, users seldom view your page in multiple browsers. cheers, gary