Issues with image alignment in IE6

[tomfmason]

What I have so far appears perfectly in FF and Opera but in IE the header image is off. Here is a link so that you can see what I am talking about.
http://www.thomashostings.net/main.html

here is what I have in the for the masthead, headerImg and the headerLinks


#mastHead{
width: 800px;
height: 95px;
border-bottom:2px solid #E2E2E2;
}

.headerImg{
width: 200px;
height: 95px;
float: left;
padding: 0px 0px 0px 0px;
}


.headerLinks{
width: 600px;
padding: 70px 0px 0px 205px;
}

.search{
padding: 0px 0px 0px 0px;
float: right;
font-weight: bold;
font-size: 12px;
}

If you view the page in FF or Opera you will see what I want it to look like. Then in Microshaft Explorer the headerLinks are way off.

Any suggestions would be great.

Thanks,
Tom

[WebJoel]

tested this for about a half hour, -I'm stumped! I have no idea what is causing this...

[Rezon]

I get this problem in IE when I use <img> tags inside a div that needs to be exact. It always adds a little space below the images. So if someone has a workaround I'd love to hear it.

However, you're better off making your menu into a list and making each item a background image. Or just use the sliding doors method here:

http://alistapart.com/articles/slidingdoors/

[tomfmason]

Thanks for the link on the sliding door method.

I don't realy like the current design of the site... I am trying to make something simple but not to simple.. I liked it alot more before I woke up this morning.


However, I would still like to know why that space is below the header in IE. Any suggestions?

Thanks,
Tom

[WebJoel]

To get rid of those annoying little pixel-paddings in IE, usually having the style include "margin:0; border:0; padding:0;" on the "body, html" is all you need... but here, it wasn't working!
In my tweakings I got the tabs lined up perfectly with the breadcrumb bar in IE, -but in Firefox, the tabs of <ul> and that little grey bar beneith it ended up *below" the breadcrumb bar and a bit to the right of the 'navbar' list... basically, made it worse! (yeah, -if it looks better in IE but busts in Firefox, -it IS worse!).

Hmm...

I had tried to 'float:left;" the tab images, btw, and gave them all a single STYLE to have padding-right:4px; (which replaces the "&nbsp;" that currently are used to seperare the img's).

[Rezon]

I ran into the same problem with a site I recently created for DARPA.

http://www.darpa.mil/sto

In IE, you will notice the image in the header leaves a small sliver of space below it. Same with the splash graphic on the homepage. In Firefox, this didn't occur.

I've had this happen before multiple times so if anyone has a solution, I'd also like to hear it. I'm pretty sure this is the same issue your running into.

[WebJoel]

Wow... nice site. :)

[jtillwick]

I ran into the same problem with a site I recently created for DARPA.

http://www.darpa.mil/sto

In IE, you will notice the image in the header leaves a small sliver of space below it. Same with the splash graphic on the homepage. In Firefox, this didn't occur.

I've had this happen before multiple times so if anyone has a solution, I'd also like to hear it. I'm pretty sure this is the same issue your running into.

The only solution I have come across would be to contain the image inside a div with the dimensions of the image you want shown, then give the containing div a overflow value of hidden. That should fix your problem.

Example:

<style type="text/css">
.img_container {
overflow: hidden;
width: 200px;
height: 200px;
}
img {
width: 200px;
height: 200px;
}
</style>
<div class="img_container">
<img src="someimage.png" />
</div>

[Rezon]

WebJoel, thanks! :)

Jtillwick, I'll try your workaround tomorrow morning. Thanks!

Tomfmason, let us know if jtillwick's solution works for you as well. I still recommend the sliding doors method over what your doing currently though.

[tomfmason]

No that didn't solve the problem for IE. However it did create another issue in FF and Opera. The header buttons were pushed all the way to the right side.. A real pain in the ...

Also, this design that I posted is basically a dead one. I am not happy with it. The logo is rather cheap in appearance. It looks like a complete noob did it(not far from the truth). I am only leaving it up so that people can see what the issue was. I will use the 'sliding door' method from now on.


Thanks again,
Tom

[Rezon]

jtillwick... now why didn't I think of using overflow. You're the man. That worked like a charm.

Appreciate it.