divs/layout question (FF problem..)

[maya]

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..)

thank you very much....

[dorayme]

In article <ff**********@aioe.org>, maya <ma********@yahoo.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]

dorayme wrote:

In article <ff**********@aioe.org>, maya <ma********@yahoo.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=ht...e&ss=1&group=0

(and took out unnecessary css..)

thank you very much....

[rf]

"maya" <ma********@yahoo.comwrote in message news:ff**********@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]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

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

<div style="clear:both;></div>

--
dorayme

[dorayme]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

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

<div style="clear:both;></div>

o shit...

<div style="clear:both;"></div>

--
dorayme

[rf]

"dorayme" <do************@optusnet.com.auwrote in message
news:do**********************************@news-vip.optusnet.com.au...

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

>In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

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

<div style="clear:both;></div>

o shit...

<div style="clear:both;"></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]

rf wrote:

"maya" <ma********@yahoo.comwrote in message news:ff**********@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.]

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">content</div>
<div id="content">content</div>
<div id="sidebar">content</div>
<div id="footer">content</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]

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">content</div>
<div id="content">content</div>
<div id="sidebar">content</div>
<div id="footer">content</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.]

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.

[maya]

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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta name="generator" content="WordPress 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]

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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta name="generator" content="WordPress 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]

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
http://www.LittleWorksStudio.com

[maya]

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...

[Jonathan N. Little]

maya wrote:

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...

Yep. Royal pain.

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...

On XP you'll be4 able to do it, no problem. I have versions 4.01 through
7 on the XP box.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[rf]

"maya" <ma********@yahoo.comwrote in message news:ff**********@aioe.org...

rf wrote:

>"maya" <ma********@yahoo.comwrote in message
news:ff**********@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...

I don't know what you were looking at but I was looking at the firebug
inspect panel. I positioned the cursor over the text (that was getting out
of the box) and firebug reported that it lived inside a div with height: 600
px specified.

It's not there now, of course.

--
Richard.

[maya]

first of all, I want to thank everyone who has helped me with this
problem.. finally applied all css code (& the few necessary changes in
interface code) to 'real' blog.. however: find that in blog it's still
wrong in FF.. and I just made the HORRIBLE discovery that it works if I
take out this from on top of main index pg for blog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

if I take out this code it works fine (again, problem: 'main' div, which
just has white bg-color, holds all content.. in FF don't see white bg
for 'main' div.. this is a problem only in FF, not IE..) but if I leave
that code in it still doesn't work in FF, and it seems I'm back in
square one...:(

(however, when was testing locally, putting all code in html (instead of
php) it worked fine with all XHTML code in it (as can be seen here,
http://www.mayacove.com/design/indexg.html.. real blog is here,
www.francesblog.com)

of course don't suppose for 'real' blog can take out all XHTML-related
stuff... I don't think Word Press would like that very much...;)

oh brother...
rf wrote:

"maya" <ma********@yahoo.comwrote in message news:ff**********@aioe.org...

>rf wrote:

>>"maya" <ma********@yahoo.comwrote in message
news:ff**********@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...

I don't know what you were looking at but I was looking at the firebug
inspect panel. I positioned the cursor over the text (that was getting out
of the box) and firebug reported that it lived inside a div with height: 600
px specified.

It's not there now, of course.

[maya]

never mind.. ended up doing w/table after all.. just put all content
inside a table width 850, centered.. ;)
www.francesblog.com

thank you very much..

maya wrote:

>
first of all, I want to thank everyone who has helped me with this
problem.. finally applied all css code (& the few necessary changes in
interface code) to 'real' blog.. however: find that in blog it's still
wrong in FF.. and I just made the HORRIBLE discovery that it works if I
take out this from on top of main index pg for blog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

if I take out this code it works fine (again, problem: 'main' div, which
just has white bg-color, holds all content.. in FF don't see white bg
for 'main' div.. this is a problem only in FF, not IE..) but if I leave
that code in it still doesn't work in FF, and it seems I'm back in
square one...:(

(however, when was testing locally, putting all code in html (instead of
php) it worked fine with all XHTML code in it (as can be seen here,
http://www.mayacove.com/design/indexg.html.. real blog is here,
www.francesblog.com)

of course don't suppose for 'real' blog can take out all XHTML-related
stuff... I don't think Word Press would like that very much...;)

oh brother...
rf wrote:

>"maya" <ma********@yahoo.comwrote in message
news:ff**********@aioe.org...

>>rf wrote:
"maya" <ma********@yahoo.comwrote in message
news:ff**********@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...

I don't know what you were looking at but I was looking at the firebug
inspect panel. I positioned the cursor over the text (that was getting
out of the box) and firebug reported that it lived inside a div with
height: 600 px specified.

It's not there now, of course.