Member Avatar for LloydFarrell

Hi All, I have found the following css rules on the web.... And whilst they look great in FF, nothing is being displayed in IE

Can someone help me out so I can at least see the boxes in IE

input, textarea {
	font-size: 0.8em;
	width: 265px;
	border: none;
	background: #fff;
	-webkit-box-shadow: inset 0 0 2px #000, 0 0 2px #eee, inset 0 0 4px #999;
	-moz-box-shadow: inset 0 0 2px #000, 0 0 2px #eee, inset 0 0 4px #999;
	box-shadow: inset 0 0 2px #000, 0 0 2px #eee, inset 0 0 4px #999;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	color: #333;
	padding: 0.5em 0.5em  0.5em 30px;
	margin: 0.3em 0;
}
  • 3 Contributors
  • 5 Replies
  • 203 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by LloydFarrell

Dani AI

Generated

Quick, practical notes that build on and so the thread is a one-stop reference for this issue.

The core reason Firefox showed the boxes while older IE did not is that the visible edge in FF came from box-shadow/border-radius, while the rule had border: none. Older IEs (IE6–8) do not support those CSS3 properties, so with no border set the fields become visually invisible. A simple, reliable fallback is to give inputs a visible border for legacy browsers:

/* visible fallback for legacy IE */
input, textarea {
  border: 1px solid #ccc;
  background: #fff;
}

There is also a markup problem worth fixing: the posted textarea start tag was self-closed, which is invalid and can break rendering in IE. Use a proper opening tag and closing tag so the textarea content is preserved across browsers:

<textarea id="description" name="description" cols="60" rows="5"><?php echo $description; ?></textarea>

Other checks and tips:

  • Ensure a standards-mode DOCTYPE so IE does not fall back to quirks/compatibility mode.
  • Use IE's Developer Tools (F12) to inspect the element, confirm which rules are applied or overridden, and see if the stylesheet is actually loading.
  • If rounded corners are required in IE6–8, consider a polyfill like CSS3 PIE or an IE-only stylesheet; otherwise accept square corners for those browsers and rely on progressive enhancement (visible border for legacy browsers, shadows/radius for modern ones).
  • Keep vendor-prefixed properties alongside the unprefixed ones (unprefixed last) as present in the original CSS.

These steps explain why suggestion worked and why was correct about older IE not rendering rounded corners.

Recommended Answers

All 5 Replies

Member Avatar for Kraai

Can you post the html part also?

Member Avatar for LloydFarrell

Here is some html from the form im trying to make

<tr>
    <td width="9">&nbsp;</td>
    <td width="142" valign="top"><div align="right" class="p"> <img src="img/arrow.png" width="16" height="16" hspace="2" vspace="2" align="right" />Experience / Qualifications&nbsp;&nbsp;</div></td>
    <td width="346"><div class="ta">
    <textarea name="description" cols="60" rows="5" class="ta" id="description"/><?php echo $description; ?></textarea><div class="smalltext">Add your qualifications and expeirence</div><?php echo $msg_description; ?><?php echo $msg_invaliddescription; ?>
      </div></td>
    <td width="13">&nbsp;</td>
  </tr>
Member Avatar for floatingDivs

Well, I'm guessing you see the actual data in all browsers, but you don't see a BORDER in IE, correct? If so, that's fairly obvious. You've set "border" to "none", but used browser-specific CSS to create rounded corners for Safari/Chrome and Firefox browsers.

Set "border" to "1px solid #000" and see if that helps.

Member Avatar for Kraai

floatingDivs is correct! To ad to his post, I think that IE does not read rounded corners, and once you see the borders in IE, they will not be rounded.

Member Avatar for LloydFarrell

@ Kraai -

Many thanks for helping with this -
I can now see the boxes in IE.. :)

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.