Trouble with absolute positioning of 1 item in IE 7/8

HTML & CSS
1

So in this new design I am building out I am having an issue with the logo (which is set as the H1) being positioned with an absolute setting in IE 7/8. Of course it looks fine in firefox,safari etc. The only reason I am needing the logo to be positioned like this is the black container you see under it, which is just a place holder for now, will be some information that I need for it to butt up right to the line and the logo hang over it. I’ve tinkered with quite a few things but can’t seem to get it. If someone could take a look and see where the errors are in my ways, I’d greatly appreciate it! I’m sure it is something simple that I am jsut not getting. It’s just the top nav you will see for now, not a whole page so not too much code to go through.

here is a link to my problem in IE 7/8: http://www.arteye.com/bsnav/nav.html

I certainly appreciate any help!

2

No problem!

You are also wrapping divs around all three of the UL’s in the header, that’s three divs that are not needed there. All you needed to do was put those div styles on the UL’s.

You can also loose that #navhold wrapper since you have set the same BG image on the body. It is not doing anything at all.

That’s four unnecessary divs right off the bat, at that rate your page could wind up very bloated by the time you are done with it. :wink:

3

Hi,
IE can be unpredictable with AP elements if you don’t define the offset property/value.

You are using 6px margins to position it and it just needs to be top:6px; and left:6px;
Get rid of that float on the H1 too, it is not doing anything, the AP wins out and nullifies the float.

I would suggest that you use an image replacement method instead of the negative text-indent. I will go into that later if you are interested. You should really get rid of that transitional doctype and that IE7 compat mode meta tag too, no reason to run IE8 in compat mode.

Here is all you need with the H1

h1 {
    width: 134px;
    height: 135px;
    position: absolute;
    top:6px;
    left:6px;
    z-index: 1;
    background: url(../images/nav_logo.png) no-repeat;
}
4

That fixed it! Thanks so much for your help! It was driving me crazy! I was over thinking it. I did remove that trans code too… I hear what you are saying. Thanks a ton again!