Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Need CSS workaround for IE 6 ignoring min-height

Reply
Thread Tools

Need CSS workaround for IE 6 ignoring min-height

 
 
Wayfarer
Guest
Posts: n/a
 
      10-02-2003
Hi,

I've got a website (see below) that, among other things, has a database
of quotes. When no quotes are returned from a search, or if there are
only one or two quotes returned, the <div id="content"> needs to be at a
minimum height to avoid mutilating the menu and page presentation. It
works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
workaround? I'd prefer one that doesn't involve javascript, though I'll
use it if I have to.

TIA

--
Wayfarer
Journeys: http://wayfarer.brinkster.net/
 
Reply With Quote
 
 
 
 
Toby A Inkster
Guest
Posts: n/a
 
      10-02-2003
Wayfarer wrote:

> <div id="content"> needs to be at a
> minimum height to avoid mutilating the menu and page presentation. It
> works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
> workaround? I'd prefer one that doesn't involve javascript, though I'll
> use it if I have to.


IE doesn't support min-height.

I know you wanted to avoid JavaScript, but there is a possible way to fix
using IE-proprietry extensions to JavaScript.

You can test for the actual height of an element using
document.getElementById('ElementID').offsetHeight and then if this is
found to be less than what you wanted as a minimum, adjust the value of
document.getElementById('ElementID').style.height.

Of course, make sure you do a JavaScript test for the user agent. If
agent != IE, then do nothing.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132

 
Reply With Quote
 
 
 
 
Eric B. Bednarz
Guest
Posts: n/a
 
      10-03-2003
Wayfarer <(E-Mail Removed)> writes:

> [...] the <div id="content"> needs to be at a
> minimum height to avoid mutilating the menu and page presentation. It
> works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
> workaround?


M$IE treats the height property incorrectly anyway and stretches a box
to the size that its contents need. You could thusly declare min-height
for browsers that support it and then employ the usual M$ voodoo syntax
[0] to attach style rules to your document that declare height instead.


[0] <http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp>

Which is a very entertaining read; to quote the beginning:

| One of the most common operations performed in a Web page is to detect
| the browser type and version.

Know your oxymorons. Barf, barf.

| Browser detection is performed to ensure
| that the content presented to the browser is compatible and renders
| correctly.

Now, *that* explains

Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg,
application/vnd.ms-powerpoint, application/vnd.ms-excel,
application/msword, */*

Chomp, chomp.


--
README
 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      10-03-2003
Wayfarer wrote:
>
> I've got a website (see below) that, among other things, has a database
> of quotes. When no quotes are returned from a search, or if there are
> only one or two quotes returned, the <div id="content"> needs to be at a
> minimum height to avoid mutilating the menu and page presentation. It
> works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
> workaround? I'd prefer one that doesn't involve javascript, though I'll
> use it if I have to.


IE's default overflow behavior doesn't follow specs, but will work in
your favor here. Unless the overflow property is specifically set, IE
will ignore the set dimension(s) and expand a box as needed to fit the
content. This means you can set the height property and it will act as
min-height. Just don't set overflow and you should be fine.

* html div#content { height:10em; } /* min-height for IE */

Should work. AFAIK, this particular syntax only works in IE so other
browsers should ignore the rule.
<URL:http://centricle.com/ref/css/filters/tests/star_html/>

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

 
Reply With Quote
 
DU
Guest
Posts: n/a
 
      10-05-2003
kchayka wrote:

> Wayfarer wrote:
>
>>I've got a website (see below) that, among other things, has a database
>>of quotes. When no quotes are returned from a search, or if there are
>>only one or two quotes returned, the <div id="content"> needs to be at a
>>minimum height to avoid mutilating the menu and page presentation. It
>>works in NS, Opera and Firebird, but IE 6 just ignores it. Is there any
>>workaround? I'd prefer one that doesn't involve javascript, though I'll
>>use it if I have to.

>
>
> IE's default overflow behavior doesn't follow specs, but will work in
> your favor here.


Exactly!

Unless the overflow property is specifically set, IE
> will ignore the set dimension(s) and expand a box as needed to fit the
> content.


.... except if it is overflow:visible: that's the particular bug in IE.

This means you can set the height property and it will act as
> min-height. Just don't set overflow and you should be fine.
>


He could declare

#quote-container
{
background-color: #ffefd5;
padding: 0.25em 4em 1.5em 4em;
height:10em;
overflow:visible;
/* in IE 6, containing box will stretch in case content overflows */
}

body>div#quote-container
{
min-height:10em;
}

Not tested but it should work.

> * html div#content { height:10em; } /* min-height for IE */
>
> Should work. AFAIK, this particular syntax only works in IE so other
> browsers should ignore the rule.
> <URL:http://centricle.com/ref/css/filters/tests/star_html/>
>



DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Need a 40 LOC (ignoring comments) to be shorter -- suggestions wanted RichardOnRails Ruby 11 09-07-2008 01:20 AM
Firefox ignoring CSS color on first view alice HTML 18 08-11-2007 12:16 AM
IE6 ignoring "height" CSS attribute? Oliver Wong HTML 3 06-05-2007 01:26 PM
css background-color print workaround slyi Javascript 1 03-31-2006 08:50 PM
need workaround for IE transparency problems Danny Anderson HTML 17 04-20-2004 09:56 PM



Advertisments