Forum Moderators: not2easy
CSS
#menu {
font-family:Arial Black, Arial Black, Gadget, sans-serif;
font-weight:bold;
background-image: url(img/tabsquarebg.jpg);
background-repeat: no-repeat;
width: 100%;
height: 33px;
text-align: left;
}
#menu a{
display: block;
text-decoration: none;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:15px;
font-weight:bold;
color:MintCream;
width:auto;
height: auto;
float: left;
display: inline;
margin-right: 1px;
background:url(img/tabsquare.jpg) no-repeat ;
padding: 5px 2% 8px 2%;
text-align:center;}
#menu a:hover {
color: white;
background-image:url(img/tabsquareover.jpg);
background-repeat:no-repeat;
text-decoration:none;
}
The menu is rendered correctly.
Now, only in IE7, whatever I do, also issuing multiples "clear:both", the next element following the DIV id="menu", keeps being floated.
What can I try?
Edit: I did code "display:block" also in the #menu, but still the same. Maybe I didn't get properly the meaning of floats...
Doesn't the "clear:both" property removes the floats?
Example:
CSS
.floated{
float:left;
}
.nofloat{
clear:both;
}
HTML (somewere in the body)
<div class="floated">
<!-- from now on, everything is floated -->
<div>
<!-- still floating here -->
</div>
</div>
<!-- still floating here ? -->
<div class="nofloat">
<!-- no more floating.... correct? -->
</div>
Clear doesn't remove float property float:none; does that ;)
Clear, albeit not very well supported, ensures that floated element 'clears' the float above. So there's no overlap.
try this and compare the Doctype to your Doctype and let us know what happens:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
.floated{
float:left;
background: #cfc;
width: 200px;
margin-right: 10px;
}.nofloat{
clear:both;
}
</style>
</head>
<body>
<div class="floated">
<p>from now on, everything is floated</p>
<div> inner div still floating here = No this div is not floating, but the parent is and it contains this div</div>
</div>
<div class="floated">
<p>from now on, everything is floated</p>
<div> inner div still floating here = No this div is not floating, but the parent is and it contains this div</div>
</div><div class="nofloat"> no more floating.... correct? = correct</div>
</body>
</html>
Could you try this? Works perfectly in opera and FF not in IE7
<!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>
<title>mytitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
@charset "utf-8";
/* static START */
body {
background:white;
color:#555;
font-family:Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:12px;
}h1, h2, h3, h4, h5, h6 {
font-weight:bolder;
letter-spacing:-0.05em;
font-family:Arial;
}h1 {font-size:170%;}
h2 {font-size:160%;}
h3 {font-size:150%;}
h4 {font-size:130%;}
h5 {font-size:110%;}
h6 {font-size:100%;}a:hover img.sided {
border-color:#A6A6A6;
}a {
color:#2970A6;
text-decoration:none;
}a:hover {
text-decoration:underline;
}.fixed{
clear:both;
}/* static END */
/* layout START */
#idwrapper {
padding:0px;
width:1200px;
}#header {
width:100%;
margin-top:20px;
height:300px;
}#content{
width:1020px;
}#footer{
}#bitmaplogo{
margin-left:20px;
background:url("http://example.com/image.jpg") no-repeat left bottom;
height:100%;}
#menu {
display:block;
font-family:Arial Black, Arial Black, Gadget, sans-serif;
font-weight:bold;
background-color: Khaki;
width: 1000px;
height: 33px;
text-align: left;
}#menu a{
display: block;
text-decoration: none;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:15px;
font-weight:bold;
color:black;
width:auto;
height: auto;
float: left;
display: inline;
margin-right: 1px;
background-color: Khaki;
padding: 5px 2% 8px 2%;
text-align:center;}#menu a:hover {
color: white;
background-color: DarkKhaki;
background-repeat:no-repeat;
text-decoration:none;
}#searchbox {
background-color: Khaki;
position:relative;
float:left;
clear:right;
height:33px;
width:350px;
}#cse-search-box{
float:left;
padding:3px 10px;
}#search-box-text{
float:left;
padding-left:8px;
/*padding-top: 5px ;*/
line-height:32px;
letter-spacing:-0.05em;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:16px;
font-weight:bold;
color: DarkGray;
}.cse-box-style{
height: 20px;
width: 250px;
}/* header END */
.tgrow{
margin-top:5px;
width:100%;
}
.adboxyellow {
background:Khaki;
font-size:100%;
color:black;
font-weight:bold;
border:4px solid DarkKhaki;
text-align:center;
}
.adboxblu {
background:#8DC3E9;
font-size:100%;
color:white;
font-weight:bold;
border:4px solid #4C88BE;
text-align:center;
}.spacer{
background:url(img/spacer.gif);
}.box_left_padded{
width:300px;
height:252px;
float:left;
margin-right:5px;
padding: 5px 5px 5px 5px;
}.box_left_unpadded{
width:300px;
height:252px;
float:left;
margin-right:5px;
}.box_mid_big_unpadded{
width:500px;
height:252px;
float:left;
margin-right:5px;
}.box_right_unpadded{
width:210px;
height:252px;
float:left;
}
</style>
</head>
<body>
<div id="idwrapper">
<div id="header">
<div id="bitmaplogo"></div><div id="menu">
<a href="/articles">Articles</a> <a href="/guides">Guides</a> <a href=
"/news">News</a> <a href="/join">JOIN!</a> <a href="/disclaimer">Disclaimer</a>
<a href="/sitemap">Sitemap</a><div id="searchbox">
<div id="search-box-text">
Search
</div><form id="cse-search-box" action="http://example.com/search-results/"
name="cse-search-box">
<input type="hidden" value="p" name="cx" />
<input type="hidden" value="FORID:9" name="cof" />
<input type="hidden" value="UTF-8" name="ie" />
<input class="cse-box-style" type="text" size="20" name="q" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://example.com/watermark.gif) no-repeat scroll left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" />
</form>
<script src="http://www.example.com" type="text/javascript">
</script>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
<div id="content">
<div class="adboxblu" style="width: 1033px; height: 20px; line-height: 20px; margin-top: 7px;">
your text Here! test
</div>
<div class="row">
<div class="spacer" style="height: 7px;"></div>
<div class="box_left_unpadded">
<div class="adboxblu" style="width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div><div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div><div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div><div class="fixed"></div>
<div class="row">
<div class="spacer" style="height: 7px;"></div><div class="box_left_unpadded">
<div class="adboxblu" style=
"width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div><div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div><div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div><div class="fixed"></div>
</div><div id="footer"></div>
</div>
</div>
</div>
</body>
</html>
[edited by: SuzyUK at 11:42 pm (utc) on July 25, 2009]
[edit reason] examplified URI's [/edit]
all your "fixed"/ 'clearance' divs are empty? - do you want browsers to assume they're empty or do you want error fallback? should they have a height or be empty/collapsed/non-existant?
that's a rhetorical question btw, it's up to browsers how they handle empty divs, and 99% of people want them to disappear (CMS users especially ;))
I started troubleshooting your code by removing all div class="fixed" from the HTML..
.
.
.
.
.
.
.
.
.. that's it I didn't have to go any further ;)
sometimes trying too hard with floats is not the answer, if you want #b to clear #a with a margin/gap then put the rules on #b without trying to add easy clearing/irrelevant markup, you already have "rows" and a very clear header div in your existing markup (though I'm not sure it's strictly valid yet..) so use them to hold and clear previous elements?
there's too much code here too read, the inline styles overrrule the embedded CSS at times, so I suggest you think about rows and how they should clear each other for this particular example
though in answer as I said above all I did was remove the actual clearing divs and the floats were fine :)
I'have tried to remove all the "fixed" DIVs but the problems is still there :-(
IE7 version:7.0.6001.18000, windows version, running on VISTA.
BTW, if you have some suggestions to remove unwanted-overshooting code I would be happy!
P.S. - the code is validated.
*******************************
Update: with the "fixed" DIVS removed, now the problem appears also in FF and Opera!
I removed the image from the header and removed the height of the image to bring the problem up the page, because it easier to see. it is the fixed header height combined with image/menu height, once that's sorted you don't need the 'fixed' divs either, they really still aren't necessary.
Re: Code validation
Yes it's valid, i.e. closing tags are all there, but they're not where they should be. if you match the closing tags to the opening tags the first 'row' is not being closed until after the footer div which means the first row contains the second row and the footer
The row container could be naturally used @ 100% wide to contain and clear your blue floats. A div that is explicitly set to 100% wide automatically clear any previous div as it needs the whole width, and if you also float the 'row' divs at 100% wide they will stretch to contain their floated children enabling you put top margins on them instead of using "spacer" divs
The thing to think about with CSS, is that there really does not need ever need to be any empty/presentational divs in the HTML.
------
You're being too restrictive with heights which is what is causing your overlap, it is not non-clearance.
You've set your header to be 300px high, I presume to contain the image (278px) and the menu/search but the menu height is 33px this is just a quick scan as I haven't counted the effect that any padding or borders would actually have on that.. but even just taking those two heights into account - imageheight+ menuheight = 311px then I think one of the spacers at 7px or top margin of 7px was adding onto that.. not quite sure of the actual pixel difference.
When you fix the height (or width) of a div and content is larger than that div the content overflows it does not stretch the actual div.. so the div following your header is starting at 301px it is not aware of the content overflow.
My advice.. lose the heights and widths apart from an initial container for your page width (but still no height). Then any div that needs to narrower than 100% wide can have it's width on obviously
Let the page flow, don't try to be too restrictive, pixel perfect doesn't work very well x-brower. Then control, suggest any required spacing between logo, 'rows', menu, header, footer by putting margins on those divs.
There is heaps and heaps of code, both CSS and HTML, you could optimise/remove, and you might want to look into the use of multiple classes to cover the difference in those "adboxblu" divs so that the inline styles can be removed to the stylesheet and controlled more centrally
it's a lot to do, and I might troubleshoot it as my Sunday project ;) but I won't promise
Suzy
What is sure is that I'm a rookie!
it's possible that you are using heights to compensate for containing floats without knowing it?
e.g. your menu bar, all its content is floated, the menu links, search bar and text
because of this the menu bar itself will not stretch vertically to contain its floated children so the background you have on there would not show, by putting the height of 33px on it you are perhaps fixing the look of background but it's not quite right..you are still not making it contain the floated children - so it's only "masking" the problem (that probably wasn't helping the overlap either .. but
to make a parent contain it's floated children you need to float it (which is easiest when you want it to be 100% of the container width) or you can add overflow: hidden;
IE up to and including 7 would have contained them just because you had a width and/or height on them, but that is incorrect behaviour, so it can be misleading to develop in IE alone. make sure you have have another browser to tst in too, and in general trust what you see in them then just ask... there's ususally a fix for any IE problem you can think of ;)
You will come across this when you try to use the row divs to contain the floated blue boxes too, so as tip add a temporary background color to the rows so you can actually see them, you will not be able to apply margins to them until you are sure they are containing their child floats.
I recall somewhere someone was stating that float elements do need sizing to work properly.
Here's the t/shooting summary for education, lots of comments in the CSS, lots of divs removed, from HTML, also note order of closing tags, everything is inside #idwrapper which is were you would set the overall width required, I've closed the row tags properly and added a row around the first box too to keep the margins/spacing in line. I've added both the blue and yellow classes youst for demo as to how/why you might use the different class names, I discovered you shouldn't call any divs "adbox" as these are on public block lists, so I changed to abox
I would suggest that if you want padding to nest a div called "pad" (in the CSS already) inside whatever boxes you want it in, or if you want padding on all divs the forget the extra div, add padding to to abox then recalculate the widths on the three boxes to allow for the padding.
good luck, and hope the comments help learn various bits
<!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>
<title>mytitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body {margin: 0; padding: 0;}body {
background:white;
color:#555;
font-family:Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:12px;
}h1, h2, h3, h4, h5, h6 {
font-weight:bolder;
letter-spacing:-0.05em;
font-family:Arial;
}h1 {font-size:170%;}
h2 {font-size:160%;}
h3 {font-size:150%;}
h4 {font-size:130%;}
h5 {font-size:110%;}
h6 {font-size:100%;}a:hover img.sided {border-color:#A6A6A6;}
a {
color:#2970A6;
text-decoration:none;
}a:hover {
text-decoration:underline;
}/* static END */
/* layout START */
#idwrapper {
width: 1020px; /* set the overall page width here */
margin: 0 auto;
}/* don't need width all normal block div are 100% by default */
#header {margin-top:20px;}#content {width: 100%; float: left;} /* width & float to contain floated rows and boxes */
#footer {clear: both; margin-top: 7px; background: #eee; text-align: center; color: #000;}#bitmaplogo {
margin-left:20px;
background:url("http://example.com/image.jpg") no-repeat left bottom;
height: 50px; /* put height of your image in here */
/* this div (not the image) will also default to 100% wide until told otherwise */
}#menu {
/* display:block; you can remove this. divs are block by default */
/* text-align: left; remove this it is the default */
/* remove the height & width let them default */
/* remove font family and let it inherit from the body unless you want to change it *//* this div does need to be told to contain it's floated children so float it left with a 100% width */
font-weight: bold;
background-color: Khaki;
float: left;
width: 100%;
margin-bottom: 7px; /* if required */
}#menu a{
/* remove the font family it will inherit from the #menu div */
/* display: block; /* remove this as float automatically makes a div display: block */
/* font-weight:bold; /* this will inherit from #menu div */
/* width:auto; height: auto; */ /* remove width & heights settings this is the default */text-decoration: none;
font-size:15px;
line-height: 33px; /* same as search box to maintain vertical centering of text */
padding: 0 2%; /* remove top/bottom padding as line height will vertically center text */
color:black;
background-color: Khaki;
float: left;
display: inline; /* this is not required but is sometimes recommended to use against IE bugs.. all other browsers ignore it on a floated element */
margin-right: 1px;
text-align:center;
}#menu a:hover {
color: white;
text-decoration:none;
background-color: DarkKhaki;
/* background-repeat:no-repeat; /* no need for background-repeat if no image */
}#searchbox {
/*height:33px;*/ /* remove height */
/* position:relative; *//* not required unless you're positioning something inside here and it looks like you're not */background-color: Khaki;
float: right; /* might look better at the right? but it can go either way */
width:350px;
}#cse-search-box{
/* float:left; /* not required it's inside a floated div already and will default to beside the floated search text */
margin: 0; /* add this to remove defaults off form */
padding: 0 10px;
line-height: 33px; /* stick with the same line-height for vertical centering */
}#search-box-text{
float:left;
margin-right: 10px; /* make gap betwwen text and box */
line-height: 33px; /* this vertically centers text, no need for padding */
/*
padding-left:8px;
padding-top: 5px ;
*/
letter-spacing: -0.05em;
font-size:16px;
color: DarkGray;
}.cse-box-style{
height: 20px;
width: 250px;
}/* header END */
/* if the spacer is a decorative image do it like this so you can remove the height from the HTML */
/* if this is simply a blank spacer, remove it altogether and use margins on the row divs to create gap */
/* I'm assuming the latter and have put the margin on the rows and removed the spacer divs from the HTML */
/*
.spacer{
background: #ccc url(img/spacer.gif);
height: 7px;
font-size: 0;
line-height: 0;
}
*/.row {
background: #dad; /* temporary color to visualise rows and that they contain their children */
float: left; /* to contain child float boxes */
width: 100%; /* fit width of overall wrapper */
margin: 0 0 7px 0; /* instead of spacer divs */
}/** don't call it adbox these divs are on block lists **/
.abox {
font-size:100%;
color:black;
font-weight:bold;
text-align:center;
border: 4px solid #000; /* border color is overruled depending on yell or blu classes below */
float: left;
/* width: 100% - to be overruled by other classes when required but it can't be 100% as long as borders and padding are involved
so in this case it needs to be the wrapper width 1020px - padding & borders */
width: 1012px; /* = 1020 - 4px - 4px borders*/
}.pad {
padding: 5px; /* can be overruled by specific classes below but remember to count it in the width */
}.yell {
background: Khaki;
border-color: DarkKhaki;
}.blu {
background:#8DC3E9;
border-color: #4C88BE;
}.b-left {width: 292px; margin-right:5px; /* actual width = 292+8px border = 300px */}
.b-mid {width: 492px; margin-right:5px; /* actual width = 492+8px border = 500px */}
.b-right {width: 202px; /* actual width = 202 + 8px border = 210px */}
/* total widths of these three divs = 1010px + 5px + 5px margins between divs = 1020px = wrapper width */.b-left, .b-mid,.b-right {height: 200px; /* this is temporary to show the boxes just now do not restrict with a height unless it's only images that are in them */ }
p {line-height: 20px; margin: 0.5em 0; /* this is only temporary to add temp content/height in first box */}</style>
</head>
<body>
<div id="idwrapper">
<div id="header">
<div id="bitmaplogo">image in here</div><div id="menu">
<a href="/articles">Articles</a>
<a href="/guides">Guides</a>
<a href="/news">News</a>
<a href="/join">JOIN!</a>
<a href="/disclaimer">Disclaimer</a>
<a href="/sitemap">Sitemap</a><div id="searchbox">
<div id="search-box-text">Search</div>
<form id="cse-search-box" action="http://example.com/search-results/" name="cse-search-box">
<input type="hidden" value="p" name="cx" /><input type="hidden" value="FORID:9" name="cof" /><input type="hidden" value="UTF-8" name="ie" />
<input class="cse-box-style" type="text" size="20" name="q" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://example.com/watermark.gif) no-repeat scroll left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" />
</form>
<!--<script src="http://www.example.com" type="text/javascript"></script>-->
</div><!-- searchbox -->
</div><!-- menu -->
</div><!-- header --><div id="content">content in here
<div class="row">
<div class="abox"><p>xx- your text Here! test</p></div>
</div><!-- row --><div class="row">
<div class="abox blu b-left">your text Here! test</div>
<div class="abox blu b-mid">your text Here! test</div>
<div class="abox blu b-right">your text Here! test</div>
</div><!--row--><div class="row">
<div class="abox yell b-left">your text Here! test</div>
<div class="abox yell b-mid">your text Here! test</div>
<div class="abox yell b-right">your text Here! test</div>
</div><!-- row --></div><!-- content -->
<div id="footer">footer in here</div>
</div><!-- idwrapper -->
</body>
</html>
/* layout START */
#idwrapper {
width: 1020px; /* set the overall page width here */
margin: 0 auto;
}Why did you specify "margin: 0 auto;"?
#bitmaplogo {
margin-left:20px;
background:url("http://example.com/image.jpg") no-repeat left bottom;
height: 50px; /* put height of your image in here */
/* this div (not the image) will also default to 100% wide until told otherwise */
}The background image is much smaller, I just wanted to give it a good margin on top inside the containing DIV, so I thought correct to specify a higher height making the image v-align bottom....
#menu {
/* display:block; you can remove this. divs are block by default */
/* text-align: left; remove this it is the default */
/* remove the height & width let them default */
/* remove font family and let it inherit from the body unless you want to change it */
/* this div does need to be told to contain it's floated children so float it left with a 100% width */
font-weight: bold;
background-color: Khaki;
float: left;
width: 100%;
margin-bottom: 7px; /* if required */
}Yes, I was coding the height otherwise it wouldn't show it'self.... BTW I didn't know that a DIV containg floats must float it self.... why is that?
#menu a{
/* remove the font family it will inherit from the #menu div */
/* display: block; /* remove this as float automatically makes a div display: block */
/* font-weight:bold; /* this will inherit from #menu div */
/* width:auto; height: auto; */ /* remove width & heights settings this is the default */
text-decoration: none;
font-size:15px;
line-height: 33px; /* same as search box to maintain vertical centering of text */Isn't there a way to say, vertical centering, with no need to specify height in px?
#cse-search-box{
/* float:left; /* not required it's inside a floated div already and will default to beside the floated search text */
margin: 0; /* add this to remove defaults off form */
padding: 0 10px;
line-height: 33px; /* stick with the same line-height for vertical centering */
}Without the "margin: 0" the element would wrap on the next "line" why is that?
then.... YEEEEEEKKKK!
I stumble upon your .pad .blu. .yell b-left b-mid and b-right, optimized classes and.... KUDOS to YOU!
THANKS, THANKS THANKS
Why did you specify "margin: 0 auto;"?
The background image is much smaller, I just wanted to give it a good margin on top inside the containing DIV, so I thought correct to specify a higher height making the image v-align bottom....
Yes, I was coding the height otherwise it wouldn't show it'self.... BTW I didn't know that a DIV containg floats must float it self.... why is that?
The parent of floaty children doesn't know it has any "real" (kids ;)) content and it doesn't stretch (hug them ;)).
Previously this needed all manner of encouragement, hacks, easyclearing, empty divs etc. Just search for clearing floats one day ;) - But now there are 2 legitimate ways to do it:
1. One is to add overflow and set it to anything other than visible. This is generally quite useful and stable but depending on what else is going on inside the div scrollbars might sometimes be generated.
2. The other is this one, to float the parent div too. I prefer to use this method if possible, i.e. when the parent is default 100% wide of a container or you know exactly what the explicit width should be set to - it just avoids having to think about method #1's possible scrollbars unnecessarily, though method #1 is just as good, it's a preference.
Isn't there a way to say, vertical centering, with no need to specify height in px?
Vertical centering is notoriously unintuitive in CSS :(, but there are ways it can be used. There is
vertical-align: middle;Without the "margin: 0" the element would wrap on the next "line" why is that?
I didn't even notice that as I removed the form margin by habit - it's actually the IE 3px jog bug I think, the form with it's margins left on are making IE think it needs another line to clear it properly.. whatever just goes to show these resets have their value ;)
the multi classes can have their uses ;) Glad you like them
Suzy
