divs/layout question (FF problem..)

**dorayme** · Oct 21 '07, 07:25 AM

Re: divs/layout question (FF problem..)

In article <ffetbd$b9e$1@a ioe.org>, maya <maya778899@yah oo.com>
wrote:

pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and FF..
>
in IE it looks fine, but in FF the main div (centered, 800px wide, blue
background; in reality the bg will be white..) won't display all the way
down... (I tried height:100% for it but it still only went as high as
the browser window..)
>
only reason am having this problem is that I want to do a
background-image BEHIND the main div.. but it's not cooperating...; )
in FF the footer also appears in wrong place.. have spent a long time
on this..... am almost ready to switch to table-based layout.. it
would make this so much simpler....;)
>
(this is for a blog, though, and for blogs layouts are always done in
divs..)

In cases like this, it is best to start with valid html. Would
you mind reproducing this with the bare minimum code and styles
that display the problem you have, starting with valid code with
a proper doctype?

--
dorayme

**maya** · Oct 21 '07, 08:15 AM

Re: divs/layout question (FF problem..)

dorayme wrote:

In article <ffetbd$b9e$1@a ioe.org>, maya <maya778899@yah oo.com>
wrote:
>

>pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and FF..
>>
>in IE it looks fine, but in FF the main div (centered, 800px wide, blue
>background; in reality the bg will be white..) won't display all the way
>down... (I tried height:100% for it but it still only went as high as
>the browser window..)
>>
>only reason am having this problem is that I want to do a
>background-image BEHIND the main div.. but it's not cooperating...; )
>in FF the footer also appears in wrong place.. have spent a long time
>on this..... am almost ready to switch to table-based layout.. it
>would make this so much simpler....;)
>>
>(this is for a blog, though, and for blogs layouts are always done in
>divs..)

>
>
In cases like this, it is best to start with valid html. Would
you mind reproducing this with the bare minimum code and styles
that display the problem you have, starting with valid code with
a proper doctype?
>

ok, the page validates now...:)

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mayacove.com%2Fdesign%2Fdivs.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0

(and took out unnecessary css..)

thank you very much....

rf · Oct 21 '07, 08:55 AM

Re: divs/layout question (FF problem..)

"maya" <maya778899@yah oo.comwrote in message news:ffetbd$b9e $1@aioe.org...

>
pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and
FF..
>
in IE it looks fine, but in FF the main div (centered, 800px wide, blue
background; in reality the bg will be white..) won't display all the way
down... (I tried height:100% for it but it still only went as high as the
browser window..)

In this case (as usual) IE is getting it wrong.

You have specified height: 600px for that div with the white background.
That is what FF is giving you. 600 pixels, just like you said.

If you do not want the content of that div to escape out of the bottom of
the div then do not give that div any height. And why 600 pixels. Are you
trying to anticipate the height of my browser canvas? Well, you have got it
totally wrong :-)

only reason am having this problem is that I want to do a background-image
BEHIND the main div.. but it's not cooperating...; )
in FF the footer also appears in wrong place.. have spent a long time on
this..... am almost ready to switch to table-based layout.. it would
make this so much simpler....;)

You could start by omiting most of your positioning stuff. Why do you float
the content div. Why do you give it a width in pixels. That in itself causes
me to suddenly lose interest.

(this is for a blog, though, and for blogs layouts are always done in
divs..)

Is that right? :-)

--
Richard.

**dorayme** · Oct 21 '07, 09:45 AM

Re: divs/layout question (FF problem..)

In article
<doraymeRidTh is-F7D288.19255621 102007@news-vip.optusnet.co m.au>,
dorayme <doraymeRidThis @optusnet.com.a uwrote:

In my last, I should have typed the after "both;" to read:

<div style="clear:bo th;></div>

--
dorayme

**dorayme** · Oct 21 '07, 09:45 AM

Re: divs/layout question (FF problem..)

In article
<doraymeRidTh is-79990B.19353521 102007@news-vip.optusnet.co m.au>,
dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article
<doraymeRidTh is-F7D288.19255621 102007@news-vip.optusnet.co m.au>,
dorayme <doraymeRidThis @optusnet.com.a uwrote:
>
In my last, I should have typed the after "both;" to read:
>
<div style="clear:bo th;></div>

o shit...

<div style="clear:bo th;"></div>

--
dorayme

rf · Oct 21 '07, 10:05 AM

Re: divs/layout question (FF problem..)

"dorayme" <doraymeRidThis @optusnet.com.a uwrote in message
news:doraymeRid This-70AAA2.19362421 102007@news-vip.optusnet.co m.au...

In article
<doraymeRidTh is-79990B.19353521 102007@news-vip.optusnet.co m.au>,
dorayme <doraymeRidThis @optusnet.com.a uwrote:
>

>In article
><doraymeRidThi s-F7D288.19255621 102007@news-vip.optusnet.co m.au>,
> dorayme <doraymeRidThis @optusnet.com.a uwrote:
>>
>In my last, I should have typed the after "both;" to read:
>>
><div style="clear:bo th;></div>

>
o shit...
>
<div style="clear:bo th;"></div>

Hard day at the office ^H^H^H beach, girl?

'Twas a good day for it. Myself, well, in the garden shovelling dirt around
:-(

--
Richard.

**maya** · Oct 21 '07, 03:35 PM

Re: divs/layout question (FF problem..)

rf wrote:

"maya" <maya778899@yah oo.comwrote in message news:ffetbd$b9e $1@aioe.org...

>pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and
>FF..
>>
>in IE it looks fine, but in FF the main div (centered, 800px wide, blue
>background; in reality the bg will be white..) won't display all the way
>down... (I tried height:100% for it but it still only went as high as the
>browser window..)

>
In this case (as usual) IE is getting it wrong.
>
You have specified height: 600px for that div with the white background.
That is what FF is giving you. 600 pixels, just like you said.

actually no, I have a height of 600px for the two divs INSIDE the 'main'
div... and those are there purely for testing purposes, in real life
I'm not specifying height for ANY divs...

if I take out 'float:left;' for left-div as you suggest, the div is
centered, and putting 'align="left" in the div tag outside css did not
center it..

my gosh, this is working now....:) even in FF...

http://www.mayacove.com/design/divs.html

not sure what did it.. (I even left float:left for the left-content div,
and it still works now.. and am not sure what changed....;) I don't
believe this, I spent so much time on this yesterday...

thank you very much...

>
If you do not want the content of that div to escape out of the bottom of
the div then do not give that div any height. And why 600 pixels. Are you
trying to anticipate the height of my browser canvas? Well, you have got it
totally wrong :-)
>

>only reason am having this problem is that I want to do a background-image
>BEHIND the main div.. but it's not cooperating...; )
>in FF the footer also appears in wrong place.. have spent a long time on
>this..... am almost ready to switch to table-based layout.. it would
>make this so much simpler....;)

>
You could start by omiting most of your positioning stuff. Why do you float
the content div. Why do you give it a width in pixels. That in itself causes
me to suddenly lose interest.
>

>(this is for a blog, though, and for blogs layouts are always done in
>divs..)

>
Is that right? :-)
>

**John L.** · Oct 21 '07, 03:45 PM

Re: divs/layout question (FF problem..)

maya wrote:

my gosh, this is working now....:) even in FF...
http://www.mayacove.com/design/divs.html

But it's broken in IE6. (Do you test in IE6? You should, since it's
still the predominant brower.)

Why not just do this:

<div id="main">
<div id="header">con tent</div>
<div id="content">co ntent</div>
<div id="sidebar">co ntent</div>
<div id="footer">con tent</div>
</div>

And the barebones CSS:

#main {
width: 800px;
margin: 0 auto;
}
#content {
width: 500px; /* or whatever */
float: left;
}
#sidebar {
width: 200px;
float: right;
}
#footer {
clear: both;
}

Clearing the footer will cause #main to contain the floated divs, hence
you'll see the background colour all the way down.

**maya** · Oct 21 '07, 04:15 PM

Re: divs/layout question (FF problem..)

John L. wrote:

maya wrote:
>

>my gosh, this is working now....:) even in FF...
>http://www.mayacove.com/design/divs.html

>
But it's broken in IE6. (Do you test in IE6? You should, since it's
still the predominant brower.)

oh brother.. you know, when I upgraded to IE7, I did it mainly so I
could test.. then I found you can't have IE 7 and IE 6 installed at the
same time.. do you know if there's a way around this??

ok, this one, http://www.mayacove.com/design/divs2.html
contains exact code you wrote, and it seems to be working in FF and
IE7.. can u pls see if it works in IE6? (oh brother, now have to
'transfer' this bare-bones code to the blog stylesheet... yikes....;)

thank you very much..

>
Why not just do this:
>
<div id="main">
<div id="header">con tent</div>
<div id="content">co ntent</div>
<div id="sidebar">co ntent</div>
<div id="footer">con tent</div>
</div>
>
And the barebones CSS:
>
#main {
width: 800px;
margin: 0 auto;
}
#content {
width: 500px; /* or whatever */
float: left;
}
#sidebar {
width: 200px;
float: right;
}
#footer {
clear: both;
}
>
Clearing the footer will cause #main to contain the floated divs, hence
you'll see the background colour all the way down.

**John L.** · Oct 21 '07, 04:25 PM

Re: divs/layout question (FF problem..)

maya wrote:

John L. wrote:

>maya wrote:
>>

>>my gosh, this is working now....:) even in FF...
>>http://www.mayacove.com/design/divs.html

>>
>But it's broken in IE6. (Do you test in IE6? You should, since it's
>still the predominant brower.)

>
oh brother.. you know, when I upgraded to IE7, I did it mainly so I
could test.. then I found you can't have IE 7 and IE 6 installed at the
same time.. do you know if there's a way around this??

You could try running the standalone version available here:

browsers.evolt.org

http://browsers.evolt.org/?ie/32bit/standalone

A world community for web developers, evolt.org promotes the mutual free exchange of ideas, skills and experiences.

Running IE6 in this way makes it about as stable as nitroglycerine, but
for checking layouts it's OK.

ok, this one, http://www.mayacove.com/design/divs2.html
contains exact code you wrote, and it seems to be working in FF and
IE7.. can u pls see if it works in IE6?

The layout works in IE6.

**maya** · Oct 21 '07, 05:05 PM

Re: divs/layout question (FF problem..) -- one more question...:)

John L. wrote:

maya wrote:

>John L. wrote:

>>maya wrote:
>>>
>>>my gosh, this is working now....:) even in FF...
>>>http://www.mayacove.com/design/divs.html
>>>
>>But it's broken in IE6. (Do you test in IE6? You should, since it's
>>still the predominant brower.)

>>
>oh brother.. you know, when I upgraded to IE7, I did it mainly so I
>could test.. then I found you can't have IE 7 and IE 6 installed at
>the same time.. do you know if there's a way around this??

>
You could try running the standalone version available here:
>

browsers.evolt.org

http://browsers.evolt.org/?ie/32bit/standalone

A world community for web developers, evolt.org promotes the mutual free exchange of ideas, skills and experiences.

>
Running IE6 in this way makes it about as stable as nitroglycerine, but
for checking layouts it's OK.
>

>ok, this one, http://www.mayacove.com/design/divs2.html
>contains exact code you wrote, and it seems to be working in FF and
>IE7.. can u pls see if it works in IE6?

>
The layout works in IE6.

my gosh.. how stupid of me, just looked @ what doctype blog-code uses..
and found all this!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta name="generator " content="WordPr ess 2.3" />

so put all this on top of my code now.. made chgs necessary for XHTML,
it validates.....; )

but I once again I need to know if it works in IE6.. thank you very much...

**maya** · Oct 21 '07, 05:15 PM

Re: divs/layout question (FF problem..) -- one more question...:)

maya wrote:

John L. wrote:

>maya wrote:

>>John L. wrote:
>>>maya wrote:
>>>>
>>>>my gosh, this is working now....:) even in FF...
>>>>http://www.mayacove.com/design/divs.html
>>>>
>>>But it's broken in IE6. (Do you test in IE6? You should, since it's
>>>still the predominant brower.)
>>>
>>oh brother.. you know, when I upgraded to IE7, I did it mainly so I
>>could test.. then I found you can't have IE 7 and IE 6 installed at
>>the same time.. do you know if there's a way around this??

>>
>You could try running the standalone version available here:
>>
>http://browsers.evolt.org/?ie/32bit/standalone
>>
>Running IE6 in this way makes it about as stable as nitroglycerine,
>but for checking layouts it's OK.
>>

>>ok, this one, http://www.mayacove.com/design/divs2.html
>>contains exact code you wrote, and it seems to be working in FF and
>>IE7.. can u pls see if it works in IE6?

>>
>The layout works in IE6.

>
my gosh.. how stupid of me, just looked @ what doctype blog-code uses..
and found all this!!
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta name="generator " content="WordPr ess 2.3" />
>
so put all this on top of my code now.. made chgs necessary for XHTML,
it validates.....; )
>
but I once again I need to know if it works in IE6.. thank you very
much...
>

(I can't get that standalone IE6 to work (get error when open app.. app
failed to initialize properly..), maybe it doesn't work in Vista??)

thank you again..

**Jonathan N. Little** · Oct 21 '07, 05:45 PM

Re: divs/layout question (FF problem..) -- one more question...:)

maya wrote:

(I can't get that standalone IE6 to work (get error when open app.. app
failed to initialize properly..), maybe it doesn't work in Vista??)

Nope it doesn't, blow a kiss to Big Bill! In Vista you have to setup a
virtual machine to run EI6. The rest of us will cling to our XP with a
death-grip!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**maya** · Oct 21 '07, 05:55 PM

Re: divs/layout question (FF problem..) -- one more question...:)

Jonathan N. Little wrote:

maya wrote:
>

>(I can't get that standalone IE6 to work (get error when open app..
>app failed to initialize properly..), maybe it doesn't work in Vista??)

>
Nope it doesn't, blow a kiss to Big Bill! In Vista you have to setup a
virtual machine to run EI6. The rest of us will cling to our XP with a
death-grip!
>

in Vista you have to set up WHAT to run IE6?? oh man... well, I need
it at work too, where I'm on XP, so will try it at work tomorrow....:)
once again thank you very much...

divs/layout question (FF problem..)

divs/layout question (FF problem..)

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment