Stylesheets - Continuing CSS learning Divs not staying put in Mozilla

Author

Continuing CSS learning Divs not staying put in Mozilla

Patrick

2006-08-02, 11:35 am

Hi All,

Background image is in place and a Div (yellow border) inside center Div
column is positioned where I want it to be. Now the problem is that in
Mozilla my third column div is dropping down below the wrapper but is
exactly where it is supposed to be in IE. I've tried some clears and
stuff like that but to no avail. What is causing this and how do I fix it?

http://ocg6.marine.usf.edu/patrick/test_css/test.html

Thanks and Happy Friday,

Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - college of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

Els

2006-08-02, 11:35 am

Patrick wrote:

> Background image is in place and a Div (yellow border) inside center Div
> column is positioned where I want it to be. Now the problem is that in
> Mozilla my third column div is dropping down below the wrapper but is
> exactly where it is supposed to be in IE. I've tried some clears and
> stuff like that but to no avail. What is causing this and how do I fix it?
>
> http://ocg6.marine.usf.edu/patrick/test_css/test.html

Cause 1: 10% + 65% + 25% + (3 * 2 * 1px) = 100% + 6px = is too wide.
Cause 2: clear:left on #contentright clears the other two floats.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Squeeze - Third Rail

Patrick

2006-08-02, 11:35 am

Els wrote:

> Patrick wrote:
>
>
>
>
> Cause 1: 10% + 65% + 25% + (3 * 2 * 1px) = 100% + 6px = is too wide.
> Cause 2: clear:left on #contentright clears the other two floats.
>

You're good, very good. Wow! So is it the Browser that is being
persnickety or is it saying, "Hey dumbass get it right or don't do it at
all." Makes perfect sense to me now. I was trying to stuff more into it
than it could hold. I guess it would be better to use background colors
to see exactly where the divs are lining up.

Thanks Els!

Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group â€“ USF - college of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

Jim Moe

2006-08-02, 11:35 am

Patrick wrote:
>
> [...] I guess it would be better to use background colors
> to see exactly where the divs are lining up.
>
Or install WebDeveloper into Firefox.
<http://chrispederick.com/work/webdeveloper/>. One of its many features
allows you to outline various elements on demand.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

John Hosking

2006-08-02, 11:35 am

Patrick wrote:
> Els wrote:
>
>
>
> You're good, very good. Wow! So is it the Browser that is being
> persnickety or is it saying, "Hey dumbass get it right or don't do it at
> all." Makes perfect sense to me now. I was trying to stuff more into it
> than it could hold. I guess it would be better to use background colors
> to see exactly where the divs are lining up.
>
> Thanks Els!
>
> Patrick

Patrick,

You also need to know that Mozilla (and similarly conforming browsers)
won't actually "contain" child divs the way you expect it to based on
IE's behavior. View your page in Firefox, and dial up the text size. As
the texts to the left increase, the "menu1" div will drop, to stay below
the texts. As menu1's top drops, so does its bottom, and it will appear
to "fall out" of your "contentcenter" div. #contentcenter is still the
*parent* of menu1, but Firefox won't display it as *containing" menu1.
IE behaves differently, but apparently not as specified. Surprise.

It's probably already _clear_ to you how to fix that...

What you might also fix, BTW, is the extraneous </form> sitting in your
source.

--
HTH
John

Patrick

2006-08-02, 11:35 am

John Hosking wrote:

> Patrick wrote:
>
>
>
> Patrick,
>
> You also need to know that Mozilla (and similarly conforming browsers)
> won't actually "contain" child divs the way you expect it to based on
> IE's behavior. View your page in Firefox, and dial up the text size. As
> the texts to the left increase, the "menu1" div will drop, to stay below
> the texts. As menu1's top drops, so does its bottom, and it will appear
> to "fall out" of your "contentcenter" div. #contentcenter is still the
> *parent* of menu1, but Firefox won't display it as *containing" menu1.
> IE behaves differently, but apparently not as specified. Surprise.
>
> It's probably already _clear_ to you how to fix that...
>
> What you might also fix, BTW, is the extraneous </form> sitting in your
> source.
>

Thanks for that info. Yep, I was messing around with something else and
the test page was conveniently open so I used it. Forgot to get rid of
the closing </form> tag.

Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group â€“ USF - college of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld