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

re: max-width: and IE

Jeremy Collins wrote:
[color=blue]
> 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?[/color]

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 -

re: max-width: and IE

Els wrote:
[color=blue]
> Jeremy Collins wrote:
>[color=green]
>> li {
>> max-width: 42em;
>> margin: .5em 0 .5em 0;
>> }
>>
>> However IE seems to stick its middle finger up at this and
>> ignore it.[/color][/color]
[color=blue]
> 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...[/color]

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

re: max-width: and IE

Jeremy Collins wrote:
[color=blue]
> Els wrote:
>[color=green]
>> Jeremy Collins wrote:
>>[color=darkred]
>>> li {
>>> max-width: 42em;
>>> margin: .5em 0 .5em 0;
>>> }
>>>
>>> However IE seems to stick its middle finger up at this and
>>> ignore it.[/color][/color]
>[color=green]
>> 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...[/color]
>
>
> 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...[/color]

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 -

re: max-width: and IE

Els wrote:
[color=blue]
> Jeremy Collins wrote:
>[color=green]
>> 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...[/color]
>
> 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...[/color]

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 -

re: max-width: and IE

Els wrote:
[color=blue]
> Els wrote:
>[color=green]
>> Jeremy Collins wrote:[/color][/color]
[color=blue][color=green][color=darkred]
>>> margin-right: 10%;
>>>
>>> 10% of what? The screen? The containing <DIV>? It's hard to tell
>>> by looking at it...[/color]
>>
>>
>> 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...[/color]
>
>
> 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.[/color]

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

re: max-width: and IE

Jeremy Collins wrote:
[color=blue]
> Els wrote:
>[color=green]
>> Els wrote:
>>[color=darkred]
>>> Jeremy Collins wrote:[/color][/color]
>[color=green][color=darkred]
>>>> 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...[/color]
>>
>> 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.[/color]
>
> 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).[/color]

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)
[color=blue]
> Bah. Anyway, thanks for the help.[/color]

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 -

re: max-width: and IE

Jeremy Collins wrote:[color=blue]
> Is there anything else I can do?[/color]

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: daveholloway@spamcop.net, YAHOO: daveholloway@yahoo.com, ICQ: 104452444

re: max-width: and IE

Little Dave wrote:
[color=blue]
> done this once.. so I hope it works for your too..
>[/color]

Typo: "you"

Little Dave

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