SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member digitalninja's Avatar
    Join Date
    Mar 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Line Height in IE

    I am a student working on a school project.
    My problem is this:
    In IE the line-height seems to be larger compared to that of FireFox in the "SELECT DEALERSHIP BELOW" section.

    Any ideas how to get the line-height to be the same in both browsers?

    URL: http://reyalexander.com/

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The first problem is that you have an invalid list because you can't put block level elements inside an anchor. You can only have inline content inside inline elements.

    The anchors should be inside a block level tag and not the other way around.

    Secondly the block level tag should not be an h1 because you would usually only use 1 h1 per page and any more than that makes no semantic sense and will more likely bee seen as an attempt to spam the search engines resulting in penalisation.

    Thirdly you have used a list but you have used only one list element and then divided the anchors with hr's which makes a nonsense of using a list oin the first place. Each link in that list should be a separate list item. You also have a p tag around the whole thing which is also invalid as p tags can only contain inline content.

    The hr's are almost impossible to style correctly between browsers and are not needed in your example because you can simply use css to put a border on the list.

    If you float the list and the anchor then you avoid the whitespace bugs in IE and this code renders exactly the same size for me in firefox and IE.

    Code:
    #sidebar {
        margin: 10px, 0px, 0px, 0px;
        float: left;
      background: url(http://reyalexander.com/images/sidebar2.jpg) repeat-y;
        width: 205px;
        padding: 5px 10px 20px 10px;
        text-align: justify;
    }
    
    #sidebar ul {
        padding: 0;
        margin: 0;
        font-size: 0.8em;
        list-style: none;
    }
    #sidebar li{
        border-bottom: 1px dotted #d5e3eb;
        width:205px;
        padding:0;
        font-weight:bold;
        float:left;
        clear:left;
    }
    #sidebar ul h2{margin:0}
    #sidebar li a{
            font-size:95%;
            width:205px;
            float:left;
            padding:1px 0;
    }
    #sidebar ul a:hover { color: #2b4f70; text-decoration: underline; }
    The html should look like this:

    Code:
        <div id="sidebar">
            <ul>
                <li><h2>SELECT DEALERSHIP BELOW:</h2></li>
                <li><a href="http://www.carlblackchevy.com"> Nashville, TN </a></li>
                <li><a href="http://www.officialbusinesschoicedealer.com"> Nashville, TN (Commercial) </a></li>
                <li><a href="http://www.CarlBlackRoswell.com"> Roswell, GA</a></li>
                <li><a href="http://www.CarlBlackHummer.com"> Roswell, GA (Hummer) </a></li>
                <li><a href="http://www.CarlBlackWoodstock.com"> Woodstock, GA</a></li>
                <li><a href="http://www.CarlBlackKennesaw.com"> Kennesaw, GA</a> </li>
                <li><a href="http://www.officialbusinesschoicedealer.com"> Kennesaw, GA (Commercial) </a></li>
                <li><a href="http://www.CarlBlackHiram.com"> Hiram, GA</a></li>
                <li><a href="http://www.CarlBlackofOrlando.com"> Orlando, FL</a></li>
                <li><a href="http://www.CarlBlackSarasota.com"> Sarasota, FL</a></li>
                <li><a href="http://www.officialbusinesschoicedealer.com"> Sarasota, FL (Commercial)</a></li>
            </ul>
        </div>
    The div id="sidebar isn't really needed either as you could have applied the styles to the ul instead and saved another div.

    Hope that helps.

  3. #3
    SitePoint Member digitalninja's Avatar
    Join Date
    Mar 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B you are a genius. I love you. Can you recommend any good CSS books for me as I am a newbie.

  4. #4


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
  •