Member Avatar for ryy705

Hello,

Please take a look at http://www.jeanbrunone.com/ie/real.html.

I cannot get the rounded corners to line up correctly in IE. Please notice the woman's hair does not line up and misalignment in the navigation.

For every element that needs rounded corners I have set the background to an image with two rounded corner at the bottom and created an empty div at the very beginning of the element with a class of "rndCap" and set its background to an image with two rounded corners at the top. You'll see this in real.html and ie.css.

I have been at it for days. I read many tutorials. Trial and error isn't working. What I need is an experienced coder's help. What do I need to do? Make the image bigger?Smaller? Reset the margin? I tried everything I could think of. Many thanks in advance for helping me it is very much appreciated.

  • 2 Contributors
  • 1 Reply
  • 108 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

described the classic IE headache: separate top/bottom corner images plus an empty cap element that looks fine in modern browsers but shifts in IE. is right that placing corner slices as absolutely positioned sprites inside a positioned container is more reliable — it removes dependence on flow, baseline alignment and empty-element quirks that older IEs expose.

Practical approach (structure + checklist):

  • Make the outer box position: relative.
  • Put two small corner elements inside and absolutely position them at top:0; left:0 and top:0; right:0.
  • Make the corner elements display:block, give them explicit width/height, and set line-height:0 / font-size:0 to avoid baseline whitespace.
  • Force hasLayout in IE6/7 on the container via an IE-only rule (for example add zoom:1 in a conditional stylesheet) rather than relying on empty filler elements.
    Example CSS pattern:
    .box { position:relative; }
.box .corner { position:absolute; display:block; width:20px; height:20px; line-height:0; font-size:0; background:no-repeat; }
.box .corner.left { left:0; top:0; background-image:url(corner-left.png); }
.box .corner.right { right:0; top:0; background-image:url(corner-right.png); }

Troubleshooting tips:

  • Verify the page runs in standards mode (correct DOCTYPE). Quirks mode changes box calculations.
  • Open IE’s developer tools and inspect computed top/left/right and the corner element sizes.
  • Check the source PNGs for stray transparent pixels or differing widths — image mis-crops are a common cause.
  • If a modern solution is acceptable, use border-radius for current browsers and provide an IE fallback; see border-radius — CSS-Tricks.
  • For IE-specific rendering oddities consult browser-quirk references such as QuirksMode.

This method keeps markup simple, isolates IE-only fixes to a small stylesheet, and avoids fragile hacks that depend on empty elements or flow-based positioning.

Member Avatar for macneato

Truth of the matter is you going about it all wrong, you approaching it, like its a table. The way i would do it, is image sprites. left and right corner. position them absolute to container div (which would be relative). Personal opinion aside. Add this to your css. Should do the trick

* {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

If you already have a global reset. Try using conditional comments since IE is giving you the problems

Edited by macneato because: n/a
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.