problem with my DIV-based box model

**B McDonald** · Jul 20 '05, 08:12 PM

Re: problem with my DIV-based box model

One more thing -

I just viewed the link (http://galtsvalley.com/newindex.html) on my Win XP
machine under IE 6. I see that I have other issues here. Suffice it to say
that my page renders as I expect it to on my Win 2000 machine under IE 5.5.
If anyone has any pointers on how to make my CSS IE 5.5 and IE 6 compatible,
please share!

Brian

**B McDonald** · Jul 20 '05, 08:13 PM

Re: problem with my DIV-based box model

After hacking around a little bit more I've made some progress. The flow
problem was apparently due to setting the position property of
..col-container (within <div id="LeadContent Sect">) to 'absolute'. I changed
this to 'relative' and got the desired result.

Getting the contents of the two columns to render properly side-by-side was
a bit trickier. First, I noticed (see link in my OP - i.e.,
http://galtsvalley.com/newindex.html) that as I changed the window width in
IE 5.5 the column 2 contents would "flip" up and down - from rendering
properly side-by-side with the column 1 contents to rendering side-by-side
but "after" the contents in column 1. (Please see link if this description
requires a visual!) The same thing was happening in IE 6. It now seems that
the 'width' percentages were causing problems. When I had the width Col1 and
Col2 set to 50% each this problem occurred. But when I dropped the width of
Col2 to 48% the problem went away. At least in IE 5.5. The problem persists
in IE 6.

I don't perfectly understand what I did that fixed the problem in IE 5.5. or
why the problem persists in IE 6. Any ideas on either count?

To see the new results please go here:

http://galtsvalley.com/newindex2.html (using newdefault2.css )

[Again the original link was http://galtsvalley.com/newindex.html using
newdefault.css]

The new style is copied below for the relevant divs.

TIA,

Brian

---

#LeadContentSec t {
position: relative;
width: 100%;
height: 100%;
background-color: none;
padding: 0px 5px 0px 7px;
margin-top: 0px;
margin-bottom: 0px;
border-top: 10px solid #999966;
border-left: 1px solid #999966;
border-right: 1px solid #999966;
border-bottom: 2px solid #999966;
}

..col-container {
position: relative;
width: 100%;
height: auto;
top: auto; left: 0; right: 0; bottom: auto;
background-color: none;
margin-left: 50px;
margin-right: 100px;
}
..col-container .Col1 {
float: left;
width: 50%;
height: auto;
padding-left: 50px;
background-color: none;
}
..col-container .Col2 {
float: right;
width: 48%;
height: auto;
background-color: none;
}

[color=blue]
> ---
>
> /* MidSection Style */
>
> #MidSection {
> position: absolute;
> width: 100%;
> height: 100%;
> top: 160px; left: 0; bottom: auto;
> background-color: #ffc;
> padding: 0px 0px 0px 10px;
> margin: 0;
> }
> #MidCol-1 {
> float: left;
> width: 68%;
> height: auto;
> top: 0; left: 0; bottom: auto;
> border-bottom: 10px solid black;
> margin-top: 40px;
> margin-bottom: 40px;
> padding-bottom: 40px;
> }
> #MidCol-2 {
> float: right;
> width: 30%;
> height: auto;
> top: 0; right: 0; left: 70%; bottom: auto;
> font-size: 11px;
> line-height: 13px;
> color: #000000;
> background-color: #cc0;
> border-left: 2px dotted #000000;
> border-bottom: 3px solid #444444;
> min-width: 155px;
> margin: 0px 0px 0px 0px;
> padding: 10px 10px 10px 10px;
> }
>
> #LeadContentSec t {
> position: relative;
> width: 100%;
> height: 100%;
> background-color: none;
> padding: 0px 5px 0px 7px;
> margin-top: 0px;
> margin-bottom: 0px;
> border-top: 10px solid #999966;
> border-left: 1px solid #999966;
> border-right: 1px solid #999966;
> border-bottom: 2px solid #999966;
> }
> .col-container {
> position: absolute;
> width: 100%;
> height: auto;
> top: auto; left: 0; right: 0; bottom: auto;
> background-color: red;
> }
> .col-container .Col1 {
> float: left;
> width: 50%;
> height: auto;
> top: 0; left: 0; right: auto; bottom: auto;
> background-color: blue;
> }
> .col-container .Col2 {
> float: right;
> width: 50%;
> height: auto;
> top: 0; left: 50%; right: auto; bottom: auto;
> background-color: yellow;
> }
>
>
>[/color]

**Anne Marie Denley** · Jul 20 '05, 08:13 PM

Re: problem with my DIV-based box model

"B McDonald" <no@spam.com> wrote in message
news:MZ85b.4047 $0R2.3614@newss vr31.news.prodi gy.com...[color=blue]
> After hacking around a little bit more I've made some progress. The flow
> problem was apparently due to setting the position property of
> .col-container (within <div id="LeadContent Sect">) to 'absolute'. I[/color]
changed[color=blue]
> this to 'relative' and got the desired result.
>
> Getting the contents of the two columns to render properly side-by-side[/color]
was[color=blue]
> a bit trickier. First, I noticed (see link in my OP - i.e.,
> http://galtsvalley.com/newindex.html) that as I changed the window width[/color]
in[color=blue]
> IE 5.5 the column 2 contents would "flip" up and down - from rendering
> properly side-by-side with the column 1 contents to rendering side-by-side
> but "after" the contents in column 1. (Please see link if this description
> requires a visual!) The same thing was happening in IE 6. It now seems[/color]
that[color=blue]
> the 'width' percentages were causing problems. When I had the width Col1[/color]
and[color=blue]
> Col2 set to 50% each this problem occurred. But when I dropped the width[/color]
of[color=blue]
> Col2 to 48% the problem went away. At least in IE 5.5. The problem[/color]
persists[color=blue]
> in IE 6.
>
> I don't perfectly understand what I did that fixed the problem in IE 5.5.[/color]
or[color=blue]
> why the problem persists in IE 6. Any ideas on either count?[/color]

I think the problem is that you have specified width of the divs as well as
padding,
borders and margins and because your DOCTYPE is setting IE6 to standard mode
as
opposed to quirks mode (quirks mode is the same as earlier versions of IE.)

I'm not sure about IE5.5 but IE5 gets the box model wrong. According to the
CSS
specifications the total width of an item should be the width + padding +
border + margin.
IE5 sets the total width of an item = width and includes padding, border
and margins within it.

There is a box model hack (Tantek's hack) which allows you to set the
correct dimensions for Netscape, Opera, Mozilla
and IE6 standard mode and the width that IE5 will need as well. You can
find out more information about this
at http://www.tantek.com/CSS/Examples/boxmodelhack.html

As long as you don't specify width as wells as padding, border or margins
then you should't have a problem so you could start by removing the
width:100% property on your divs and see if that helps.

AM
[color=blue]
>
> To see the new results please go here:
>
> http://galtsvalley.com/newindex2.html (using newdefault2.css )
>
> [Again the original link was http://galtsvalley.com/newindex.html using
> newdefault.css]
>
> The new style is copied below for the relevant divs.
>
> TIA,
>
> Brian
>
> ---
>
>
> #LeadContentSec t {
> position: relative;
> width: 100%;
> height: 100%;
> background-color: none;
> padding: 0px 5px 0px 7px;
> margin-top: 0px;
> margin-bottom: 0px;
> border-top: 10px solid #999966;
> border-left: 1px solid #999966;
> border-right: 1px solid #999966;
> border-bottom: 2px solid #999966;
> }
>
> .col-container {
> position: relative;
> width: 100%;
> height: auto;
> top: auto; left: 0; right: 0; bottom: auto;
> background-color: none;
> margin-left: 50px;
> margin-right: 100px;
> }
> .col-container .Col1 {
> float: left;
> width: 50%;
> height: auto;
> padding-left: 50px;
> background-color: none;
> }
> .col-container .Col2 {
> float: right;
> width: 48%;
> height: auto;
> background-color: none;
> }
>
>
>[color=green]
> > ---
> >
> > /* MidSection Style */
> >
> > #MidSection {
> > position: absolute;
> > width: 100%;
> > height: 100%;
> > top: 160px; left: 0; bottom: auto;
> > background-color: #ffc;
> > padding: 0px 0px 0px 10px;
> > margin: 0;
> > }
> > #MidCol-1 {
> > float: left;
> > width: 68%;
> > height: auto;
> > top: 0; left: 0; bottom: auto;
> > border-bottom: 10px solid black;
> > margin-top: 40px;
> > margin-bottom: 40px;
> > padding-bottom: 40px;
> > }
> > #MidCol-2 {
> > float: right;
> > width: 30%;
> > height: auto;
> > top: 0; right: 0; left: 70%; bottom: auto;
> > font-size: 11px;
> > line-height: 13px;
> > color: #000000;
> > background-color: #cc0;
> > border-left: 2px dotted #000000;
> > border-bottom: 3px solid #444444;
> > min-width: 155px;
> > margin: 0px 0px 0px 0px;
> > padding: 10px 10px 10px 10px;
> > }
> >
> > #LeadContentSec t {
> > position: relative;
> > width: 100%;
> > height: 100%;
> > background-color: none;
> > padding: 0px 5px 0px 7px;
> > margin-top: 0px;
> > margin-bottom: 0px;
> > border-top: 10px solid #999966;
> > border-left: 1px solid #999966;
> > border-right: 1px solid #999966;
> > border-bottom: 2px solid #999966;
> > }
> > .col-container {
> > position: absolute;
> > width: 100%;
> > height: auto;
> > top: auto; left: 0; right: 0; bottom: auto;
> > background-color: red;
> > }
> > .col-container .Col1 {
> > float: left;
> > width: 50%;
> > height: auto;
> > top: 0; left: 0; right: auto; bottom: auto;
> > background-color: blue;
> > }
> > .col-container .Col2 {
> > float: right;
> > width: 50%;
> > height: auto;
> > top: 0; left: 50%; right: auto; bottom: auto;
> > background-color: yellow;
> > }
> >
> >
> >[/color]
>
>[/color]

**B McDonald** · Jul 20 '05, 08:13 PM

Re: problem with my DIV-based box model

"Anne Marie Denley" <> wrote in message
news:1062616906 .879794@ananke. eclipse.net.uk. ..[color=blue]
>
> I think the problem is that you have specified width of the divs as well[/color]
as padding,[color=blue]
> borders and margins and because your DOCTYPE is setting IE6 to standard[/color]
mode[color=blue]
> as opposed to quirks mode (quirks mode is the same as earlier versions of[/color]
IE.)[color=blue]
>
> I'm not sure about IE5.5 but IE5 gets the box model wrong. According to[/color]
the[color=blue]
> CSS specifications the total width of an item should be the width +[/color]
padding +[color=blue]
> border + margin. IE5 sets the total width of an item = width and includes[/color]
padding, border[color=blue]
> and margins within it.
>
> There is a box model hack (Tantek's hack) which allows you to set the
> correct dimensions for Netscape, Opera, Mozilla
> and IE6 standard mode and the width that IE5 will need as well. You can
> find out more information about this
> at http://www.tantek.com/CSS/Examples/boxmodelhack.html
>
> As long as you don't specify width as wells as padding, border or margins
> then you should't have a problem so you could start by removing the
> width:100% property on your divs and see if that helps.
>
> AM[/color]

Thanks Anne Marie - for taking the time to penetrate my post.

I made a bunch of changes to my CSS and some to my XHTML as well. The CSS is
def. more correct - for the page header at least. I've not resolved the
style problems with the content section of the website yet. I'll start that
tomorrow.

Would you mind checking out the result? The link is the same:
[color=blue][color=green]
> > http://galtsvalley.com/newindex2.html (using newdefault2.css )[/color][/color]

I did take out a bunch of the 'width=100%;' properties from the major div
elements. In my post under the heading "why doesn't my com name display?"
you can find my elaboration on what I did to get my company name to display.

How's it look under IE 5 now?

Brian

**B McDonald** · Jul 20 '05, 08:14 PM

Re: problem with my DIV-based box model

"Anne Marie Denley" <am@denley.ecli pse.co.uk> wrote in message
news:1062659946 .281315@ananke. eclipse.net.uk. ..[color=blue]
>
> I was actually looking at your site in IE6. I was just explaining if[/color]
you've[color=blue]
> been coding
> the widths and heights for IE5.5 (which I think treats them the same as[/color]
IE5)[color=blue]
> then you
> have been coding them incorrectly (as per the CSS specifcation) because
> total width of an item
> = specified width + padding + border + margin.
>
> Also I've had a look at your site in Opera 7.11 & Mozilla 1.4 and it seems
> to be
> badly broken, especially in Opera. Have you looked at your site in any
> other
> browsers? It is quite a simple process to download Netscape, Opera,
> Mozilla,
> Lynx to be able to check your site in various browsers.
>
> I've noticed that you are also using % and px. This makes it more[/color]
difficult[color=blue]
> to
> work out your widths because you cannot add % and px together.
>[/color]

Thanks again. I hardly have time to explain myself - I'm out the door.
However, I've taken your advice and have gotten rid of many of the 'px'
measurements. I'm not through yet - but thinking about the box model in the
way you implied helped me to get more normal rendering. I've tested in IE
5.5, IE 6 and Opera 5. IE 5.5's rendering is no longer "perfect".. . or
rather, looking as I intend. But the discombobulatio n is much less than
before in the more standards compliant browsers. How does it look on your
end? Here's the new link:

http://galtsvalley.com/newindex3.html

Brian

**B McDonald** · Jul 20 '05, 08:16 PM

Re: problem with my DIV-based box model

> Here's the link for the test page: http://galtsvalley.com/newindex7.html[color=blue]
> Here's the link for the page CSS:
> http://galtsvalley.com/css/newdefault7.css.txt[/color]

I'm still (regretably) stuck on this - does anyone see my post??
newindex7.css renders similarly on MSIE5.5, MSIE6, Opera 7.1. But not on
NS7.1. Any ideas on what's wrong?

Brian

problem with my DIV-based box model

problem with my DIV-based box model

Comment

Comment

Comment

Comment

Comment

Comment