View Full Version : problem clearing floats..

02-06-2007, 09:05 AM
I am having a slight problem clearing my floats and making the text on my website appear correctly in both Mozilla and Internet Explorer.


I used the following code to attempt to clear floats and fix the problem:

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

I then added class="clearfix" to my container that is floating as you can see, and the problems are still happening. Any ideas? Thanks


02-06-2007, 04:06 PM
What seems to be the problem? I only have IE6.0 available and didn't see any glaring errors.

02-06-2007, 04:38 PM
Hello chbrandt,
I didn't look at it in IE6 but it does need a little work to look right in IE7 and FF.
-In each of your #who, #design and #quote divs you have an extra divs with no id that you are not styling. Get rid of the extra divs.
-In your footer, your misusing a ul.
-Style switcher not working.

Check the validator to fix the rest of the problems.

[edit] actually, it looks right in IE7 right now.

02-06-2007, 05:59 PM
ok...the ul is one of the problems I was overlooking...thanks

I originally made it look right in Firefox but then it didnt look right in IE so I changed it to look right in IE just messing around and I can't figure out how to make it look right in both. I think there is something wrong with the floats clearing but that doesn't seem to be something I know how to fix. I'll get rid of the div's and see if that will fix it and if not I'll post again. Thanks


02-06-2007, 06:15 PM
Well fix your coding errors first.
See them here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.audiadesign.com%2Fsite.htm).

02-06-2007, 06:22 PM
After you fix your errors, if you're still having trouble clearing floats (I don't think that's the problem in this case) there is a much easier way. Look at this page. (http://www.quirksmode.org/css/clearing.html)