7 replies [Last post]
chbrandt
Offline
Regular
Last seen: 14 years 15 weeks ago
Timezone: GMT-6
Joined: 2007-02-05
Posts: 12
Points: 0

I am trying to use Tony's method to clear floats because I believe this will fix the problem I'm having with IE and Mozilla showing different things. I tried adding:

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

to the end of my CSS file and saving it, and it didn't make any changes. I'm not sure if I need to add

somewhere in my website coding? And if so, where? I've tried it in several places to no avail. I'm still a complete beginner with some guidance from someone else on CSS but just having trouble with this one.

http://www.audiadesign.com/site.htm

Thanks
Chris

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Yes You'll need to add the

Yes

You'll need to add the code

class="floatcontainer"

to the html div causing the problem, which is obviously a floated div, and comes before where the following bit sits over the bottom of where you wanted the div to finish

chbrandt
Offline
Regular
Last seen: 14 years 15 weeks ago
Timezone: GMT-6
Joined: 2007-02-05
Posts: 12
Points: 0

ok..added that piece of

ok..added that piece of code, and didn't see anything change on the page, still having the same problems..

http://www.audiadesign.com/site.htm

Thanks
Chris

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Try adding this style to the

Try adding this style to the start of your css:

p,div,li,ul{margin:0px}

Does that do it?

Kravvitz
Offline
Enthusiast
USA
Last seen: 8 years 42 weeks ago
USA
Timezone: GMT-4
Joined: 2006-10-02
Posts: 56
Points: 3

advice... and a question or two.

I suggest you read this: Tips on Debugging Layouts

A large part of the problem is that you set large top paddings on "#design div" and "#quote div" instead of setting a min-height on "#who div". Why do you have those three extra

s anyway?

What happens when someone can't see the background image? No one will know that there are headers for the sections. I strongly recommend that you split the page up and use more CSS image replacement for the headers.

You should also fix your XHTML errors.

ClevaTreva, don't you mean the clearfix class? I don't see floatcontainer defined in the stylesheet.

Code for FF (and/or Opera), apply fixes for IE, not vice versa.
Dynamic Site Solutions

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Kravvitz wrote:ClevaTreva,

Kravvitz wrote:
ClevaTreva, don't you mean the clearfix class? I don't see floatcontainer defined in the stylesheet.

Yeh, sorry, I was looking at what I called that css class in my own templates, not the OP's code, whoops

chbrandt
Offline
Regular
Last seen: 14 years 15 weeks ago
Timezone: GMT-6
Joined: 2007-02-05
Posts: 12
Points: 0

Wow, these things have

Wow, these things have seemed to fix the problems, especially

p,div,li,ul{
margin:0px
}

THANKS so much! The text is aligned properly now, there is only one slight problem. The footer doesn't show up at all in IE...only in Mozilla...weird

Thanks

Chris

chbrandt
Offline
Regular
Last seen: 14 years 15 weeks ago
Timezone: GMT-6
Joined: 2007-02-05
Posts: 12
Points: 0

Nevermind the problem from

Nevermind the problem from before, there was a W3C error I hadn't corrected yet, and that turned out to be the problem. Thanks for the link to check that out. Appreciate the help!! Smile

Chris