Cross Browser issues.

Destx · March 23rd, 2007, 11:20 AM

I coded http://mooresvillewd.com/arp in CSS, the site works perfectly in IE6 but in IE7 and FF it is messed up. I checked the code and it was valid with 0 errors. I am not sure why it is different, you would figure newer browsers wouldn't have the errors. Any help would be greatly appreciated.

karinne · March 23rd, 2007, 11:50 AM

Change your doctype to either HTML Strict or an XHTML Transitional doctype.

Reduce the width of your navigation class to 130 and then everything below it. The .navigation li a { and.navigation li a:hover { should be 120px or around that. You need to take borders, padding and margins into account. That the box-model hack. IE7 got some of it right and FF has been doing it right all along but Ie6 ... well ... it's IE6 :P

You should code your site according to Firefox and not IE. Firefox will display your code as you write it not as it is intended like IE.

There's alot of unnecessary code in that CSS too. Stuff like this

Code:

.content

{
	width: 452px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000000;
}

can be reduce to this

Code:

.content

{
	width: 452px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;	
}

Ryan has a really good article on Proper CSS Shorthand that you should definately look at.

moojoo · March 23rd, 2007, 04:46 PM

And even shorter...

Code:

.content {
border:solid #000;
border-width:1px 0 0 1px;
}

Destx · March 26th, 2007, 11:26 AM

I tried doing what you said and I still can't get it. I also got some other advice on another site and it didn't effect it at all.

Lchad · March 26th, 2007, 12:22 PM

I just check it in IE 7 and FF and the site looks exactly the same. I don't see anything messed up in FF. Are you sure you don't need to clear your cache/refresh?

karinne · March 26th, 2007, 02:56 PM

I doubt you even tried everything I posted because when I do (via Firebug) it works