Welcome to WebmasterWorld Guest from 54.166.112.74

Forum Moderators: not2easy

Message Too Old, No Replies

max-width in IE

what's the best way to limit line/page width in IE?

   
7:06 am on May 9, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



IE doesn't seem to support max-width... what ways of limiting line width do people recommend that work cross-browser? I have very simple fluid pages, I just want to limit line width so the text is more readable. (I've decided it's about time I CSSed my book reviews, should be pretty simple but this is a sticking point.)
7:10 am on May 9, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi danny,

One way, among many, would be just to set a margin on either the paragraphs, headings and lists themselves or on a containing div like this:


p,h1,h2,h3,ul,ol,dl {
margin-right: 50px;
}

div#bodycontainer {
margin-right: 50px;
}

Nick

12:08 pm on May 9, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Setting the margins doesn't work because I don't know how wide the page is... I want approximately ten words to a line (something like a normal book). 40em seems to be roughly right, at least with most fonts, but with small windows or displays (800 pixels or less) I need the whole screen, with only small margins, but with 1024 or larger the margins have to be bigger.
12:34 pm on May 9, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



So why not just center a 40em div and put your content in that?

div#content {
width: 40em;
margin: 0 auto;
}

5:49 pm on May 9, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Will the width be different depending on screen resolution?

If so, something like this would work:

<!--[if IE]>
<style type="text/css">
#mydiv {
width: expression((document.all?document.body.clientWidth:window.innerWidth)>800?"234px":((document.all?document.body.clientWidth:window.innerWidth)>1024)?"345px":"123px");
}
</style>
<![endif]-->

Just replace the pixel values with whatever works.
123px = default (up to 800600 resolution)
234px = more than 800600, but less than 1024768
345px = anything above 1024768

2:33 am on May 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



grahamstewart: Doh! That works fine.

Now I just need to work out how to fix things in NN4. I need to align a column of text in the middle of the page, but while keeping it left-aligned... At the moment the page looks better in Netscape 3 (with no CSS) than in Netscape 4 :-)