SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Todd Temple > T2 Design

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Maybe try float:left instead of display: inline?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Maybe try float:left instead of display: inline?
    Changed it to float: left and now the list items are stacked. Weird.
    Todd Temple > T2 Design

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    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?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm seeing that problem in IE7 - the Twitter, FB, etc. icons are stacked.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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...

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    A quick fix is to do something like this.

    Code:
    #left {
        width: 460px;
        margin: 0 122px 0;
      display:inline;/* ie6 double margin bug*/
    }
    #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;
        /*padding: 0 0 0 715px;  remove */
        float: left;
        margin: 2px 15px 0 0;
    }
    #socials ul {
        list-style: none;
        float: left;
    }
    #socials li {
        display: inline;
        float: left;
    }
    .inner{float:right;}
    Then add an inner div here.

    Code:
    <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.

  8. #8
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    A quick fix is to do something like this.
    Thanks Paul! That did the trick.
    Todd Temple > T2 Design

  9. #9
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    why is that a h4 -- you have no h3, and it's not a subsection of the h2's...
    Thanks! Changed it to an h3.


    Quote Originally Posted by deathshadow60 View Post
    I suggest moving all your 'end' comments BEFORE the element being closed...
    Thanks! Moved comments before closing div tags.

    Quote Originally Posted by deathshadow60 View Post
    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...
    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!
    Todd Temple > T2 Design


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •