Stylesheets - CSS positioning div wrapping

Author

CSS positioning div wrapping

DKode

2004-06-15, 7:16 pm

Ok,

I signed up for a blogger.com account today and when I went to edit
the template design I noticed it is written in pure CSS. At the sight
of this I danced for joy, as I am currently writing a dotnet asp
application that will use css positioning for the content.

I picked apart all of the templates at blogger.com and understand what
they were doing with all of the CSS code. There was only one part that
I did not quite understand...

In most of the templates they were double wrapping tags for any
content areas. example:

css:

#sidebar {
background:#cdb url("http://www.blogblog.com/no897/corner_sidebar.gif")
no-repeat left top;
width:254px;
float:right;
padding:0;
color:#356;
}
#sidebar2 {
margin:0;
padding:2px 20px 10px;
}

Then in the html they have:


<div id="sidebar"><div id="sidebar2">

Same with #main & #main2.

Why are they putting half of the tag in one div and the other half in
another and in the html they always appear one right after the other?
Couldn't they just combine both css into one id and then that would
eliminate the second "wrapped" css id?

Steve Pugh

2004-06-15, 7:16 pm

dkode@cfl.rr.com (DKode) wrote:

>I picked apart all of the templates at blogger.com and understand what
>they were doing with all of the CSS code. There was only one part that
>I did not quite understand...
>
>In most of the templates they were double wrapping tags for any
>content areas. example:
>
>#sidebar {
> width:254px;
> }
>#sidebar2 {
> padding:2px 20px 10px;
>}
>
>Then in the html they have:
>
>
><div id="sidebar"><div id="sidebar2">
>
>Why are they putting half of the tag in one div and the other half in
>another and in the html they always appear one right after the other?
>Couldn't they just combine both css into one id and then that would
>eliminate the second "wrapped" css id?

It's a workaround for the IE box model bug. In IE4-5.5 (and 6 if you
trigger Quirks mode) the padding is included in the width. In the CSS
specs and hence in most other browsers (and IE6 if you trigger
Standards mode) the padding is in addition to the width. Hence by
setting width and padding on different elements you get the same
presentation in both sets of browsers. There are other solutions to
the same problem but if you don't mind adding <div> soup to your pages
this one is both safe and simple.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

DKode

2004-06-16, 12:15 pm

Thank you!

This explains everything for me.

Is there anywhere I can look up various IE css bugs and solutions to
them? I plan on deploying a rather large (1000 users) application
developed in ASP.NET with all pages being CSS positioned and I want to
make sure I address most of the major bugs in IE 6.

Thanks again!

Steve Pugh <steve@pugh.net> wrote in message news:<p3nuc0ph5guks4rsmf2qjcv9auneqtocpj@4ax.com>...
> dkode@cfl.rr.com (DKode) wrote:
>
>
> It's a workaround for the IE box model bug. In IE4-5.5 (and 6 if you
> trigger Quirks mode) the padding is included in the width. In the CSS
> specs and hence in most other browsers (and IE6 if you trigger
> Standards mode) the padding is in addition to the width. Hence by
> setting width and padding on different elements you get the same
> presentation in both sets of browsers. There are other solutions to
> the same problem but if you don't mind adding <div> soup to your pages
> this one is both safe and simple.
>
> Steve

BenOne©

2004-06-17, 4:19 am

DKode wrote:
> Thank you!
>
> This explains everything for me.
>
> Is there anywhere I can look up various IE css bugs and solutions to
> them? I plan on deploying a rather large (1000 users) application
> developed in ASP.NET with all pages being CSS positioned and I want to
> make sure I address most of the major bugs in IE 6.

Check out this site:
http://www.positioniseverything.net/ie-primer.html

--
--
Ben Thomas - Software Engineer - Melbourne, Australia

This message and any attachments is/are intended for the person/s
to whom it was addressed. It may contain privileged or confidential
information. If you have received this message in error, please notify
the sender promptly and destroy the message without copying it or
divulging its contents to any person.

Opinions, conclusions, and other information in this message that do not
relate to the official business of my firm shall be understood as neither
given nor endorsed by it.