Firefox div issues

Hi,

Here are the basics:

2 divs to display 2 header parts - one to the left and one to the right -
all is well
Below the header are 3 divs - one on the left for sales info, one in the
middle for company info, and one on the left for navigation.

I have it working beautifully in IE, so that the center div is fluid around
the right div. The top positioning is perfect below the header. But in
Firefox, the center div wants to move up to the top of the page and in
between the 2 header divs. By adding a top margin, Firefox will finally
position it below the headers. But IE adds the margin, too - which places
the center div way below the headers.

I tried using body>#divid {margin: 200px;} trick, from the CSS Anthology
book, which is supposed to make IE blind to it, but Firefox apparently
doesn't see it either. Here are the essential divs:

Headers:
#banner {
margin-bottom: 20px;
}

#banner h1 {
background: transparent url(bw.gif) no-repeat top left;
margin-top: 10px;
width: 313px;
height: 130px;
float: left;
}

#banner h2 {
background: transparent url(cld.gif) no-repeat top right;
margin-top: 58px;
margin-bottom: 40px;
margin-left: 60px;
width: 208px;
height: 28px;
float: right;
}

info divs:

Left:
#shopInfo {
clear:left;
margin: 20px 20px 20px 5px;
width: 160px;
float: left;
}

Middle (the problem child):
#designInfo {
padding: 10px 10px 20px 20px;
}

right:
#nav {
width: 160px;
float: right;
padding: 10px 10px 20px 20px;
}

I struggled to get this to work in IE until I discovered that the divs had
to be in a particular order on the html page. The left and right ones had
to come before the middle one. I've tried this both with a wrapper div that
defined margins and no margins in the body, and with only a body tag and
margins set in it.

I'm getting so confused - after you mess with something for a couple days
you tend to forget what you did to get where you are.

Any commentary is appreciated.

Christina

Christina wrote:
> Hi,
>
> Here are the basics:
>
> 2 divs to display 2 header parts - one to the left and one to the right -
> all is well
> Below the header are 3 divs - one on the left for sales info, one in the
> middle for company info, and one on the left for navigation.
>
> I have it working beautifully in IE, so that the center div is fluid around
> the right div. The top positioning is perfect below the header. But in
> Firefox, the center div wants to move up to the top of the page and in
> between the 2 header divs. By adding a top margin, Firefox will finally
> position it below the headers. But IE adds the margin, too - which places
> the center div way below the headers.
>
> I tried using body>#divid {margin: 200px;} trick, from the CSS Anthology
> book, which is supposed to make IE blind to it, but Firefox apparently
> doesn't see it either. Here are the essential divs:
>
> Headers:
> #banner {
> margin-bottom: 20px;
> }
>
> #banner h1 {
> background: transparent url(bw.gif) no-repeat top left;
> margin-top: 10px;
> width: 313px;
> height: 130px;
> float: left;
> }
>
> #banner h2 {
> background: transparent url(cld.gif) no-repeat top right;
> margin-top: 58px;
> margin-bottom: 40px;
> margin-left: 60px;
> width: 208px;
> height: 28px;
> float: right;
> }
>
> info divs:
>
> Left:
> #shopInfo {
> clear:left;
> margin: 20px 20px 20px 5px;
> width: 160px;
> float: left;
> }
>
> Middle (the problem child):
> #designInfo {
> padding: 10px 10px 20px 20px;
> }
>
> right:
> #nav {
> width: 160px;
> float: right;
> padding: 10px 10px 20px 20px;
> }
>
> I struggled to get this to work in IE until I discovered that the divs had
> to be in a particular order on the html page. The left and right ones had
> to come before the middle one. I've tried this both with a wrapper div that
> defined margins and no margins in the body, and with only a body tag and
> margins set in it.
> I'm getting so confused - after you mess with something for a couple days
> you tend to forget what you did to get where you are.
> Any commentary is appreciated.
> Christina

How about posting the relevant html to go along with that?

Did you try using a "clear div" after each 'row' of floated divs?

..clear{
clear: both;
}
<div class='clear'></div>

"Mike Scirocco" <mscir@yahoo.com> wrote in message
news:Rr6dndJdBqHIkqXYnZ2dnUVZ_s-dnZ2d@pghconnect.com...

>
> How about posting the relevant html to go along with that?
>
> Did you try using a "clear div" after each 'row' of floated divs?
>
> .clear{
> clear: both;
> }
> <div class='clear'></div>

Hi Mike,

Yes, I tried that, and it simply made it move below the surrounding divs. I
also tried clear:left; and clear:right; . It both cases would just move the
div below the banner section. Here's the basics of the html - really quite
simple:

<div id="content">
<div id="banner">
Header - placed at very top - 2 header tags, one floated left, 1
floated right
</div>
<div id="shopInfo">
Info on shopping and specials - this sits at the left below the
left-floated header tag. Width is static at 160px.
</div>

<div id="nav">
Navigation - this is a cascading menu that sits at the right below
the right-floated header tag. Width is static at 160px.
</div>

<div id="designInfo">
Info on designer and products - this is the one being rebellious.
It's a paragraph that is quite wordy. I want this to be fluid around the
nav menu. But when I widen the page, Firefox pulls it up between the two
headers to the top of the page, IE doesn't. If I set a large top margin on
it, FF obeys, but in IE it then drops way below the headers and is no longer
even with the top of the right and left divs.
</div>

<div id="designLines">
Specific info on each item- these are just a series of paragraphs.
</div>

<div id="footer" class="shrink">
text links to company details
</div>
</div>

I have tried it with and without the content div, moving the placement info
into the body tag, but that had no affect. Additionally, I have tried
setting max-width or min-width with no affect - this doesn't seem to work on
any of the tags (?). Setting the width property makes it lose the fluidity
I want.

Christina

Christina wrote:
> "Mike Scirocco" <mscir@yahoo.com> wrote in message
> news:Rr6dndJdBqHIkqXYnZ2dnUVZ_s-dnZ2d@pghconnect.com...
>
>> How about posting the relevant html to go along with that?
>>
>> Did you try using a "clear div" after each 'row' of floated divs?
>>
>> .clear{
>> clear: both;
>> }
>> <div class='clear'></div>
>
> Hi Mike,
>
> Yes, I tried that, and it simply made it move below the surrounding divs. I
> also tried clear:left; and clear:right; . It both cases would just move the
> div below the banner section. Here's the basics of the html - really quite
> simple:
>
> <div id="content">
> <div id="banner">
> Header - placed at very top - 2 header tags, one floated left, 1
> floated right
> </div>
> <div id="shopInfo">
> Info on shopping and specials - this sits at the left below the
> left-floated header tag. Width is static at 160px.
> </div>
>
> <div id="nav">
> Navigation - this is a cascading menu that sits at the right below
> the right-floated header tag. Width is static at 160px.
> </div>
>
> <div id="designInfo">
> Info on designer and products - this is the one being rebellious.
> It's a paragraph that is quite wordy. I want this to be fluid around the
> nav menu. But when I widen the page, Firefox pulls it up between the two
> headers to the top of the page, IE doesn't. If I set a large top margin on
> it, FF obeys, but in IE it then drops way below the headers and is no longer
> even with the top of the right and left divs.
> </div>
>
> <div id="designLines">
> Specific info on each item- these are just a series of paragraphs.
> </div>
>
> <div id="footer" class="shrink">
> text links to company details
> </div>
> </div>
>
> I have tried it with and without the content div, moving the placement info
> into the body tag, but that had no affect. Additionally, I have tried
> setting max-width or min-width with no affect - this doesn't seem to work on
> any of the tags (?). Setting the width property makes it lose the fluidity
> I want.
> Christina

Hi Christina,

How do you like these approaches?

http://www.pixy.cz/blogg/clanky/css-3col-layout/
http://glish.com/css/7.asp

There are a lot of 3 column CSS examples on this page too:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

It looks like you'll probably want to try implementing one of these.

Sound like a good place to look?
Mike

"Mike Scirocco" <mscir@yahoo.com> wrote in message
news:kbidnbNO8OnSUafYnZ2dnUVZ_rydnZ2d@pghconnect.c om...
>
> Hi Christina,
>
> How do you like these approaches?
>
> http://www.pixy.cz/blogg/clanky/css-3col-layout/
> http://glish.com/css/7.asp
>
> There are a lot of 3 column CSS examples on this page too:
>
> http://css-discuss.incutio.com/?page=ThreeColumnLayouts
>
> It looks like you'll probably want to try implementing one of these.
>
> Sound like a good place to look?
> Mike

Thanks, Mike. Now to just compare my css to theirs and see what I'm leaving
out (or putting too much of in). I got the basics of my 3 column layout
from the Sitepoint book by Rachel Andrew, The CSS Anthology. But I've also
looked into places such as csszengarden.com, etc. for inspiration and ideas.
I did find it interesting that the order of the divs in the html affected
the entire page - in all browsers. This is my first true full CSS layout -
I have worked with table layouts for so long and was under the impression
that CSS was going to be easy. Just package the section in a div tag and
place it where you want it on the page with CSS. Why can't it be just that
simple? It's only 3 columns, it's a web basic layout. The browser wars are
a bane to us all.

Christina

Christina wrote:
<snip>

Please include the banner h1 html and show where you're putting it in
the page.

Mike

Sorry, but that is very bad css. You are breaking some very basic design
rules. Most notably, you are using explicit tag designations and sizes.
Try changing your browsers font-size, and watch what happens. Now I would
suggest that you use a class designation to add your styles, since it's a
bad habbit to use id's to apply css. The whole idea is that the css can be
re-used, and you've kinda eliminated that possibility, not to nit-pic. In
answer to your question. I believe your trouble comes from not recognizing
the fact that every tag also has default css attached to it, and different
browsers handle these defaults differently. Without the html, it's hard to
say what exactly is happening, but I bet it's your margins. Try setting
margin: 0px, where you don't what your margins. I bet mozilla is adding
margins where you haven't put any. Anyhow, best of luck.

"Christina" <designer@centurytel.net> wrote in message
news:LPqdnee6H7Pha6rYnZ2dnUVZ_qydnZ2d@centurytel.n et...
> Hi,
>
> Here are the basics:
>
> 2 divs to display 2 header parts - one to the left and one to the right -
> all is well
> Below the header are 3 divs - one on the left for sales info, one in the
> middle for company info, and one on the left for navigation.
>
> I have it working beautifully in IE, so that the center div is fluid
around
> the right div. The top positioning is perfect below the header. But in
> Firefox, the center div wants to move up to the top of the page and in
> between the 2 header divs. By adding a top margin, Firefox will finally
> position it below the headers. But IE adds the margin, too - which places
> the center div way below the headers.
>
> I tried using body>#divid {margin: 200px;} trick, from the CSS Anthology
> book, which is supposed to make IE blind to it, but Firefox apparently
> doesn't see it either. Here are the essential divs:
>
> Headers:
> #banner {
> margin-bottom: 20px;
> }
>
> #banner h1 {
> background: transparent url(bw.gif) no-repeat top left;
> margin-top: 10px;
> width: 313px;
> height: 130px;
> float: left;
> }
>
> #banner h2 {
> background: transparent url(cld.gif) no-repeat top right;
> margin-top: 58px;
> margin-bottom: 40px;
> margin-left: 60px;
> width: 208px;
> height: 28px;
> float: right;
> }
>
> info divs:
>
> Left:
> #shopInfo {
> clear:left;
> margin: 20px 20px 20px 5px;
> width: 160px;
> float: left;
> }
>
> Middle (the problem child):
> #designInfo {
> padding: 10px 10px 20px 20px;
> }
>
> right:
> #nav {
> width: 160px;
> float: right;
> padding: 10px 10px 20px 20px;
> }
>
> I struggled to get this to work in IE until I discovered that the divs had
> to be in a particular order on the html page. The left and right ones had
> to come before the middle one. I've tried this both with a wrapper div
that
> defined margins and no margins in the body, and with only a body tag and
> margins set in it.
>
> I'm getting so confused - after you mess with something for a couple days
> you tend to forget what you did to get where you are.
>
> Any commentary is appreciated.
>
> Christina
>
>