Dear IE, what have you done with my header?

[frickaline]

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;
}

my site in development is at www.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

[abduraooft]

Have a try by adding

span.logoText {/*gzip.php...238591582 (line 2494)*/
color:#CC9900;
font-family:Papyrus;
font-size:42px;
font-style:italic;
font-weight:bold;
left:280px;
position:absolute;
top:140px;
[ICODE]height:1%;[/ICODE]
}

PS: why are you using a filedset to wrap your elements of header?
If that header image is purely for styling, then apply it as a background-image, which will make the lay-outing a bit easier.

[frickaline]

Thank you for the response. I added the height but still cannot locate my text. If I could at least find it, I could troubleshoot what is wrong with it but it doesn't show up!

To answer your question, I am writing on top of code provided to me by Livecart, my e-commerce kit. They created the base template which included the fieldset. I don't know why they are using this but I would guess it must have something to do with their live customization mode. Also, I would change how they have set up the header imaging but it is built through their product this way. They have an administrative control panel wherein you can change your logo so I am hesitant to change their layout too much.

-frick

[Fisher]

It's being given a hasLayout of -1.

Applying a z-index:2 to the class will show your text.

[frickaline]

Thank you also for the reply but Im afraid that wasn't the answer either. Adding that had no effect. I now have 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%;
padding:0px;
margin: 0px;
z-index:2;
}

...still no text in IE7, but works fine on firefox.

[Fisher]

Don't know what to tell ya. When I refresh your page, it is not showing a z-index attribute being applied still.

When I add it in the IE dev bar, it still works.

You updated your live site?

[frickaline]

Sorry I had taken it out for a second. It is back in and I can see it set when I view the page in both firebug and dev toolbar. But my text isn't showing up. Where are you adding this in dev toolbar? span.logoText?

p.s. you know how dev toolbar blink-highlights the element on the page that you have selected in the toolbar window? I don't even get a blinky thing when I pick my text which leads me to believe my text is somewhere offpage (maybe?). However, My scrollbars give me no access. I am completely mystified.

[Fisher]

I'm using IE6, and if something works in that, it usually works in IE7 too.

Here's a pic:

[abduraooft]

I'm using IE6, and if something works in that, it usually works in IE7 too.

Not really, at least in this case! (My fix of adding height:1% also worked in IE6, but not working in IE7 )

I still don't know why the OP is making it as complex as this. It's a good example of divitis

[frickaline]

I haven't got IE6, just 7. It is good to know it is working for 6 now at least but something else must still be wrong. Thank you for getting me past part of this.

Here's my pict showing IE7 failure but Firefox success:
http://i43.tinypic.com/jjy8t5.jpg


@abduraooft: its more like a big ball of mud. I am trying to write CSS inside of someone else's code, sort of like a wrapper. Trying desperately not to break anything they might have be using elsewhere while still gaining the functionality I need.

[frickaline]

Thanks for the help all, I have solved the problem on my own.

I needed to enclose the span inside its own div (plain, unstyled, classless) for some reason that is lost to me. It now seems to work, however, and I guess that's all that really matters in the end.