Closed
Bug 980432
Opened 11 years ago
Closed 9 years ago
CSS max-width problematic for images within fieldsets
Categories
(Core :: Layout: Block and Inline, defect, P4)
Core
Layout: Block and Inline
Tracking
()
RESOLVED
FIXED
mozilla47
People
(Reporter: mnarayan01, Unassigned)
References
Details
(Keywords: testcase)
Attachments
(2 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140212131424
Steps to reproduce:
When an image is nested within a block element with a percentage determined with which is itself nested within a fieldset, the CSS `max-width` property does not function correctly (though it _does_ have an effect).
The following HTML demonstrated the issue (hotlinks to http://www.mozilla.org/media/img/firefox/os/bg/1400/soccer.jpg as the image):
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 1000px;
}
.inner {
width: 20%;
}
img {
max-width: 90%;
}
/* Simply for cleaner display -- not strictly needed. */
fieldset {
border: 0 none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- Good. -->
<div>
<div class="inner">
<img src="http://www.mozilla.org/media/img/firefox/os/bg/1400/soccer.jpg" >
</div>
</div>
<!-- Bad. In a fieldset. -->
<fieldset>
<div class="inner">
<img src="http://www.mozilla.org/media/img/firefox/os/bg/1400/soccer.jpg" >
</div>
</fieldset>
<!-- Good. In a fieldset - fix sizing by giving width <= that of body -->
<fieldset>
<div class="inner">
<img src="http://www.mozilla.org/media/img/firefox/os/bg/1400/soccer.jpg" style="width: 1000px;">
</div>
</fieldset>
<!-- Bad. In a fieldset - different sizing by giving width > that of body -->
<fieldset>
<div class="inner">
<img src="http://www.mozilla.org/media/img/firefox/os/bg/1400/soccer.jpg" style="width: 1100px;">
</div>
</fieldset>
</body>
</html>
|
||
Comment 1•11 years ago
|
||
What exact layout were you expecting, given that the width of the fieldset depends on its contents?
(On a side note, per spec layout here is undefined, precisely because the width of a fieldset depends on its contents.)
Note also bug 441046.
Component: Layout: Images → Layout: Block and Inline
Depends on: 441046
|
|
Reporter | |
Comment 2•11 years ago
|
||
(In reply to Boris Zbarsky [:bz] (reviews will be slow; ask someone else) from comment #1)
> What exact layout were you expecting, given that the width of the fieldset
> depends on its contents?
>
> (On a side note, per spec layout here is undefined, precisely because the
> width of a fieldset depends on its contents.)
Issue persists even if I add `style="width: 1000px;"` to the `fieldset` elements (apologies if this is unresponsive to your point).
> Note also bug 441046.
I saw that one...it seems to be about the max-width being ignored; that is _not_ the case here. The max-width property changes the behavior, it just does it in a really bizarre way (possibly based upon the height:width ratio of the image?)
TLDR version: look at the difference between the rendering of the second and third images and note that the the only difference is that the third one has its width property set to 1000px (obviously overridden by the max-width property).
|
|
||
Comment 3•11 years ago
|
||
> Issue persists even if I add `style="width: 1000px;"` to the `fieldset` elements
Doesn't matter. A fieldset will never shrink below what it thinks is the min-width of its content. Try this:
data:text/html,<fieldset style="width: 100px; border: 5px solid green"><div style="width: 200px; height: 200px; background: yellow">
So in fact a fieldset's width _always_ depends on its kids. What that means is that if those kids depend on the fieldset width you get bizarre effects. :(
|
|
Reporter | |
Comment 4•11 years ago
|
||
> So in fact a fieldset's width _always_ depends on its kids. What that means
> is that if those kids depend on the fieldset width you get bizarre effects.
> :(
Ah I follow you now. Thank you.
|
||
Updated•11 years ago
|
Keywords: testcase
OS: Mac OS X → All
Priority: -- → P4
Hardware: x86 → All
Version: 27 Branch → unspecified
Came across this bug today, see attachment.
I set an explicit width on the container element (980px), then a div inside this with a percentual width (75%), and an img inside this with a max-width of 100%. I expect the image to be 75% x 980px = 735px wide, yet it is rendered in full-width (5000px)
I have tested this in Opera 32, Chrome 45 on Ubuntu 15.04 and in IE11 on Windows 7, where it all works as expected. Firefox (41 on Ubuntu) is the odd one out.
Fixed by bug 823483.
status-firefox45:
--- → affected
status-firefox46:
--- → fixed
status-firefox47:
--- → fixed
Target Milestone: --- → mozilla47
You need to log in
before you can comment on or make changes to this bug.
Description
•