|
|
H4 headers inside divs = border chaos in IE6?
|
|
|
|
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status:
Offline
|
|
Whoever would have guessed that IE6 could ever render a webpage incorrectly? The shock!
I am making a page ( this page), a description of functions in a program. Basically, it's goes through the menus in the program and lists the functions one by one, hierarchically. If you look at the box titled 'etiketter' [in a proper browser, that is], you can see how I would like the second level (i.e., File -> Labels -> [function], rather than just File -> [function]) of functions to be displayed.
The code is quite simple, really: the 'big' box (with the title 'Arkiv') has a class="lev2", and the title is an h3 heading. Each 'first-level' function ('Aktiva fakturor', 'Avslutade fakturor', etc.) is in a div with a class="lev3", and their titles are all h3's; and each of the 'second-level' functions ('Adressetiketter', etc.) is in a class="lev4" div, with the title being an h4 heading.
However, if you look at the page in IE6, the h4's for some reason cause a complete border chaos, where both borders and background colours of both lev4 divs and h4's are scattered pretty much at random inside the lev3 div. If I comment out the h4's (making the boxes headingless), the problem disappears, and borders and background colours are all in their right places—but I don't think getting rid of my headings altogether is a particularly useful solution.
Anyone know what it is precisely that's causing IE6 to spout borders and backgrounds like a garden hose out of control? One thing that makes me wonder is that the CSS declarations for the h3's and the h4's is actually the same declaration (with just a few things specified separately for each of them), so they should theoretically look the same...
Relevant pieces of code:
HTML:
Code:
<div class="lev3">
<h3>Etiketter</h3>
<div class="lev4">
<h4>Adressetiketter (LSPE)</h4>
<p>Skriva ut etiketter med mottagares namn och adress, till att sätta direkt på brev/paket som skal skickas med posten.</p>
</div>
<div class="lev4">
<h4>Avsendareetiketter (LSPE)</h4>
<p>Som Adressetiketter, fast det är etiketter med avsendares namn och adress.</p>
</div>
<div class="lev4">
<h4>Alla Dina kunder (LSPE)</h4>
<p>Om Du skulle få behov för det, kan Du här skriva ut adressetiketter på alla Dina kunder.</p>
</div>
</div>
CSS (simplified a bit to cut out the irrelevant stuff):
Code:
h3, h4 {
padding: 4px 10px;
background: #fff;
border: 0;
}
h3 {
margin: -5px -10px 0;
text-transform: uppercase;
border-bottom: 1px dotted black;
}
h4 {
margin: -4px -8px 0;
}
|
|
|
|
|
|
|
|
|
Posting Junkie
Join Date: May 2001
Location: Brisbane, Australia
Status:
Offline
|
|
Have you tried installing the IE7-extension to fix it?
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Jun 2001
Location: Melbourne, Australia
Status:
Offline
|
|
Originally Posted by - - e r i k - -
Have you tried installing the IE7-extension to fix it?
Or:
h3, h4 {
padding: 4px 10px;
background: #fff;
border: 0 none;
}
Just a hunch. I remember from sometime ago that you need to specify the thickness AND the style for IE. I think... IE has so many gotchas I can never keep up...
|
Computer thez nohhh...
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Apr 2004
Location: Nagoya, Japan • 日本 名古屋市
Status:
Offline
|
|
If you can post a screenshot, I'll posit my own guess. I've debugged dozens of serious IE problems on my web sites, but I haven't had this particular problem.
|
|
|
|
|
|
|
|
|
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status:
Offline
|
|
Tried Simon's suggestion, to no avail.
Also tried installing IE7—same result. I'm not sure I installed it right, though: I unzipped the file as it told me to, and uploaded it all to an 'ie7' folder, and then pasted the code in the readme file into the PHP file I'm using here:
Code:
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="/ie7/ie7-standard-p.js" type="text/javascript"></script><![endif]-->
(The only thing I changed in that piece of code was to remove the slash before ie7/ie7-standard-p.js, 'cause the PHP file is in the same folder as the ie7 folder is.)
Am I doing anything wrong?
Captain (and others without IE6 access), there's a screenshot of the section affected here. Very much hoping this can somehow be fixed
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Apr 2004
Location: Nagoya, Japan • 日本 名古屋市
Status:
Offline
|
|
Wow, that is bizarre. And you have no borders at all set for the H4s. Maybe the negative margins are throwing IE for a loop. I have seen examples where negative margins caused content in H1 tags to get cropped in IE.
IE7 probably won't work for this. I haven't seen this kind of thing on its list of bug remedies.
My own strategy for troubleshooting would be to assign different border colours to different elements and see what elements the rogue borders are coming from.
Also, fiddle with designating various elements as "position: relative", or turning it off where possible. This sometimes changes how IE renders borders, and there's a somewhat obscure list border bug I've fixed by removing position: relative from the parent div.
|
|
|
|
|
|
|
|
|
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status:
Offline
|
|
Ah yes, I can try position: relative-ing some things here and there, that always helps with IE
I do in fact know where the rogue borders are coming from: it's the borders of the lev4 div being randomly repeated. Ah, to have a properly functioning (and rendering) IE... *sigh of longing*
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Apr 2004
Location: Nagoya, Japan • 日本 名古屋市
Status:
Offline
|
|
Another suggestion: setting an explicit height or width puts IE into a different rendering mode for some elements. Since IE treats height like min-height, you could use an IE-only style like:
* html div.lev4 { height: 1%; }
And see if that makes any difference or not.
Ah, to have a properly functioning (and rendering) IE.
I heartily second that.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|