max-width: and IE

Jeremy Collins

Hi all,

My site's content has a lot of bulleted lists, which seem
to get hard to read when the lines are too long. No problem,
I thought:

li {
max-width: 42em;
margin: .5em 0 .5em 0;
}
However IE seems to stick its middle finger up at this and
ignore it.

I don't want a margin or padding because it will waste space
on small screens.

Is there anything else I can do?

TIA,
--
jc

Remove the -not from email

Jul 20 '05 #1

Els

Jeremy Collins wrote:

Hi all,

My site's content has a lot of bulleted lists, which seem
to get hard to read when the lines are too long. No problem,
I thought:

li {
max-width: 42em;
margin: .5em 0 .5em 0;
}

However IE seems to stick its middle finger up at this and
ignore it.

I don't want a margin or padding because it will waste space
on small screens.

Is there anything else I can do?

Make content for the "margins" so no space is wasted, or
have the margins at 10%, which will waste less on smaller
screens, or have your content in two columns, or have a link
saying: "for wide windows" which will open an identical page
with margins...
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #2

Jeremy Collins

Els wrote:

Jeremy Collins wrote:

li {
max-width: 42em;
margin: .5em 0 .5em 0;
}

However IE seems to stick its middle finger up at this and
ignore it.

Make content for the "margins" so no space is wasted, or have the
margins at 10%, which will waste less on smaller screens, or have your
content in two columns, or have a link saying: "for wide windows" which
will open an identical page with margins...

I've already got additional content down the sides, but the
proportional margin is a good idea and works well, thanks.

But you've exposed a gap in my knowledge <g>:

li {
margin-right: 10%;
}

10% of what? The screen? The containing <DIV>? It's hard to tell
by looking at it...
--
jc

Remove the -not from email

Jul 20 '05 #3

Els

Jeremy Collins wrote:

Els wrote:

Jeremy Collins wrote:

li {
max-width: 42em;
margin: .5em 0 .5em 0;
}

However IE seems to stick its middle finger up at this and
ignore it.

Make content for the "margins" so no space is wasted, or have the
margins at 10%, which will waste less on smaller screens, or have your
content in two columns, or have a link saying: "for wide windows"
which will open an identical page with margins...

I've already got additional content down the sides, but the
proportional margin is a good idea and works well, thanks.

But you've exposed a gap in my knowledge <g>:

li {
margin-right: 10%;
}

10% of what? The screen? The containing <DIV>? It's hard to tell
by looking at it...

Parent element.
In the case of margins next to the containing div: the body.
Set it to 50% and it will be easy to tell by looking at it...

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #4

Els

Els wrote:

Jeremy Collins wrote:

But you've exposed a gap in my knowledge <g>:

li {
margin-right: 10%;
}

10% of what? The screen? The containing <DIV>? It's hard to tell
by looking at it...

Parent element.
In the case of margins next to the containing div: the body.
Set it to 50% and it will be easy to tell by looking at it...

Having said that, I do remember something about IE having a
different behaviour in some cases. Like when you set a div
to be 100% wide, it will act as if it's 100% of the body,
instead of the parent element. Not sure exactly though.
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #5

Jeremy Collins

Els wrote:

Els wrote:

Jeremy Collins wrote:

margin-right: 10%;

10% of what? The screen? The containing <DIV>? It's hard to tell
by looking at it...

Parent element.
In the case of margins next to the containing div: the body.
Set it to 50% and it will be easy to tell by looking at it...

Having said that, I do remember something about IE having a different
behaviour in some cases. Like when you set a div to be 100% wide, it
will act as if it's 100% of the body, instead of the parent element. Not
sure exactly though.

With li { margin-right: 50%; } Mozilla and Opera draw the text to
about half way across the containing DIV, correctly, as you say.

IE renders the li to about 25% of the containing DIV! (In a
3-column layout).

Bah. Anyway, thanks for the help.

--
jc

Remove the -not from email

Jul 20 '05 #6

Els

Jeremy Collins wrote:

Els wrote:

Els wrote:

Jeremy Collins wrote: margin-right: 10%;

10% of what? The screen? The containing <DIV>? It's hard to tell
by looking at it...

Parent element.
In the case of margins next to the containing div: the body.
Set it to 50% and it will be easy to tell by looking at it...
Having said that, I do remember something about IE having a different
behaviour in some cases. Like when you set a div to be 100% wide, it
will act as if it's 100% of the body, instead of the parent element.
Not sure exactly though.

With li { margin-right: 50%; } Mozilla and Opera draw the text to
about half way across the containing DIV, correctly, as you say.

IE renders the li to about 25% of the containing DIV! (In a
3-column layout).

So my guess is that the containing DIV is eh.... well,
anyway, 75% of the containing DIV equals 50% of the body?
(I used to be better at calculations)
Bah. Anyway, thanks for the help.

Must be a way around it, I'd say?
Some IE hack to give different percentages to IE?
http://centricle.com/ref/css/filters/

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #7

Little Dave

Jeremy Collins wrote:

Is there anything else I can do?

Another solution would be to use the method described here:

http://www.pixy.cz/blogg/clanky/css-minheight-hack.html

...and modify it to use width instead of height... I have successfully
done this once.. so I hope it works for your too..

Little Dave
--
http://www.daveholloway.co.uk
Everyone feel free to add me to your instant messengers:
MSN: da**********@spamcop.net, YAHOO: da**********@yahoo.com, ICQ: 104452444

Jul 20 '05 #8

Little Dave

Little Dave wrote:

done this once.. so I hope it works for your too..

Typo: "you"

Little Dave

--
http://www.daveholloway.co.uk
Everyone feel free to add me to your instant messengers:
MSN: da**********@spamcop.net, YAHOO: da**********@yahoo.com, ICQ: 104452444

Jul 20 '05 #9