Dear IE, what have you done with my header?

I'm sure I've done something wrong here but for the life of me I can't figure it out. If I could at least find the element in IE, I might have some clues but its just not there! I am trying to absolute position some header text, and it works fine in both safari and firefox, however with IE the text in the header just vanishes *poof*! I am hoping someone here can tell me what grave faux-pas I have committed to deserve such treatment from IE.

My CSS for the header text looks like this:

span.logoText {
font-family: Papyrus;
font-style: italic;
font-size: 42px;
color: #cc9900;
font-weight: bold;
position: absolute;
top: 140px;
left: 280px;
height: 1%;
z-index: 2;
}

my site in development is at applecrestfarms.com.

I had thought that this would allow me in any browser to position the text based on the location of the top left corner of the browser. IE does not seem to agree. Any help would be much appreciated! Thanks....-frick

 

position: absolute; thats what, either use position relative (may affect layouts tho) or what ever parent container your span is in must be positionned relative if you wish to use absolute for it's childs. Not sure why your using 1% height tho have any floats inside your span?

 

I am using absolute because relative was impacting layout. Some floats were causing problems because they would change in size causing the header text to move relative to those changes (specifically the shopping cart menu options). So, I switched to absolute which works perfectly for every browser I have except for IE7.

I changed the CSS for the containing element to be position: relative but this had no impact on the problem. The text still fails to show for IE7.

I added the height only as an afterthought for troubleshooting purposes (so that I might see if I at least would get an outlined area in developers toolbar, which I don't. I do get one in firebug.)

 

I have figured this out. I don't know why but when I enclose my position:absolute span in a classless, style-free div of its own, everything works.

 

Well from the code i see your span isn't in the header div ( where you added the relative )your header is closing just before, close it after.