467,074 Members | 938 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,074 developers. It's quick & easy.

max-width: and IE

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
  • viewed: 2498
Share:
8 Replies
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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #2
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 vo. 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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #5
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 vo. O resto imperfeito.
- Renato Russo -

Jul 20 '05 #7
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 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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Steven Bethard | last post: by
8 posts views Thread by charles.amith@gmail.com | last post: by
61 posts views Thread by norb1@yahoo.com | last post: by
54 posts views Thread by bearophileHUGS@lycos.com | last post: by
reply views Thread by hong.niu4 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.