[thelist] DIVs with height not expanding vertically
Ian Anderson
ian at zstudio.co.uk
Mon Mar 14 03:52:40 CST 2005
Greetings all - lovely morning here in the UK
Wondered if anyone could offer any guidance with this; DIVs not
expanding vertically as the content grows if they have their height set
through CSS.
I am creating areas containing company details, enclosed in a DIV tag
like this;
<div>
<p>Company Name</p>
<p>Address 1</p>
<p>Address 2</p>
<p>County</p>
<p>Postcode</p>
<p>Phone</p>
<p>Email</p>
<p>Web address</p>
</div>
I'm sure you know the sort of thing. Not all companies (records in DB)
have all fields. Most have very few, and the information is displayed
closed-up so there are no annoying gaps. All good so far.
For design reasons, the DIV has a fixed height and a coloured
background. Again, for design reasons and efficient use of space, the
height is set to a sort of average amount. Most entries have space at
the bottom of the div and it looks nice.
Should there be *more* entries than the height allows, in IE6 for
Windows the DIV is shown to expand vertically to accomodate them. BUT in
Firefox and Safari, the box remains the specified size, and the content
overflows down into the surrounding area.This also happens when the text
size is increased in the browser in any fixed height DIV on the page.
I was astonished to read (forget where) that the IE behaviour is wrong
here, and that Firefox and Safari are behaving to spec.
Can anyone verify that this behaviour is as intended?
I imagine I should be using min-height to set the minimum height, but
this is not respected in IE. Most of my clients use IE.Argh!
(sorry to refer to previous winge, but tables don't pull this kind of
baloney.)
If anyone has any sensible suggestions, I'd love to hear them...
Many thanks, people - Have a good one
Ian Anderson
PS - I suddenly realised I can presumably use a collection of Obscure
CSS Hacks(tm) to deliver a height to IE and hide it from better
browsers; this is not a prospect that fills me with joy... I have a
bunch of fixed height DIVs and the style sheet is already bigger than I
am. Think I'll give up web design and go back to painting sheds; the
hours are better and the work is pretty much the same these days.
Let's see, I need the IE Hole in Head fix, the Warsaw-Zackinsky Parent
Child Selector Dodge; but of course if you use that on a Monday you
mustn't forget the Helsinki Syndrome Workaround. Unless you consider IE5
for Mac too, in which case you need to use the Irving Welsh Sliding
Windows trick before the Helsinki Workaround or it breaks in Opera for OS/2.
Be nice to Opera? WHY CAN'T OPERA BE NICE TO ME FOR A CHANGE?
<tip type="cynical">
Thinking of moving to CSS layouts? Save time and simply smack yourself
repeatedly in the forehead with a club hammer...
</tip>
More information about the thelist
mailing list