RE: [WSG] a better tsolution than oveflow:auto for Mozilla?
Hi Bruce
Try floating the content div instead. I've
often found this to be the easiest fix. A floated parent will contain its
floated children.
I've been writing a document for my
fellow programmers about nested lists and if write parent/child one more time I
think I'm going to change my name to Dr. Seuss.
Ted
From:
[EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bruce Gilbert
Sent: Tuesday, September 27, 2005
10:50 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] a better tsolution
than oveflow:auto for Mozilla?
Hello,
on a new site I am working on (http://www.fortuneinteractive.com/) in
Mozilla/FF. you get the horizontal and vertical scroll bars on some of the
pagesand I know
the reason why. It is because I am overflow:auto on my content div. I
added this after googling and finding this was a float clearing
solver.
the content div has the following CSS:
div#text_area{/*hiding from IE*/
background:url(bg_text_area.jpg) repeat-y;
color:#333;
text-align:left;
border:0;
padding-top:2em;
margin:0;
height:100%;
overflow:auto;
}
If I don't have the overflow:auto in FF/moz the div doesn't extend
all the way to the footer like I want (the div in question is #text_area). Any
suugestions on solving this
problem in Mozilla, FF?
let me know if I need to provide additional information...
full CSS:
http://www.fortuneinteractive.com/main.css
--
::Bruce::
Re: [WSG] a better tsolution than oveflow:auto for Mozilla?
Thanks Ted,
not sure I am understanding you correctly, though. Say you have a parent div you would to extend the length of your content, and within that parent div you have a div at the top that you want to not float, but fit the width of the parent, and below the top child div, you have two more twin dis, one floated left, and one right, each taking up about 50% or half of the parent div. What would be the solution for this? I don't think floating the parent would work in this case, unless I am misunderstanding you.
On 9/27/05, Drake, Ted C. [EMAIL PROTECTED] wrote:
Hi Bruce
Try floating the content div instead. I've often found this to be the easiest fix. A floated parent will contain its floated children.
I've been writing a document for my fellow programmers about nested lists and if write parent/child one more time I think I'm going to change my name to Dr. Seuss.
Ted
From:
[EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]]
On Behalf Of Bruce GilbertSent: Tuesday, September 27, 2005 10:50 AMTo:
wsg@webstandardsgroup.orgSubject: [WSG] a better tsolution than oveflow:auto for Mozilla?
Hello,on a new site I am working on (
http://www.fortuneinteractive.com/) inMozilla/FF. you get the horizontal and vertical scroll bars on some of the pagesand I know the reason why. It is because I am overflow:auto on my content div. Iadded this after googling and finding this was a float clearing
solver.the content div has the following CSS:div#text_area{/*hiding from IE*/ background:url(bg_text_area.jpg) repeat-y;color:#333;text-align:left;border:0;padding-top:2em;margin:0;
height:100%;overflow:auto;}If I don't have the overflow:auto in FF/moz the div doesn't extend all the way to the footer like I want (the div in question is #text_area). Any suugestions on solving this
problem in Mozilla, FF?
let me know if I need to provide additional information...full CSS:
http://www.fortuneinteractive.com/main.css -- ::Bruce:: -- ::Bruce::
RE: [WSG] a better tsolution than oveflow:auto for Mozilla?
#wrap{float:left;}
#header {}
#maincontent {float:right; width:49%;}
#sidebar{float:left; width:49%}
#footer {clear:both;}
div id="wrap"
div id="header/div
div id=""maincontent"/div
div id="sidebar"/div
/div
div id="footer"/div
Is this what you mean?
It's a very basic version of what
you are describing. It works for me.
Normally, I float the parent for areas
where I'm afraid clearing an element will also clear the sidebar. I haven't
tried it for the whole page layout.
div id="gallery"
dl
dtasdfa/dt
ddasdfasdF/dd
/dl
dl
dtasdfa/dt
ddasdfasdF/dd
/dl
dl
dtasdfa/dt
ddasdfasdF/dd
/dl
/div
#gallery {float:left; width:100%;}
#gallery dl {float:left; width:40%;
margin:1em;}
Any feedback on this folks?
Ted
www.tdrake.net
From:
[EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bruce Gilbert
Sent: Tuesday, September 27, 2005
1:55 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] a better
tsolution than oveflow:auto for Mozilla?
Thanks Ted,
not sure I am understanding you correctly, though. Say you have a
parent div you would to extend the length of your content, and within that
parent div you have a div at the top that you want to not float, but fit the
width of the parent, and below the top child div, you have two more twin dis,
one floated left, and one right, each taking up about 50% or half of the parent
div. What would be the solution for this? I don't think floating the parent
would work in this case, unless I am misunderstanding you.
On 9/27/05, Drake,
Ted C. [EMAIL PROTECTED]
wrote:
Hi Bruce
Try floating the content div instead. I've often found this
to be the easiest fix. A floated parent will contain its floated children.
I've been writing a document for my fellow programmers about
nested lists and if write parent/child one more time I think I'm going to
change my name to Dr. Seuss.
Ted
Re: [WSG] a better tsolution than oveflow:auto for Mozilla?
that's more or less what I am doing, but
take a look at this page in FF
http://www.fortuneinteractive.com/About.htm
scroll bars are there, if I take out overflow:auto in CSS on div#text_area
it looks even worse cuz, in FF the div only extends as far as the #right_block_content on some pages.
my CSS for #right_block_content div is:
#right_content_block_index{/*used for vertical divider on home page*/float:right;width:35%;height:100%;padding-right:10px;
}
here is an example of a page which is messed up in ff w/o the overflow:auto
http://www.fortuneinteractive.com/Clients.htm
full CSShttp://www.fortuneinteractive.com/main.css
On 9/27/05, Drake, Ted C. [EMAIL PROTECTED] wrote:
#wrap{float:left;}
#header {}
#maincontent {float:right; width:49%;}
#sidebar{float:left; width:49%}
#footer {clear:both;}
div id=wrap
div id=header/div
div id=maincontent/div
div id=sidebar/div
/div
div id=footer/div
Is this what you mean?
It's a very basic version of what you are describing. It works for me.
Normally, I float the parent for areas where I'm afraid clearing an element will also clear the sidebar. I haven't tried it for the whole page layout.
div id=gallery
dl
dtasdfa/dt
ddasdfasdF/dd
/dl
dl
dtasdfa/dt
ddasdfasdF/dd
/dl
dl
dtasdfa/dt
ddasdfasdF/dd
/dl
/div
#gallery {float:left; width:100%;}
#gallery dl {float:left; width:40%; margin:1em;}
Any feedback on this folks?
Ted
www.tdrake.net
From:
[EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]]
On Behalf Of Bruce GilbertSent: Tuesday, September 27, 2005 1:55 PMTo:
wsg@webstandardsgroup.orgSubject: Re: [WSG] a better tsolution than oveflow:auto for Mozilla?
Thanks Ted,
not sure I am understanding you correctly, though. Say you have a parent div you would to extend the length of your content, and within that parent div you have a div at the top that you want to not float, but fit the width of the parent, and below the top child div, you have two more twin dis, one floated left, and one right, each taking up about 50% or half of the parent div. What would be the solution for this? I don't think floating the parent would work in this case, unless I am misunderstanding you.
On 9/27/05, Drake, Ted C.
[EMAIL PROTECTED] wrote:
Hi Bruce
Try floating the content div instead. I've often found this to be the easiest fix. A floated parent will contain its floated children.
I've been writing a document for my fellow programmers about nested lists and if write parent/child one more time I think I'm going to change my name to Dr. Seuss.
Ted
-- ::Bruce::
RE: [WSG] a better tsolution than oveflow:auto for Mozilla?
Hi Bruce
I can't answer your question
immediately, due to time constraints. But my first suggestion is to simplify
your css to see where things are happening. Here's a snippet of the first
few rules:
/*global structure elements */body { margin: 0; padding: 0; color: #333; font: 76%/1.5em arial, helvetica, sans-serif; background: #e2e3d5; height: 100%; min-height: 100%; text-align:center; }#wrapper_outer { width: 769px; height: 100%; min-height:100%; font-size: 1em; min-height: 100%; margin-left: auto; margin-right: auto;}* htmlbody #wrapper_outer { height: auto;}#top{padding:0;margin:0;background:url(bdr_top.jpg) no-repeat;}#bottom{padding:0;margin:0;background:url(bdr_bottom.jpg) no-repeat;}
Can become:
Body, div, ul, li, ol, dl, dt, dd, p,
table, td, tr, th, tbody, thead, caption {padding:0; margin:0;}
body {color: #333; font: 76%/1.5em arial, helvetica, sans-serif; background: #e2e3d5; height: 100%; min-height: 100%;text-align:center;}#wrapper_outer {width: 769px; height: 100%; min-height:100%;font-size: 1em;margin:0 auto;}#top{background:url(bdr_top.jpg) no-repeat 0 0;}#bottom{background:url(bdr_bottom.jpg) no-repeat 0 0;}Here's a couple things I saw, repetitive mention of margin:0, padding:0. Declare it once in the top of the page to zero out the browsers. Begin adding margin and padding on elements that need it.#wrapper_outer had min-height:100% twiceThis is an odd set of filters that show something only to IE then you hide it from IE with the selector. It's not doing anything. * htmlbody #wrapper_outer {height: auto;}I would suggest combing through your CSS to remove extra elements. I have not used the height/min-height 100% rule very often. I don't know if that could be causing any issues.Ted
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On
Behalf Of Bruce Gilbert
Sent: Tuesday, September 27, 2005
2:40 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] a better
tsolution than oveflow:auto for Mozilla?
that's more or less what I am doing, but
take a look at this page in FF
http://www.fortuneinteractive.com/About.htm
scroll bars are there, if I take out overflow:auto in CSS on
div#text_area
it looks even worse cuz, in FF the div only extends as far as the
#right_block_content on some pages.
my CSS for #right_block_content div is:
#right_content_block_index{/*used
for vertical divider on home page*/
float:right;
width:35%;
height:100%;
padding-right:10px;
}
here is an example of a page which is messed up in ff w/o the
overflow:auto
http://www.fortuneinteractive.com/Clients.htm
full CSS
http://www.fortuneinteractive.com/main.css
On 9/27/05, Drake,
Ted C. [EMAIL PROTECTED]
wrote:
#wrap{float:left;}
#header {}
#maincontent {float:right; width:49%;}
#sidebar{float:left; width:49%}
#footer {clear:both;}
div id=wrap
div id=header/div
div id=maincontent/div
div id=sidebar/div
/div
div id=footer/div
Is this what you mean?
It's a very basic version of what you are describing. It
works for me.
Normally, I float the parent for areas where I'm afraid
clearing an element will also clear the sidebar. I haven't tried it for the
whole page layout.
div id=gallery
dl
dtasdfa/dt
ddasdfasdF/dd
/dl
dl
dtasdfa/dt
ddasdfasdF/dd
/dl
dl
dtasdfa/dt
ddasdfasdF/dd
/dl
/div
#gallery {float:left; width:100%;}
#gallery dl {float:left; width:40%; margin:1em;}
Any feedback on this folks?
Ted
www.tdrake.net
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]]
On Behalf Of Bruce Gilbert
Sent: Tuesday, September 27, 2005
1:55 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] a better
tsolution than oveflow:auto for Mozilla?
Thanks
Ted,
not sure
I am understanding you correctly, though. Say you have a parent div you would
to extend the length of your content, and within that parent div you have a div
at the top that you want to not float, but fit the width of the parent, and
below the top child div, you have two more twin dis, one floated left, and one
right, each taking up about 50% or half of the parent div. What would be the
solution for this? I don't think floating the parent would work in this case,
unless I am misunderstanding you.
On
9/27/05, Drake, Ted C.
[EMAIL PROTECTED] wrote:
Hi Bruce
Try floating the content div instead. I've often found this
to be the easiest fix. A floated parent will contain its floated children.
I've been writing a document for my fellow programmers about
nested lists and if write parent/child one more time I think I'm going to
change my name to Dr. Seuss.
Ted
--
::Bruce::
