MSIE spacing woes and DIV width & height minimums

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

S - 25 Oct 2005 14:36 GMT

Whew!

Thanks for your help on that last post. I actually understand what you
wrote. I'm trying not to use these groups as a way to get my code written
for me, I really want to understand what I'm doing wrong (and right!) so
your explanations have been very helpful. I really appreciate them.

My last problems involve DIV sizing and MSIE Win spacing issues.

I have several DIVs on my page that need to be a minimum width and height.
My body DIV needs to be a minimum width so that the browser window resizing
does not eliminate it when the user resizes it to be to narrow. I also need
a minimum height for my nav DIV so that the background image shows up
without having to fill it with <br> tags.

Is there a way to set a minimum width and/or height for a DIV?

Also, my page looks (more or less) fine in Firefox Mac/Win, and Safari.
MSIE 6 Windows places a lot of extra space between the breadcrumb bar and
the nav. I don't understand why. I'm pretty sure my CSS is not allowing for
this, but it appears anyway.

http://www.dorseygraphics.com/review/fishbowlsun/adextranet/pagetemplate/

http://www.dorseygraphics.com/review/fishbowlsun/adextranet/pagetemplate/css
/styles.css

Is MSIE just the worst browser to code for? Or is everyone else doing
something wrong? It seems that MSIE adds space and other crap like that to
every page I code! Why would they do things differently?

Thanks,

-----------------S

Reply to this Message

Spartanicus - 25 Oct 2005 15:55 GMT

> Is there a way to set a minimum width and/or height for a DIV?

Duh: min-height:350px

min-height is not supported by IE, to get around that you could use IEs
broken overflow behaviour by specifying a fixed height "height:350px",
IE will expand that as needed. You then set the height back to "auto"
for proper browsers and hide that rule from IE using your preferred
"hide CSS from IE" method.

Signature

Spartanicus

Reply to this Message

yb - 25 Oct 2005 16:18 GMT

There are 'min-width', 'max-width', but they don't work at all on IE,
including IE6. They should in most other browsers, except Safari also
breaks when the item with min-width/max-width is positioned. I'm not
sure about min-height and max-height, I've never used them.

See : http://www.svendtofte.com/code/max_width_in_ie/

The solution should work for IE. However, the CSS will not validate,
although that shouldn't cause any usability problem since CSS parser
(other than IE here) will ignore what it doesn't understand.

I didn't use the solution myself since I also needed it to work in
Safari, with a positioned item. I used the window.onresize event
handler in Safari to detect the width and set it dynamically. Since I
wrote it for Safari, I used it in IE as well, with some minor changes.

I can post / send the code as a starting point, but be warned that its
not trivial, and there may be better solutions that don't require
javascript and browser detection. I recall that someone had a CSS only
workaround, might be better to google search on min-width min-height
workarounds and see whats available before opting for javascript
solution. I used it since my users were guaranteed to have javascript
browser and I didn't have to introduce any extra html or css.

Reply to this Message

Gus Richter - 26 Oct 2005 03:39 GMT

> there may be better solutions that don't require
> javascript and browser detection. I recall that someone had a CSS only
> workaround, might be better to google search on min-width min-height
> workarounds and see whats available before opting for javascript
> solution.

http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/

Signature

Gus

Reply to this Message

Stephen Poley - 26 Oct 2005 19:18 GMT

>There are 'min-width', 'max-width', but they don't work at all on IE,
>including IE6. They should in most other browsers, except Safari also
[quoted text clipped - 6 lines]
>although that shouldn't cause any usability problem since CSS parser
>(other than IE here) will ignore what it doesn't understand.

You can slightly improve on that by putting the IE pseudo-CSS in a
separate file and including it within an IE conditional comment.

Signature

Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Reply to this Message

S - 26 Oct 2005 21:11 GMT

That's pretty much ow I solved the problem.

<style type="text/css" media="screen">

</style>



This refers MSIE Win to a separate CSS doc. Solves the problem, if only in a
dirty way.

Thanks,

----------------S

On 10/26/05 11:18 AM, in article 7thvl15hc8tpom8g4dv612m170io8fl0ro@4ax.com,

>> There are 'min-width', 'max-width', but they don't work at all on IE,
>> including IE6. They should in most other browsers, except Safari also
[quoted text clipped - 9 lines]
> You can slightly improve on that by putting the IE pseudo-CSS in a
> separate file and including it within an IE conditional comment.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2005

MSIE spacing woes and DIV width & height minimums