Member Avatar for f_atencia

Could someone please explain why this does not display properly on any other browser except IE:

<span id="NextOfKinUniqueIDBuddy" class="ReadOnly" style="width:400px;height:50px; border:2px inset threedhighlight;padding:1px">
 <span id="1309819582156">
  <div>Dr Dre Aftermath</div>
  <div>1 Test Street, SYDNEY, NSW 2000 AU</div>
  <div>Phone: +61 02 98222222 Fax: +61 02 91111111 Mobile: 0415875421</div>
  <div>Email: testing@test.com.au</div>
 </span>
</span>

I'm aware that threedhighlight may not be compatible with other browsers, but nothing else seems to work (e.g. changing the background-color to black)

Any help is greatly appreciated.

Many thanks

  • 3 Contributors
  • 2 Replies
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

Two things are causing cross‑browser trouble here: invalid HTML nesting (inline elements holding block elements) and a nonstandard system color. is right about the nesting problem (browsers handle invalid markup differently), and ’s suggestion to use a block wrapper is the simplest practical fix. The legacy threedhighlight color is not reliably supported outside old IE builds, so replace it with a normal color value or a CSS border/box effect.

Practical fixes you can apply now:

Option A — use a block container (preferred)

<div id="contactWrapper" class="read-only">
  <span class="line">Name</span>
  <span class="line">Address</span>
  <span class="line">Phone</span>
  <span class="line">Email</span>
</div>
.read-only {
  width: 400px;
  padding: 4px;
  border: 2px inset #ccc;        /* cross‑browser 3D look */
  box-sizing: border-box;
  overflow: auto;                /* if you must limit height */
}
.read-only .line { display: block; }

Option B — keep an inline element but make its children inline elements rendered as blocks

<span id="contactInline" class="read-only">
  <span class="line">Name</span>
  <span class="line">Address</span>
  ...
</span>

Use the same CSS above; .line { display:block; } avoids invalid nesting while preserving the visual block lines.

Quick troubleshooting checklist

  • Validate the final HTML (validator.w3.org) to catch invalid nesting.
  • Use devtools to inspect computed styles and check for display, height, and overflow differences.
  • Replace threedhighlight with a hex/RGB value or standard CSS border/box-shadow; threedhighlight is a legacy system color (see MDN on system colors and the span element for permitted content).
  • If you must keep a fixed height, use box-sizing: border-box so padding/border are included and add overflow:auto to avoid clipping.

References: MDN on span (permitted content) and MDN on CSS system colors for why threedhighlight is unreliable.

Recommended Answers

All 2 Replies

Member Avatar for selvaganapathy

Use DIV tag instead of the first SPAN tag and remove the height CSS.

Member Avatar for ko ko

SPAN is inline element and DIV is block. Inline element cannot contain block-level elements whether block-level element can contain both block and inline elements. Try to alter way to use.

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.