Aligning My H4 Tag

LINK-
Capture Productions | Knoxville Tennessee Video Production Company

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?

Todd

Maybe try float:left instead of display: inline?

Changed it to float: left and now the list items are stacked. Weird.

Hmm, I’m not seeing that. What browser are you seeing that in?

I’m seeing that problem in IE7 - the Twitter, FB, etc. icons are stacked.

  1. why is that a h4 – you have no h3, and it’s not a subsection of the h2’s…

  2. 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.

  3. 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…

A quick fix is to do something like this.


#left {
    width: 460px;
    margin: 0 122px 0;
  [B]display:inline;/* ie6 double margin bug*/[/B]
}
#socials {
    width: 885px;
    margin: 0 auto;
    height: 30px;
    padding: 0 40px;
    clear:both;
}
#socials h4 {
    text-transform: uppercase;
    color: #808080;
    font: 13px/22px 'TitilliumText22LBold', Arial, sans-serif;
[B]    /*padding: 0 0 0 715px;  remove */
    float: left;
    margin: 2px 15px 0 0;[/B]
}
#socials ul {
    list-style: none;
  [B]  float: left;[/B]
}
#socials li {
    display: inline;
 [B]   float: left;[/B]
}
[B].inner{float:right;}[/B]



Then add an inner div here.


<div id="socials">
 <div class="inner">
    <h4>Get Connected</h4>
    <ul>
        <li class="twitter"><a href="#">Twitter</a></li>
        <li class="facebook"><a href="#">Facebook</a></li>
        <li class="linkedin"><a href="#">Linkedin</a></li>
    </ul>
 </div>
</div>
<!-- end socials -->


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.

Thanks Paul! That did the trick.

Thanks! Changed it to an h3.

Thanks! Moved comments before closing div tags.

Curious how I could simplify the markup. I am sure it is possible, but I would like to see how to simplify it and learn from it. Thank you!