By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,081 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

max-width: and IE

P: n/a
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
Share this Question
Share on Google+
8 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.