Hi,
another Problem while doing a website. This time Firefox bothered me, but only the Mac version.
The Problem looks like that:
What would you expect with this html and css code
HTML:
...
<body>
<div id="wrapper">
<img id="floated" src="image.png" alt="some image"
height="100" width="80" />
<div id="unfloated">
lorem ipsum dolor sit amet...
</div>
</div>
</body>
CSS:
#wrapper {
width: 400px;
}
#floated {
float: left;
}
#unfloated {
margin-left: 90px;
height: 300px;
overflow: auto;
}
So, what will you expect? It's clear.
An image on the left wich is floated left and has a width of 80px.
The div-box is on the right side of the image with 10px away from it. It has a height set, with overflow auto, so that all text which does not fit in this size will invoke a scrollbar. All that is wrapped in a div which width is set to 400px so that the text which should invoke the scrollbar does not need to be that long.
Ok, this should happen, but in Firefox for Mac you can see another effect. The margin starts at the right edge of the image, which makes the distance between image and div#unfloated 90px instead of 10px. The cause of that behavior is the attribute overflow. Without overflow you have your 10px distance, but then the div#unfloated will be extendet for the text and we don't want to have that.
It's a Bug, and I don't know if it's reported on bugzilla, but here the solution how you can still get your 10px distance.
You have to wrap the div#unfloated in another div box, let's say div#foo. Which has no overlow attribute set. Here the solution:
HTML:
...
<body>
<div id="wrapper">
<img id="floated" src="image.png" alt="some image"
height="100" width="80" />
<div id="foo">
<div id="unfloated">
lorem ipsum dolor sit amet...
</div>
</div>
</div>
</body>
CSS:
#wrapper {
width: 400px;
}
#floated {
float: left;
}
#foo {
margin-left: 90px;
height: 300px;
}
#foo #unfloated {
margin-left: 0;
}
#unfloated {
margin-left: 90px;
height: 300px;
overflow: auto;
}
This should work just fine. The definition "#foo #unfloated" is, because I don't want to always wrap the div#unfloated box, but when it's floated, then the left margin should be set to "0".
Hope it helps someone out there.
greez
Abonnieren
Kommentare zum Post (Atom)
Keine Kommentare:
Kommentar veröffentlichen