[thelist] CSS Width Issue

VOLKAN ÖZÇELİK volkan.ozcelik at gmail.com
Mon Jul 11 09:53:08 CDT 2005


Is the doctype strict or transitional?

If transitional; IE will switch to quirksmode and this may cause
non-standard rendering of the box model.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

There is a good article on which doctype to use in "a list apart".
It's quite possible that there are articles concerning the issue on
other places (including evolt)

HTH,
Volkan.

On 7/11/05, Drew Shiel <ashiel at sportsinteraction.com> wrote:
> 
> Hi folks;
> 
> I'm having an interesting CSS issue here in Internet Explorer 6 - not
> showing in Firefox or Opera.
> 
> Extracts from my code:
> 
> HTML:
> 
> <div id="container">
>     <div id="info"></div>
>     <div id="content"></div>
> </div>
> 
> CSS:
> 
> #container {
>        width: 778px;
>        position: absolute;
>        left: 50%;
>        margin-left: -375px;
>        border-left: 1px solid #382A7E;
>        border-right: 1px solid #382A7E;
> }
> #info {
>        width: 211px;
>        float: right;
> }
> #content {
>        width: 566px;
>        border-right: 1px solid #382A7E;
> }
> 
> 
> Now, what's happening in IE is that the info div is too wide, and is
> pushing the content div down the page. Reducing the width of the info div
> by 3 pixels to 208 makes it narrow enough, but this isn't ideal - I need
> every pixel of that 211.
> 
> My first conclusion on some research was that this is a manifestation of
> IE's box-model problems, wherein it puts borders inside the total width,
> not outside, so that IE would only see 776 pixels to work with #container.
> However, widening #container by 2px to give it the "full" 778 didn't work -
> and leaves some ugly gaps in Firefox and Opera.
> 
> The 3-pixel difference does lead to to think that it might be something to
> do with the borders, though...
> 
> Anyone able to explain to me what's happening here?
> 
> Drew.
> 
> --
> 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>


More information about the thelist mailing list