Member Avatar for Member #117553

Hi, guys.

I have an odd problem with internet explorer, that I cannot figure out how to solve it.

I have a dynamically generated page, that displays a gallery.
Basicly the structure is the following:

<div id='content'>
 <h2>Gallery</h2>
 <div id='thumbsHere' style="float: right, width: 740px;">
  HERE GETS GENERATED BY PHP THE THUMBS. Thumbs are just images with padding 10px, border 1 px, margin 5px;
 </div>
<ul onclick="showHiddenMenu()" style="float: right; width: 200px;">
  <li>MyMenu
     <ul style="display: none;">
       <li>Submenu</li>
     </ul>
  </li>
</ul>
</div>

The odd thing here is that the H2 tag, although you can see in the source, does not display, until you select all items on the page, or, until you click on the submenu or something like this.

In FF and Opera there is no such problem.

Do you have any idea why is that?

Check it yourselves on

If you are not familiar with cyrillyc, the gallery is second link from right to left on the horizontal menu.

Will appreciate your help!

  • 3 Contributors
  • 4 Replies
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

This is a classic Internet Explorer repaint / "hasLayout" symptom — the element is in the DOM but IE does not paint its contents until something forces a reflow (selecting text, clicking, etc.). As discovered, forcing the H2 to take layout resolved the symptom on the affected IE installs, while saw no problem on their box (these bugs vary by engine/version and by invalid CSS).

Why it happened

  • Older IE versions use an internal "hasLayout" flag. If an element (or its container) does not have layout, floats and other siblings can produce painting bugs. Invalid inline CSS or missing DOCTYPE can make these conditions more likely.

Practical fixes (choose one)

  • Trigger layout for the H2 or its container. Common, safe options are:

    /* IE-specific trigger */
zoom: 1;

/* causes a new formatting context; useful on containers */
overflow: auto;

/* make the element inline-block so it lays out predictably */
display: inline-block;

  • More robust approach: ensure valid CSS and proper float containment (use a clearfix or make the parent contain floats), and use a standards DOCTYPE so IE is not in quirks mode.

Other notes

  • The sample HTML in the thread included malformed inline styles (commas instead of semicolons). Fixing those and validating the markup often eliminates odd cross-browser rendering.
  • was right to point out attribute quoting — cleaning up markup plus one of the layout triggers above will give a stable, cross-browser result.

Recommended Answers

All 4 Replies

Member Avatar for Member #114696

Its working perfect in my Internet Explorer.....????if i have opened the correct link!!!

Member Avatar for Member #117553

Its working perfect in my Internet Explorer.....????if i have opened the correct link!!!

Thanks, Vishesh!

It seems that this problem occurs just on some IE, however, i cannot find a dependancy.
I have attached 2 pics here - one is how it renderes in FFox, the second is the IE rendered with a source view - so you can see it actually it is in the source.:?:

If anyone has any idea, please advise, as all seems OK.

FFrendered.jpg 52.68 KB IERendered.jpg 106.94 KB
Member Avatar for Member #117553

I got it solved. Adding height: 1%; on the h2 made the trick, now renders ok in IE.

Member Avatar for Dani

Glad you got it fixed. I was going to suggest using double quotes for your <div id="content">

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.