I have an H4 tag located directly above the footer area. It reads “Get Connected”. It aligns correctly in Firefox 3.6 PC, IE 8 & 9, and Safari but fails in IE 7, IE 6, and others.
How can fix this? Do I need to add a separate rule for the h4 in those browsers only?
why is that a h4 – you have no h3, and it’s not a subsection of the h2’s…
display:inline with text-align on the parent div should do the job… assuming you set the UL and the LI to inline as well. If you are going to do it with floats, you need them ALL to float.
your comment placement may in fact be part of the problem, at least for legacy IE once floats are involved… and FF can screw up on contents between floats too – which is why I suggest moving all your ‘end’ comments BEFORE the element being closed… and since </div> means something is being ended, do you really need to say “end”? so basically:
<!-- #socials –></div>
Might not be your problem, could be a contributor – in some future reskin having them the way you do now could cause whole sections of the page to fail to render in IE or worse, render twice.
Though I think you’ve got twice as many div as should be neccessary on such a simple layout, and none of your lower order heading tags make the least bit of sense…
You have to be careful with stacking left and right floats in IE6 because it stretches the element to 100% width.
If you float the element to the right then inner children should all be floated left and that seems to keep it stable. If you float left and right elements inside a widthless floated element then it will stretch to 100% wide.