Netscape Width 2

[BoulderBum]

In my markup, I use

<span class="LabelStuff">blah</span>

where LabelStuff is defined like this...

.LabelStuff
{
	border: thin inset #cccccc; 
	background-color: #F5F5F5; 
	padding: 5px;
	width: 20em;
}

It works great with IE, but blows up with Netscape. What's the deal? How do I set width properly?

 

[ChrisHunt]

What version of Netscape?

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[BillyRayPreachersSon]

Try converting your "span" to a "div", or adding this:

display:block;

to your CSS.

Hope this helps,
Dan

 

[Vragabond]

To further explain Dan's solution. Span is an inline element and as such cannot have defined width. IE mishandles that and applies the width anyway. If you think logically about it, there is no way inline element could have width specified, since you don't know when such an element might break and drop into the next line. Dan's solution translated your code on a block element, by changing it to div or by changing your span to block element (display: block; code). Hope this clarifies.

 

[BoulderBum]

Netscape 7. Is there a way compatible with all versions?

"Try converting your "span" to a "div","

Unfortunately, I can't. I'm actually using an ASP.NET Label control implemented (by Microsoft) to render itself as a span.

I'll try that block thing, though. Thanks guys!

By the way, I was also having similar "width" problems with something rendered as a TEXTAREA element. I noticed that Tek Tips just uses COLS and ROWS to control the size, but is there another way to set its width?

 

[BillyRayPreachersSon]

>> but is there another way to set its width?

Yes - you can use CSS. AFAIK (at least in IE), any CSS used to set width and/or height of a textarea overrules the ROWS and COLS, so you can do pixel-perfect with CSS, and degrade nicely for older browsers. Something like this:

<textarea cols="20" rows="5" style="width:200px;height:50px;">
...
</textarea>

Dan

 

[BoulderBum]

That block thing worked like a charm. Thanks, guys.

"...and degrade nicely for older browsers."


That's okay. I prefer a single portable method where available, ya know?

I don't suppose you guys know of some site with a huge-o repository of HTML portability issues do you?