Closed Bug 441154 Opened 16 years ago Closed 16 years ago

render ignore CSS width attribute if display attribute is also specified

Categories

(Firefox :: General, defect)

x86
Windows XP
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: william.byrd, Unassigned)

Details

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
'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
Closed: 16 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.