Stylesheets - MSIE spacing woes and DIV width & height minimums

Author

MSIE spacing woes and DIV width & height minimums

2005-10-25, 6:42 pm

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/revie...t/pagetemplate/

http://www.dorseygraphics.com/revie...agetemplate/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

Spartanicus

2005-10-25, 6:42 pm

S <junksolid@XXXXXXXXXX> wrote:

> 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.

--
Spartanicus

2005-10-25, 6:42 pm

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.

Gus Richter

2005-10-26, 3:26 am

yb wrote:
>
> 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/2...6/minheight_fi/

--
Gus

Stephen Poley

2005-10-26, 7:00 pm

On 25 Oct 2005 08:18:49 -0700, "yb" <bajwa_yasir@yahoo.ca> wrote:

>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.

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

--
Stephen Poley

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

2005-10-26, 7:00 pm

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,
"Stephen Poley" <sbpoleySpicedHamTrap@xs4all.nl> wrote:

> On 25 Oct 2005 08:18:49 -0700, "yb" <bajwa_yasir@yahoo.ca> wrote:
>
>
> You can slightly improve on that by putting the IE pseudo-CSS in a
> separate file and including it within an IE conditional comment.