Scot,

On 8/11/05, Scot Schlinger <[EMAIL PROTECTED]> wrote:

> I am trying my hand at reproducing a page done in table with css only
> for more practice (practice makes perfect?).  I have a list that needs
> to span the whole page (liquid) with margin 1em for left and right.  I
> would like for each li to have the same width, and if possible,
> min-width of 750px (but I believe ie has a problem with this and can't
> remember the work around) so when the user collapses the page the list
> items will not go to more than one (if possible).  It looks and behaves
> differently in ff and ie 6.x for windows xp (no surprise).  I believe I
> have to somehow hack ie since it has trouble with the box model in terms
> of margin, border, padding, and the width of the box????
> 
> My attempt: http://www.rell.com/test/rell/index.html

In reverse order...
1.  box model hacking is needed for ie5 and ie6 only if you are in quirks mode.
2.  Add min-width: 750px; to #menu.    You don't really need the
br.left, but since it is there you can add width: 750px; to it to make
ie/win pretend that it has min-width.
3.  when working with elements that should scale based on window
width, using percents is often useful.  like so...

#menuTop li, #menuBottom li {
        width: 19.2%;
        margin: 0 0.2%;
        padding: 0;
        border: 1px solid #fff;
        float: left;
        background-color: #000;
        font-weight: bold;
        text-align: center;
}

Each li will take up 19.6% + 2px of width.  You would probably tweak
it a bit further but i prefer to leave a little breathing room for
rounding errors and such.

hth

-- 
Roger

Roger Roelofs
Know what you value.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to