render ignore CSS width attribute if display attribute is also specified

RESOLVED INVALID

Status

()

Firefox
General
RESOLVED INVALID
10 years ago
10 years ago

People

(Reporter: William Byrd, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/3.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/3.0

rendering engine will ignore width attribute placed on any object via CSS when there is also a display attribute applied. if object initially has not display attribute, renderer will handle width properly. If Javascript subsequently applies a display attribute (for instance to collapse/expand a div) then the renderer will begin ignoring the width attribute as soon as display is set.

Reproducible: Always

Steps to Reproduce:
1. past the following into a text file and view in Firefox 3.0
2. Notice that first div, which has both properties attached renders incorrectly (width ignored) 
3.) notice second div appears ormally as it has no display property... click the button twice to set a display attribute to none, then inline and the width tag is then ignored



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
				.helpTextVisible {
					background-color:#FFFF66;
					width:100%;
					display:inline;
				}
				.helpText {
					background-color:#FFFF66;
					width:100%;
				}
		</style>
	</head>
	<body>
		<div id="HelpVisible" class="helpTextVisible">
			The style for this section initially contains both display and width properties. <br/>Width should be 100% but is ignored
		</div><br/>
		<button onclick="document.getElementById('Help').style.display = (document.getElementById('Help').style.display=='none') ? 'inline': 'none' ; ">Toggle Help</button><br/>		  
		<div id="Help" class="helpText">
			The initial style for this section contains only a width, and renders properly. <BR/>But if you hide and then show it, the width will be ignored once the display property is set
		</div>

	</body>
</html>
Actual Results:  
see above

Expected Results:  
div should be 100% width even after display is set

Comment 1

10 years ago
'width' does not apply to elements with 'display:inline'.

http://www.w3.org/TR/CSS21/visudet.html#propdef-width
[quote]
'width'
    ...
    Applies to: all elements but non-replaced inline elements, table rows, and row groups
[/quote]

The default display value for a div is 'block'.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.