Member Avatar for tefflox

Please take a look at the way Firefox (I'm using v.3 rc2) compares to IE7 on the following page: listenlight.net/16/cooper

such that --

<br /> text
<br />
<br /> text

looks like

text
text

in IE7, instead of the correct

text

text

the css file, listenlight.net/16/issue.css may be of interest.

Please help me solve this problem. Thank you.

  • 3 Contributors
  • 5 Replies
  • 106 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The behavior here is a cross‑browser rendering inconsistency: Firefox preserves the empty line produced by the break markup, while IE7 collapses it. raised the problem, suggested removing the breaks (which does not address spacing), and pointed out the semantic fix. Below are focused diagnostics and practical fixes that work without guessing at hidden causes.

First, reproduce the problem in a tiny test page and check whether IE is running in quirks/compatibility mode — an incorrect or missing DOCTYPE will change how IE treats line breaks. Also try removing text-align: justify and toggling line-height temporarily to see whether the spacing problem is CSS-related or purely a rendering quirk. If a change in doc mode fixes it, correct the DOCTYPE and retest.

If changing markup is not possible right away, use a CSS workaround that targets the empty break lines without altering your visual design. Two safe approaches:

  • Force consecutive breaks to behave like block spacing (keeps original markup but gives predictable height).
  • Trigger hasLayout in IE (so IE paints lines correctly) with a harmless property.

Example CSS patterns to try:

/* make BRs give consistent vertical space */
#content br { display: block; line-height: 1.2; }
#content br + br { margin-top: 0.8em; }

/* IE hasLayout trigger (harmless fallback) */
#content { zoom: 1; } /* only affects IE6/7 */

If the page is served as XHTML or you want an IE‑only tweak, place the small rule inside an IE conditional stylesheet to avoid touching other browsers. Long term, convert visual paragraph breaks to semantic elements (paragraphs or dedicated spacer elements) for accessibility and future browser compatibility.

Recommended Answers

All 5 Replies

Member Avatar for sreein1986

it's n't a problem because u put the

<br>

so first remove and try it IE and Firefox

Member Avatar for tefflox

What?? I don't understand your reply at all.

here is the code..

<div style="width: 500px; text-align: justify;" id="content">
              <br /> text
              <br />
              <br /> text
Member Avatar for sreein1986

please delete here <br /> tag in div tag OK
n then check in mozilla and IE

<div style="width: 500px; text-align: justify;" id="content">
               text<br>
               text
Member Avatar for tefflox

that doesn't make any difference. i tried it.

i had to use [if IE] quirks tags everywhere. it's ugly but ready to go.

It's worth looking into. I have no idea what caused the bug to surface...

Member Avatar for MidiMagic

His page is xhtml. It requires the self-closing form of br: <br /> The problem is the use of the br tag to insert breaks in the text. The correct way to display this is to use p tags to surround the paragraphs. This is not the intent of the br tag. The br tag is for forcing a single new line in the middle of text, without inserting a blank line.

Wrong:
<div>
  text
  <br><br>text
  <br><br>text
  <br><br>text
</div>

Right:
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
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.