Seemingly simple problem for new site design... can't shake it

[deronsizemore]

Ok, here's the beginnings of a preliminary design for my new site: Logo Gala (http://www.randomjabber.com/test)

Everything is fine (as far as I know) except for a little problem in IE7 (haven't checked 6) where the "Gallery" heading is getting double padding/margin top that isn't there in FireFox. I've changed, removed, and tweaked the padding settings from that h2 style and the styles directly above it (the "featuredInfo" section with the date, times favorited, and comments) and I cannot figure anything out.

Anyone have an idea what's up with that style to be doubling it in IE?

[davemcnally]

It may be your HTML that's the problem, I've just noticed a couple of things that look like errors in the featured section above the gallery. You have a couple of classes that include more than one class name. Each include the name for the particular element and then the clearfix class.

Here's what I mean:

<div class="logosSecondary clearfix">
<ul class="logosColors clearfix">
<ul class="featuredInfo clearfix">

So to me, it looks like logosSecondary, logosColors and featuredInfo should be ID's with clearfix following them as the class? I'm not sure if that's causing it but I could see it causing problems in IE, especially with they floats not being cleared.

Besides that, maybe take a look at a couple of the errors (besides the missing alt attributes) the validator gives for your code and fix those? IE can be funny about those too ;)

[deronsizemore]

It may be your HTML that's the problem, I've just noticed a couple of things that look like errors in the featured section above the gallery. You have a couple of classes that include more than one class name. Each include the name for the particular element and then the clearfix class.

Here's what I mean:

<div class="logosSecondary clearfix">
<ul class="logosColors clearfix">
<ul class="featuredInfo clearfix">

So to me, it looks like logosSecondary, logosColors and featuredInfo should be ID's with clearfix following them as the class? I'm not sure if that's causing it but I could see it causing problems in IE, especially with they floats not being cleared.

Besides that, maybe take a look at a couple of the errors (besides the missing alt attributes) the validator gives for your code and fix those? IE can be funny about those too ;)

Hey Dave,

Yeah the way I have the two classes is actually valid. It's just a way to add two classes to the same element when you separate them by a space. The "clearfix" hook is for clearing floated elements so I don't have to add extra markup to the html. I'll give the ID's a try after I fix the errors (didn't even think to look at those) just to see if that does make a difference.

[davemcnally]

Yeah I know the classes are valid, I meant the errors given by the validator and just that IE may be funny with classes named like that. I often do the same thing to clear floats - I should have been clearer in explaining what I said ;)

That was all I could think of. Initially, I presumed it would be a combination of some padding mixing with a margin but couldn't see anything causing it in the CSS..

[deronsizemore]

Got this figured out. Pretty simply once I realized what was happening. ;)

[SarahG]

Which was....?

[deronsizemore]

Which was....?


I'm not telling! :bigsmile:

It was just that I had given all h2's a padding top of 15px and then the "gallery" h2 I had also styled separately with additional padding top which was doubling the padding (like it should) in IE. Firefox was rendering how I wanted it to, but it was wrong in it's interpretation. Don't know why it was so hard to spot, but it took removing all extra margins/padding from those elements and adding back one at a time.