Firefox to IE Help

[diabolo]

http://new.monmouthchineseschool.com

can somebody help me get the navigation bar to be in one line? (like how it is in FF)

 

[cybrax]

Had a look with IE6 , lots of problems with the CSS. Will take a look in more detail Monday night.
Make sure you have commanded the CSS to tell each DIV what place it must be.

 

[misson]

In /sources/css/moz/common.css, you set margin-top for #nav to -84px, but in /sources/css/ie/common.css you have an extra margin-top set to 2px. Also, the top property is more appropriate than margin-top.

By the way, you might want to rethink your cross-browser style strategy. For one, creating a complete set of style sheets for each browser is much more work than writing a single set for all and individual sheets to fix browser bugs. Second, having a separate set for each browser means your site will be limited to browser default styling for any browser you don't target. Take a look at your site in Safari, Chrome or Opera.

 

[cybrax]

http://browsershots.org/

They will show you how your website looks to other types of web browsers, completely free service and takes about thirty minutes to complete.

 

[diabolo]

In /sources/css/moz/common.css, you set margin-top for #nav to -84px, but in /sources/css/ie/common.css you have an extra margin-top set to 2px. Also, the top property is more appropriate than margin-top.

By the way, you might want to rethink your cross-browser style strategy. For one, creating a complete set of style sheets for each browser is much more work than writing a single set for all and individual sheets to fix browser bugs. Second, having a separate set for each browser means your site will be limited to browser default styling for any browser you don't target. Take a look at your site in Safari, Chrome or Opera.

Im using this script here: http://techpatterns.com/downloads/php_browser_detection.php
it would find out what browser is being used and replace the css's

also, how would i debug in IE
because right now i use Firebug and the IETab extensions, but I cant use Firebug and IE together.

 

[xav0989]

Start by making your IE CSS exactly like your firefox CSS. Then modify IE's CSS case by case to have it look like FF's layout.

 

[diabolo]

Start by making your IE CSS exactly like your firefox CSS. Then modify IE's CSS case by case to have it look like FF's layout.

o good. atleast im on the right track.

when i first designed the site, i did it all in FF. then I integrated the script that changes the CSS, and from the base CSS i copied them into both the moz/ and ie/ folders, so basically they are the same, except the IE has a few changes for IE Hacks/

 

[misson]

Im using this script here: http://techpatterns.com/downloads/php_browser_detection.php
it would find out what browser is being used and replace the css's

Browser sniffing is The Wrong Thing. Write a set of generic style sheets. For IE fixes, use conditional comments. For others (which is very, very rare), first see if there's a vendor specific property name corresponding to the general name (e.g. -moz-margin-top). Only if all of that fails should you turn to browser sniffing.

also, how would i debug in IE
because right now i use Firebug and the IETab extensions, but I cant use Firebug and IE together.

For IE 7 and older, install the developer toolbar. IE8 comes with developer tools already installed. Those will help to debug CSS.

To debug Javascript, use MS Script Editor (if you have Office XP or 2003), the MS Script Debugger, Visual Web Developer Express (VS Express 2008 may be simpler) or (if you have it) Visual Studio.

 

[diabolo]

Browser sniffing is The Wrong Thing. Write a set of generic style sheets. For IE fixes, use conditional comments. For others (which is very, very rare), first see if there's a vendor specific property name corresponding to the general name (e.g. -moz-margin-top). Only if all of that fails should you turn to browser sniffing.

thank you. but I think I'm going to stick with the method I'm doing now. The only problem I could see would be browser spoofing, but Im not concerned with that ATM, also the majority of the clients accessing the website would not need to spoof their browser or are computer illiterate.

Also I plan to release a mobile version, to try and hone my skill but also added functionality. so with the browser sniffing script already, i just have to put in a redirect.

If there was something I missed, please inform me.

For IE 7 and older, install the developer toolbar. IE8 comes with developer tools already installed. Those will help to debug CSS.

To debug Javascript, use MS Script Editor (if you have Office XP or 2003), the MS Script Debugger, Visual Web Developer Express (VS Express 2008 may be simpler) or (if you have it) Visual Studio.

thank you!



so does anybody know how I can fix the navigation bar in IE8? I've tried a variety of methods.
http://brenelz.com/2009/02/03/squish-the-internet-explorer-z-index-bug/

 

[misson]

thank you. but I think I'm going to stick with the method I'm doing now. The only problem I could see would be browser spoofing, but Im not concerned with that ATM, also the majority of the clients accessing the website would not need to spoof their browser or are computer illiterate.

Opera users often spoof, but that's a good thing in this case because without doing so, they won't see a well-styled site.

If there was something I missed, please inform me.

Well, the script is making more work for yourself and the server. And you still need style sheets for every browser. At the very least, include a default styling for browsers you aren't otherwise targeting. Chances are it will be the same as the Firefox style sheet.

so does anybody know how I can fix the navigation bar in IE8? I've tried a variety of methods.
http://brenelz.com/2009/02/03/squish-the-internet-explorer-z-index-bug/

I'm not seeing a z-index problem in the page, just the margin-top issue I mentioned before.

 

[diabolo]

In /sources/css/moz/common.css, you set margin-top for #nav to -84px, but in /sources/css/ie/common.css you have an extra margin-top set to 2px.

I do not see that problem. I made them different so that it would align properly in both browsers. (Firefox 3.5.5 and IE7)

Also, the top property is more appropriate than margin-top.

thanks, i didn't know that before.


The problem I see is that in IE, instead of the logo covering up the nav bar. the nav bar is being wrapped around, so I thought it would be a z-index.