Shows fine in FF not in IE

[rockinaway]

I have a horizontal navbar here: http://www.etcworld.co.uk/

 

When viewed in IE, there are some extra bits to the left and right, whereas in FF it is fine.

 

The CSS is:

 

.menu 
{
margin:0px; 
padding:0px; 
height:70px; 
width:600px; 
display:block; 
background:url('http://www.etcworld.co.uk/theme/images/menu_bg.jpg') repeat-x;
float:right;
}

.menu li
{
padding:0px; 
margin:0px; 
list-style:none; 
display:inline;

}

.menu li a
{
float:left; 
padding-left:15px; 
display:block; 
text-decoration:none; 
}

.menu li img
{
float:left; 
padding-left:0px; 
display:block; 
text-decoration:none; 
}

.menu li a span
{
line-height:70px; 
float:left; 
display:block; 
padding-right:15px; 
}

.menu li img span 
{
line-height:70px; 
}

.menu li a:hover
{
background:url('http://www.etcworld.co.uk/theme/images/menu_hover.jpg') repeat-x; 
}

.menu li a.active, .menu li a.active:hover
{
line-height:70px; 
background:url('http://www.etcworld.co.uk/theme/images/menu_hover.jpg') repeat-x; 
color:rgb(255,255,255);
}

.menu li a.active span, .menu li a.active:hover span
{
background:url('http://www.etcworld.co.uk/theme/images/menu_hover.jpg') repeat-x; 
}

 

How can i get rid of the extras?

[Twister1004]

Word of warning about that compatibility; Never code it to Firefox. You will screw over every browser. Always code to IE and then make the necessary changes.

[rockinaway]

Okay, but when is causing that problem then?

[Twister1004]

Oooh, I see the issue.

 

Ummmm, in the menu where it has , home, products, and about, in the CSS you should put

background-repeat:no-repeat;

 

That should fix the problem.

[rockinaway]

That stops the whole thing from repeating. I need it to repeat for the list, but it adds some extra padding or something randomly in IE that shows the bg either side of the ending images.

 

If you check in FF, that is what I want.

[haku]

Word of warning about that compatibility; Never code it to Firefox. You will screw over every browser. Always code to IE and then make the necessary changes.

 

Not sure where you got that info, but its about as wrong as you can be on a point. IE is a non-standards compliant browser, and pretty much every other browser is standards compliant, including firefox. To code first for a broken browser, then try to adjust for a fixed browser means you will have to throw in special fixes for pretty much every other browser. If you code first for firefox, you are coding for a standards-compliant browser. 99% of the time, your site will look exactly the same in every other browser. At that point you can go back and fix for IE, which is the broken browser of the group.

 

Seriously, bad advice there. I hope you weren't doing it as a joke, but rather just out of inexperience.

[haku]

As to the problem at hand - you have no doctype. A doctype basically tells the browser what rules to process the HTML under. There are different types of HTML, and there is also XHTML. Without a doctype, the browser has to guess at what kind of code you have.

 

Where this becomes a problem is that IE goes into what is called 'quirks mode' when there is no doctype. It reacts 'quirky'! It does stuff that seems inexplicable - like your problem that you are having.

 

Spend some time reading up on doctypes, and choose the one that is applicable for you. Looking at your code, I'd say you want an XHTML doctype probably, as you have used some XHTML standards in your code. XHTML strict is actually better, though a little strict with its rules, so you should probably start with transitional, and work from there.

 

Start with the wikipedia on doctypes: http://en.wikipedia.org/wiki/Doctype

 

Then you can use some of the links at the bottom to read a little more on it.

[rockinaway]

That fixed it, can't believed I mixed it. And I always code to FF for that fact, as it is one of the reliable ones.