Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with CSS in Safari, Firefox, Chrome etc [modified]

    Hi,

    I am working on an aspx file which uses css. It displays fine in IE but not in Safari, Chrome, Firefox etc. I am trying to get my head around it but all in vain..
    When it get displayed in other browsers all the li jumps to the right only displaying only half of each li.
    What i think is the width(eg : width :67px for li.studylink a:active) given in the css is not being identified by other browsers.

    It would be very helpful if someone could help me sort it out. I am posting my html contents and css which doesn't gets displayed right.

    Screens attached.


    Thanks in advance.
    Payal



    CSS
    ----

    .HeaderMenu ul {float:right;height:20px;font-size:6pt;padding-top:2px;}
    .HeaderMenu li {display:inline;font-family:arial,arial,sans-serif;font-size:6pt;height:20px;padding:0 0 0 15px; }
    li.studylink a:link, li.studylink a:visited, li.studylink a:active {background-image:URL(/Test/Images/studylinkoff.jpg);background-repeat:no-repeat;background-position:left center;width:67px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
    li.studylink a:hover {background-image:URL(/Test/Images/studylinkon.jpg);background-repeat:no-repeat;background-position:left center;color:#000;text-decoration:none;height:100%; }
    li.home a:link, li.home a:visited, li.home a:active {background-image:URL(/Test/Images/home_off.gif);background-repeat:no-repeat;background-position:left center;width:67px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
    li.home a:hover {background-image:URL(/Test/Images/home_on.gif);background-repeat:no-repeat;background-position:left center;color:#000;text-decoration:none;height:100%; }
    li.print a:link, li.print a:active, li.print a:visited {background-image:URL(/Test/Images/print_off.gif);background-repeat:no-repeat;background-position:left center;width:80px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
    li.print a:hover {background-image:URL(/Test/Images/print_on.gif);background-repeat:no-repeat;background-position:left center; color:#000;text-decoration:none;height:100%; }

    HTML
    ------
    <table border="0" cellspacing="0" cellpadding="0" width="770" height="70">
    <tr>
    <td>
    <A id="a1" href="/Test/Info/Information/HomePage.aspx" runat="server">
    </A><img src="/Test/Images/Head.jpg" border="0">
    <div class="HeaderMenu">
    <ul>
    <li class="studylink">
    <a href="http://www.google.com/" title="Study Link. "></a>
    </li>
    <li class="home">
    <a href="http://www.yahoo.com/" title="Back to the Homepage. "></a>
    </li>
    <li class="print">
    <a href="#" onclick="javascriptrint();return false" title="Print this page. "></a>
    </li>
    </ul>
    </div>
    </td>
    </tr>
    </table>
    Attached Thumbnails Attached Thumbnails Problem with CSS in Safari, Firefox, Chrome etc [modified]-headerbug.jpg  

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,739
    Thanks
    41
    Thanked 191 Times in 190 Posts
    since you don't use the studylink and others as actual classes; more like identifiers, change all those "classes" to id's ... id="studylink"
    then do #studylink:hover {CSS for your restyle}

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for that.

    in CSS for li i used Display:block float:left

    li.home a:link, li.home a:visited, li.home a:active {display:block;float:left;background-image:URL(/Test/Images/home_off.gif);background-repeat:no-repeat;background-position:left center;width:67px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%; }
    li.home a:hover {background-image:URL(/Test/Images/home_on.gif);background-repeat:no-repeat;background-position:left center;color:#000;text-decoration:none;height:100%; }


    and in the aspx page i used

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    This sorted out my problem with other browsers.


  •  

    Posting Permissions

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