Member Avatar for anandhikrishnan

Hi All,

I have used <b> tag in my code.

It is like

<div>
 <table>
   <tr>
     <td>
       <B style="BACKGROUND-COLOR: orange; DISPLAY: block; HEIGHT: 1px; MARGIN-LEFT: 5px; OVERFLOW: hidden; MARGIN-RIGHT: 5px; ></B>
<B style="BACKGROUND-COLOR: orange; DISPLAY: block; HEIGHT: 1px; MARGIN-LEFT: 3px; OVERFLOW: hidden; MARGIN-RIGHT: 3px; ></B>
<B style="BACKGROUND-COLOR: orange; DISPLAY: block; HEIGHT: 1px; MARGIN-LEFT: 2px; OVERFLOW: hidden; MARGIN-RIGHT: 2px; ></B>
<B style="BACKGROUND-COLOR: orange; DISPLAY: block; HEIGHT: 1px; MARGIN-LEFT: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 1px; ></B>

This will draw 4 lines which will look like a curved ends. Its work fine in mozilla but in IE it shows gap between each lines after onclick or doing some changes in css then only it comes closer. Please suggest me what to do for this problem?

Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
  • 4 Contributors
  • 4 Replies
  • 94 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by hericles

Dani AI

Generated

The symptom you describe (lines appear with small gaps in IE but snap together after a click or CSS change) is usually a rendering/rounding or "layout" quirk in older IE builds rather than a problem with the orange bars themselves. The click forces a reflow so the browser re-renders sub-pixel positions and the gap disappears. Before rebuilding markup, try a couple of lightweight fixes that force a stable layout in IE.

A quick, non-invasive CSS tweak you can try first (targets old IE layout bugs):

.your-td, .lines-wrapper {
  zoom: 1;         /* triggers hasLayout in IE6/7/8 */
  line-height: 0;  /* avoid any accidental inline spacing */
  font-size: 0;    /* empty blocks sometimes pick up font metrics */
}

If you want a cleaner, modern approach that avoids stacking several empty elements, draw all four stripes from one element using CSS (works in modern browsers). This uses box-shadow to create the stacked lines and a small border-radius for rounded ends - no extra DOM nodes required:

.curved-rules {
  height: 1px;
  background: orange;
  box-shadow: 0 3px orange, 0 6px orange, 0 9px orange;
  border-radius: 2px;
}

Notes and troubleshooting: make sure the page is in standards mode (valid DOCTYPE) and that IE is not in Compatibility View or an unusual Document Mode. If the problem only happens after a script or style change, forcing a reflow from JavaScript (reading offsetHeight or toggling an element's zoom) will confirm the reflow hypothesis. For the most bulletproof cross-browser result (including ancient IE), use a small PNG or SVG for the curved ends as suggested; also, follow and by avoiding presentational use of <b> and using semantic markup instead.

Recommended Answers

All 4 Replies

Member Avatar for twiss

Well, that's quite stupid code you have there, sorry to say. Is it correct that you just want 4 orange lines? If so, and if you don't want to use an image (which I would find better), try something more like this:

<div id="lines">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
#lines div {
  margin:5px;
  height:1px;
  background-color:orange;
}
Member Avatar for ko ko

Why not <hr /> ?

Member Avatar for twiss

Could be done but it's meant for content seperation.

Member Avatar for hericles

Hi,
I'd use an image, unless you intend for there to be text on the lines that is following the curve. Twiss's comments above won't help you as he ignored the changing line ends give the curve you have in your code.

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.