Bug or Not?

Hmmm, I forget how the box model is supposed to do things in CSS, but this seems a little off to me.  What I had was a div tag with a width of 500px.  Within that I have a nested div with a margin of 25px.  I WAS trying to avoid having to do a box model hack to make sure things look OK in IE 5.x. 

So everything is hunky dory until I take this layout and put it into a masterpage in VS2005.  I drop the ContentPlaceHolder and suddenly my 500px div is 550px large.  It seems VS2005 is trying to figure out how wide to make the ContentPlaceHolder "container," and forgetting about the margins (or padding (or borders)).  This also happens when you have a panel or anything else set to a width of 100%.  So it is just pushing it wider.  And since I'm using floats to do the layout, in VS2005 it is pushing my sidebar down because it is too wide to fit into the container.  IE 6.0 and Firefox seem to be getting this "right," but honestly I'm not too sure when Firefox is immulating bugs in IE or when IE is in compliance mode anymore.

I'm leaning towards bug.  If anyone is curious, here's the fancy code that is screwing stuff up:

        <div style="width: 500px">
            <div style="padding: 25px; background-color: Orange; border: solid 1px black">
                <asp:Panel runat="server" ID="test" style="width:100%">
                    jyeretjetjetj</asp:Panel>
            </div>
        </div>
        <div style="width: 500px; border: solid 1px black">
            another 500px div
        </div>

Take out the panel and just put normal text (or even just a div with width=100%) and it displays fine.

So, bug or not?

2 Comments

  • Hey,

    Just scanning your post, and css isn't in the front of my mind at the moment, but... the total width of a block element in css is the width of only the content area - NOT including the border and padding. InternetExplorer however incorrectly treats width as being the total width of the border + padding + content. (You can make ie6 work correctly by setting the Doctype to strict.) So I think the width of your inner panel(div) should come out as 552px - so I don't think its a bug... using width of 100% is only really possible if you have 0px for padding and border.



    on a slightly stylistic note, I personally make a point of not having any inline style definitions, and moving them all into an external css file - it makes it much easier to alter the visual look at a later date.



    Hope this makes sense... its late :)

    Cheers

    i/Noodle

  • u asshole, how the hell did i get here? where the hell r the papa john coupons? damn its super bowl sunday....u goddamn nerfherder....

Comments have been disabled for this content.