/    Sign up×
Community /Pin to ProfileBookmark

IE Bug: H1 not displaying initially

Copy linkTweet thisAlerts:
Aug 01.2005

Working on a new layout for my site. Looks fine in Firefox (of course). In IE, looks fine, too, except the H1 heading in the top of the horizontal blue DIV does not show up unless I scroll it off the top and then back down, or highlight it with the mouse then click elsewhere. I seem to recall seeing this before, but don’t recall if I ever resolved why it was happening (or if it was just my browser :rolleyes: ).

The page: [url]http://charles-reace.com/test/cwr/index.php[/url]
The CSS: [url]http://charles-reace.com/test/cwr/etc/style.css[/url]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@griff777Aug 01.2005 — Working on a new layout for my site. Looks fine in Firefox (of course). In IE, looks fine, too, except the H1 heading in the top of the horizontal blue DIV does not show up unless I scroll it off the top and then back down, or highlight it with the mouse then click elsewhere. I seem to recall seeing this before, but don't recall if I ever resolved why it was happening (or if it was just my browser :rolleyes: ).

The page: http://charles-reace.com/test/cwr/index.php

The CSS: http://charles-reace.com/test/cwr/etc/style.css[/QUOTE]


I tested what you're doing, and found this "fix" works for both IE and FF...

<table><tr><td style="background-color: transparent">

<h1>Charles W. Reace, Jr.</h1>

</td></tr></table>

I'm sure I'll be bombarded with the "oh don't use a table" routine, but none-the-less, it works. Probably a flaw in IE that won't render H1 in a div that has attributes set or some such strange thing...

Hope that helps.
Copy linkTweet thisAlerts:
@toicontienAug 01.2005 — IE-Win sounds like it either needs relative positioning or use the Holly Hack to give it a false height (and thus bump that element into HasLayout() mode). No extra markup is needed.
Copy linkTweet thisAlerts:
@NogDogauthorAug 01.2005 — IE-Win sounds like it either needs relative positioning or use the Holly Hack to give it a false height (and thus bump that element into HasLayout() mode). No extra markup is needed.[/QUOTE]
I just added "position: relative;" for the H1 element, and now it displays fine in IE and FF. (There's a slight addition of space between it and the next element for whatever reason, but to no detriment for the layout.)

Thanks!
Copy linkTweet thisAlerts:
@griff777Aug 02.2005 — I just added "position: relative;" for the H1 element, and now it displays fine in IE and FF. (There's a slight addition of space between it and the next element for whatever reason, but to no detriment for the layout.)

Thanks![/QUOTE]

I learn something new everyday. I would have thought position was already "relative"...
Copy linkTweet thisAlerts:
@toicontienAug 02.2005 — Nope. The position of all elements is static by default. Relative positioning is the same as static in that the elements exists in the same place either way, but relative positioning allows you to offset the appearance of the element.
×

Success!

Help @NogDog spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...