Thread: Links in Opera

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2007
    Posts
    90
    Rep Power
    12

    Links in Opera


    See how links went up. how to put them in middle


  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Which other browsers are you testing in?

    Which doctype are you using?

    Please show us an example page (or post your HTML and CSS here).
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2007
    Posts
    90
    Rep Power
    12
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">


    I tested in IE8, FF, Chrome and OPERA. In all browsers links are in middle in opera not

    .html
    Code:
    <tr>
        <td colspan="2" align="center" valign="middle" id="links"><div id="link-left"></div>
            <div id="link-middle" align="center"><a id="current" href="index.php">Home</a> <a href="about.php">About</a> <a href="terms.php">Terms of use</a> <a href="contact.php">Contact</a> </div>
            <div id="link-right"></div></td>
      </tr>
    css
    Code:
    div#link-left
    {
    float:left;
    background-image:url(images/link-left.png);
    background-repeat:no-repeat;
    width:14px;
    height:26px;
    }
    
    div#link-right
    {
    float:left;
    background-image:url(images/links-right.png);
    background-repeat:no-repeat;
    width:10px;
    height:26px;
    }
    
    div#link-middle
    {
    background-image:url(images/links-middle.png);
    background-repeat:repeat-x;
    float:left;
    width:956px;
    height:26px;
    
    }
    
    div#link-middle a
    {
    font-weight:bold;
    color:#7B7B7B;
    text-decoration:none;
    margin-left:20px;
    font-size:13px;
    }
    
    div#link-middle a#current
    {
    color:#0078B6;
    }
    
    td#links
    {
    padding-top:5px;
    }
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Try giving "line-height: 1.5em;" to "div#link-middle".
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Location
    Texas
    Posts
    167
    Rep Power
    59
    That fixes it on my end.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2007
    Posts
    90
    Rep Power
    12
    Thanks a lot it works

IMN logo majestic logo threadwatch logo seochat tools logo