Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > H4 headers inside divs = border chaos in IE6?

H4 headers inside divs = border chaos in IE6?
Thread Tools
Oisín
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status: Offline
Reply With Quote
Nov 23, 2005, 04:15 PM
 
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; }
     
- - e r i k - -
Posting Junkie
Join Date: May 2001
Location: Brisbane, Australia
Status: Offline
Reply With Quote
Nov 23, 2005, 09:48 PM
 
Have you tried installing the IE7-extension to fix it?

[ fb ] [ flickr ] [] [scl] [ last ] [ plaxo ]
     
Simon Mundy
Grizzled Veteran
Join Date: Jun 2001
Location: Melbourne, Australia
Status: Offline
Reply With Quote
Nov 24, 2005, 09:47 AM
 
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...
     
CaptainHaddock
Grizzled Veteran
Join Date: Apr 2004
Location: Nagoya, Japan • 日本 名古屋市
Status: Offline
Reply With Quote
Nov 24, 2005, 12:48 PM
 
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.
     
Oisín  (op)
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status: Offline
Reply With Quote
Nov 24, 2005, 01:31 PM
 
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
     
CaptainHaddock
Grizzled Veteran
Join Date: Apr 2004
Location: Nagoya, Japan • 日本 名古屋市
Status: Offline
Reply With Quote
Nov 24, 2005, 02:23 PM
 
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.
     
Oisín  (op)
Moderator Emeritus
Join Date: Mar 2004
Location: Copenhagen
Status: Offline
Reply With Quote
Nov 24, 2005, 02:30 PM
 
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*
     
CaptainHaddock
Grizzled Veteran
Join Date: Apr 2004
Location: Nagoya, Japan • 日本 名古屋市
Status: Offline
Reply With Quote
Nov 25, 2005, 02:20 AM
 
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.
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 01:37 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,