More IE Problems

HTML & CSS
1

This is the most stubborn browser I have ever had to work with. The only reason I am coding around it is because 40% of my website traffic is from IE users :confused:

Here is an image of my issue:
ImageShack® - Online Photo and Video Hosting

The light blue bar on the bottom just above the navigation bar only appears in IE.

In my header, I have an image for the logo, and another image sretched across the background on the x-axis.

Here is the code on how I achieved this:


<div id="header">
	<div id="wrapper">
		<img src="images/logo.jpg" border="0" />
	</div>
</div>

Let me explain that fast, on why the wrapper is inside the header tag. I wanted to have the logo stretch the WHOLE page, but all content to be displayed in a 900px wide wrapper, in the center.

Here is the CSS for my header and wrapper:


#header {
	background-image: url('../images/logo_bg.jpg');
	width: auto;
	margin: auto;
}

#navigation {
	background-image: url('../images/nav_bg.jpg');
	margin: auto;
	line-height: 43px;
	font-size: 14px;
	overflow: hidden;
}

#wrapper {
	width: 900px;
	margin: auto;
}

Is there anything that is missing that would cause the header to add a few pixels?

2

At a guess the gap is probably the fact that images are placed on the baseline by default and not the bottom. This is to accommodate descenders in text.

The usual solution is to set the image to display:block to kill the gap.


#wrapper img{display:block}

You can also set the vertical alignment to bottom (#wrapper img {vertical-align:bottom}) if you don’t want the image displaying as a block.

3

That did it, alright!

My next question is, how to I center all my content in IE? In Firefox it works when I use:


margin: auto;

However, this does not seem to work in IE.

–

Problem solved. I used a DocType method that I found while searching through other ones. There are so many methods that do not work that I found on Google. Could this be because of old IE versions?

4

IE will center exactly the same as other browsers assuming you have a full valid doctype (with uri). Otherwise it will default to quirks mode and will not center in the standard way although there is another method but only needed when IE is in quirks mode (no doctype etc).

For a block element with a width defined just use margin:auto.

If that doesn’t work then we’d need to see more code :slight_smile: