2 replies [Last post]
roscoe
roscoe's picture
Offline
Enthusiast
Last seen: 14 years 11 weeks ago
Joined: 2006-03-09
Posts: 138
Points: 0

Below is my XHTML and CSS example of clearfix that isn't working for FF2 but it is in IE6/7. Any idea what I am doing wrong? I must be missing something simple. Thank you.

XHTML

Test - Browser Page
@import "css/style.css";

Another Heading

this is test text

Header

CSS

#page {
width: 770px;
margin: 0 auto;
background: #fff url("x../img/bg-page.jpg") repeat-x;
font-family: Helvetica, verdana;
}

/* Information
----------------------------------------------------------- */
#info {background-color: red;}
#info h3 {color: #fff; font-size: 24px;}
#info p.help-question {margin: 10px 0 0 20px; }
#info div#client {width: 416px; height: 70px; float: right; background-color: #000;}
#info div#client h3 {color: #fff; font-size: 20px; text-align: center; margin-top: 10px;}
#info div#client p {text-align: center; margin-top: 10px; color: #fce391;}

/* Clearfix
----------------------------------------------------------- */
.clearfix:after {content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 21 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try to enclose your floats

Try to enclose your floats by adding overflow:auto; in #info

roscoe
roscoe's picture
Offline
Enthusiast
Last seen: 14 years 11 weeks ago
Joined: 2006-03-09
Posts: 138
Points: 0

thank you. worked like a

thank you. worked like a charm.