Member Avatar for thosecars82

You can check this problem in the pink square with curvy corners that I have in . If you check the site with firefox, opera or safari everything will be alright, though. Do you have any idea why internet explorer 6 above all and 7 make this mess? For the time being, I still do not have any concrete idea about the reasons of this different behavior in these browsers from Microsoft.
I would appreciate any suggestion.
Thanks in advance

  • 2 Contributors
  • 7 Replies
  • 92 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

This thread between and highlights two separate but related IE headaches: visual differences in a rounded-color box and a CSS-only dropdown that fails in old IE. Below is a compact, practical checklist and a small pattern that address the usual culprits (doctype/quirks, stacking contexts, IE layout rules and :hover support) so the menu and the box behave consistently across browsers.

Quick checklist

  • Confirm a standards DOCTYPE so IE does not enter quirks mode.
  • Validate the markup; malformed nesting can produce intermittent rendering in older IE.
  • For IE6 dropdowns: :hover on non-anchor elements is unreliable. Use a small JS shim (or wrap interactive text in anchors) so hover-driven submenus get shown in IE6.
  • Fix IE stacking/positioning by giving the relevant containers layout and explicit positioning rather than relying on implicit flow. If z-index still clips, consider moving the submenu out of the header into the document body and absolutely positioning it.
  • If rounded corners are image-based, verify image placement and transparent-image handling for legacy IE.

Minimal patterns (works with modern browsers; conditional-comment JS adds IE6 hover)

/* force layout for old IE and create stacking context */
#header, #nav { zoom:1; position:relative; }

/* dropdown basics */
#nav ul { position:absolute; display:none; top:100%; left:0; }
#nav li:hover > ul { display:block; }
<!--[if lt IE 7]>
<script>
(function(){
  var nav = document.getElementById('nav'), lis = nav.getElementsByTagName('LI');
  for(var i=0;i<lis.length;i++){
    lis[i].onmouseover = function(){ this.className += ' hover'; }
    lis[i].onmouseout  = function(){ this.className = this.className.replace(/ ?hover\b/,''); }
  }
})();
</script>
<![endif]-->

Notes: brought up browser rendering differences; treating layout explicitly (positions, widths, and layout triggers) is the least fragile approach. Given the age of IE6/7, conditional fixes and targeted shims keep the main stylesheet simple while preserving legacy behavior.

Recommended Answers

All 7 Replies

Member Avatar for MidiMagic

Are you talking about the missing green lines in the borders?

You have empty div pairs. Nothing is placed between the tags. This is a nonstandard use (a no-no in web page design). There is no guarantee that an empty pair of tags will be rendered. If there is room, it will render, but if it is squeezed for space, it will be skipped.

Why don't you just enclose the text in a div with a border style?

Another possibility is that the line of pixels containing the border is not rendering because the display unit decided to skip that line.

Member Avatar for thosecars82

My main current problem right now is with the menu of the Home button in . The drop down menu which should be activated with the hover event of the home button works under opera, safari and firefox but not under ie6. Any idea? What I do not understand is that I have seen some people using some similar menu in http://www.cssplay.co.uk/menus/final_drop.html
and that does work under ie6 altough it is just css driven as my menu.
Thanks

Member Avatar for thosecars82

Ok,
I already kind of fixed it putting the header with a z-index above the other stuff. However, the positioning of this menu activated in the home button is still a bit different in ie an the rest of browsers. any idea?

Member Avatar for MidiMagic

This is mainly slight differences in rendering that you can't control. Notice that IE renders each font character one pixel wider than FF does. They also have different default paddings around characters.

Member Avatar for thosecars82

thks

Member Avatar for thosecars82

If there is someone who knows how to mark post as solved, please let me know.

Member Avatar for MidiMagic

There should be a link visible to only the original poster just above the quick reply window.

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.