2 replies [Last post]
DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 16 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

Hey everybody,

I'm having some difficulty with the way that Internet Explorer is displaying some text that I'm working on... here's the URL:

http://www.realusability.net/test/

(the text in question is near the bottom of that page, in that long orange banner... the text aligned to the right that says "Published blah blah")

It should be vertically-aligned in the middle of the box to go along with the link text to the right (User-Adaptive Web Browsing), however in IE for Windows (v.5 & 6), it seems to move up about 15px for no apparent reason.

In all Gecko-enabled browsers (NN6+, Camino, Mozilla), it is perfectly aligned in the middle. I don't know why it moves up in IE, my code validates for CSS 2 and XHTML 1.0, so I assumed that beyond the box-model inconsistencies, this should be aligned correctly.

Does anyone have any suggestions? I would really like to fix this problem!

-Mike

</twocents>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

IE Margined Text Problem

Hi DJSdotcom,
Netscape is rendering the H3 class of grey with the line spacing of a normal H3.
To vertically center the text, first remove the H3 which should give the same look in ie as well as Netscape.
Then adjust the padding-top to move the text down to the center.

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 16 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

IE Margined Text Problem

Tony you're the man!

I got rid of the H3 tag and just put all the styles directly into my div right there, and it worked like a charm.

See, I try as much as I can to use predefined styles (such as defining all the headers first before I resort to other means), but I keep forgetting that if I do not re-define padding or line-height for them, the browser will KEEP the default values for those styles, messing everything up lol.

Thanks a ton.

-Mike

</twocents>