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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Menu Debugging through Css

    I have designed a site named http://www.bioedge.org/. The site has some CSS problem in IE7.

    In the Menubar of this site The rss feeds drop down is not working properly in IE7 (it disappears before you can click on BioEdge or MediaWatch). But, its work fine in Mozilla.

    Following is the code that I m using, this site is designed by Expression Engine :-




    <style type="text/css">

    .menu2 {
    float:left; width: 470px; font-family: verdana, arial,

    sans-serif; font-size:11px; border-top:1px solid #c00;
    background-image:

    url({path=../images/uploads/}bg_bot.jpg); repeat-x;
    margin:0 0 20px 0;
    color: #FFFFFF;
    margin-top: 0px;
    margin-right: -10px;
    margin-bottom: 0px;
    margin-left: 0px;
    align:center;
    }
    .menu2 ul {
    padding:0;margin:0;list-style-type:none;
    }
    .menu2 ul li {
    float:left; position:relative;
    }
    .menu2 ul li.group {display:block; text-indent:30px;

    background:#666; color:#ff0; width:152px; padding:4px

    0;}

    .menu2 ul li a, .menu2 ul li a:visited {
    float:left; display:block; text-decoration:none;

    color:#FFFFFF; padding:0px 16px; line-height:25px;

    height:30px;
    }

    .menu2 ul li:hover {width:auto;}

    .menu2 ul li a:hover {background:

    url(../../../Documents%20and%20Settings/Mithilesh/Desktop

    /images/sub2a.gif); color:#FF9900;}

    .menu2 ul li:hover a {background:

    url(../../../Documents%20and%20Settings/Mithilesh/Desktop

    /images/sub2a.gif); color:#FF9900;}

    .menu2 ul li ul {
    display: none;
    }
    .menu2 table {
    margin:0; border-collapse:collapse;font-size:11px;

    position:absolute; top:0; left:0;
    }

    /* specific to non IE browsers */
    .menu2 ul li:hover ul {
    display:block; position:absolute;top:29px;

    background:;margin-top:1px; left:0; width:152px;
    }

    .menu2 ul li:hover ul.scroller {
    height:138px; width:172px; overflow:auto;}

    .menu2 ul li:hover ul.endstop {
    left:-90px;
    }
    .menu2 ul li:hover ul li ul {
    display: none;
    }
    .menu2 ul li:hover ul li a {
    display:block; background: #41627E;

    color:#fff;height:auto;line-height:15px;padding:4px 16px;

    width:120px;
    }
    .menu2 ul li:hover ul li a.drop {
    background:#FFFFFF;
    }
    .menu2 ul li:hover ul li a:hover {
    color:#FF9900; background: #888;
    }
    .menu2 ul li:hover ul li a:hover.drop {
    background:#888; color:#ff0;
    }
    .menu2 ul li:hover ul li:hover ul {
    display:block; position:absolute; left:153px; top:-70px;

    color:#FFFFFF; left:152px; height:138px; width:172px;

    overflow:auto; background:#FFFFFF;
    }
    .menu2 ul li:hover ul li:hover ul li a {background:#888;}
    .menu2 ul li:hover ul li:hover ul li.group {width:152px;

    padding:5px 0;}


    .menu2 ul li:hover ul li:hover ul.left {
    left:-200px;
    }
    .menu2 ul li:hover ul li:hover ul li a:hover

    {background:#666; color:#0ff;}



    /* specific to IE5.5 and IE6 browsers */
    .menu2 ul li a:hover ul {
    display:block;position:absolute;top:30px; top:29px;

    background:#42688F;left:0; margin-top:1px;
    }
    .menu2 ul li a:hover ul.scroller {
    height:138px; overflow:auto;}

    .menu2 ul li a:hover ul.endstop {
    left: -90px;
    }
    .menu2 ul li a:hover ul li a {
    display:block; color:#fff; height:1px; line-height:15px;

    padding:4px 16px; width:152px; w\idth:120px;
    }
    .menu2 ul li a:hover ul li a.drop {
    background:#888; padding-bottom:5px;
    }
    .menu2 ul li a:hover ul li a ul {
    visibility:hidden; position:absolute; height:0; width:0;
    }
    .menu2 ul li a:hover ul li a:hover {
    color:#ff0; background: #888;
    }
    .menu2 ul li a:hover ul li a:hover.drop {
    background: #888; color:#ff0;
    }
    .menu2 ul li a:hover ul li a:hover ul {
    visibility:visible; position:absolute; top:-69px; t\op:-70px;

    color:#000; left:152px; height:138px; width:170px;

    overflow:auto; background:#888;
    }
    .menu2 ul li a:hover ul li a:hover ul.left {
    left:-170px;
    }
    .menu2 ul li a:hover ul li a:hover ul li a:hover

    {background:#666; color:#0ff;}


    .left {clear:both;}


    </style>

    <html>
    <body>

    <table width="938" border="0" cellspacing="0"

    cellpadding="0">
    <tr>
    <td color:#FFFFFF >
    <div class="menu2">
    <ul>
    <li><a href="{path=site/index}"

    class="menu2one">home</a></li>
    </ul>


    <ul>
    <li><a href="{path=bioethics/about_us}"

    class="menu2two">about us</a></li>
    </ul>


    <ul>
    <li><a href="{path=bioethics/contact}"

    class="menu2three">contact us</a></li>
    </ul>


    <ul>
    <li><a href="{path=archive/archive_display}"

    class="menu2four">archive</a></li>
    </ul>

    <ul>
    <li><a href="" class="menu2five">rss feeds &#187
    <table><tbody><tr><td>
    <ul>
    <li><a

    href="http://www.bioedge.org/index.php/bioethics/rss_bioe

    dge/">BioEdge</a></li>
    <li><a

    href="http://www.bioedge.org/index.php/bioethics/rss/">M

    ediaWatch</a></li>
    </ul>
    </td></tr></tbody></table>
    </li>
    </ul>
    </td>
    <td class="menu2" height=27px

    margin-right:10px;>{embed="bioethics/search"}</td>
    </div>
    </tr>
    </table>
    </body>
    </html>



    Pls, give me a urgent reply, I m waiting for ur quick &

    positive reply.

    Thanks.
    Debasish

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There are numerous errors, 12css and 51mark-up. Also no Doctype.

    Try validating at http://validator.w3.org/

    Frank
    Last edited by effpeetee; 05-15-2008 at 05:38 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    I got it down to 3 CSS errors and about 5 HTML errors. In the future, please enclose your code with the [ code][ /code] tags.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    .menu2 {
    float:left; 
    width:470px;
    font-family: verdana, arial,sans-serif;
    font-size:11px;
    border-top:1px solid #c00;
    background-image:url(../images/uploads/bg_bot.jpg) repeat-x;
    margin:0 0 20px 0;
    color:#FFFFFF;
    align:center;
    margin:0 -10px 0 0;
    }
    
    .menu2 ul {
    padding:0;
    margin:0;
    list-style-type:none;
    }
    
    .menu2 ul li {
    float:left;
    position:relative;
    }
    
    .menu2 ul li.group {
    display:block;
    text-indent:30px;
    background-color:#666;
    color:#ff0;
    width:152px;
    padding:4px;
    }
    
    .menu2 ul li a, .menu2 ul li a:visited {
    float:left;
    display:block;
    text-decoration:none;
    color:#FFFFFF;
    padding:0px 16px;
    line-height:25px;
    height:30px;
    }
    
    .menu2 ul li:hover {
    width:auto;
    }
    
    .menu2 ul li a:hover {
    background:url(../../../Documents&#37;20and%20Settings/Mithilesh/Desktop/images/sub2a.gif);
    color:#FF9900;
    }
    
    .menu2 ul li:hover a {
    background:url(../../../Documents%20and%20Settings/Mithilesh/Desktop/images/sub2a.gif);
    color:#FF9900;
    }
    
    .menu2 ul li ul {
    display:none;
    }
    
    .menu2 table {
    margin:0;
    border-collapse:collapse;
    font-size:11px;
    position:absolute;
    top:0;
    left:0;
    }
    
    /* specific to non IE browsers */
    .menu2 ul li:hover ul {
    display:block;
    position:absolute;
    top:29px;
    background:;
    margin-top:1px;
    left:0;
    width:152px;
    }
    
    .menu2 ul li:hover ul.scroller {
    height:138px;
    width:172px;
    overflow:auto;
    }
    
    .menu2 ul li:hover ul.endstop {
    left:-90px;
    }
    
    .menu2 ul li:hover ul li ul {
    display: none;
    }
    
    .menu2 ul li:hover ul li a {
    display:block;
    background:#41627E;
    color:#fff;
    height:auto;
    line-height:15px;
    padding:4px 16px;
    width:120px;
    }
    
    .menu2 ul li:hover ul li a.drop {
    background:#FFFFFF;
    }
    
    .menu2 ul li:hover ul li a:hover {
    color:#FF9900;
    background:#888;
    }
    
    .menu2 ul li:hover ul li a:hover.drop {
    background:#888;
    color:#ff0;
    }
    
    .menu2 ul li:hover ul li:hover ul {
    display:block;
    position:absolute;
    left:153px;
    top:-70px;
    color:#FFFFFF;
    height:138px;
    width:172px;
    overflow:auto;
    background:#FFFFFF;
    }
    
    .menu2 ul li:hover ul li:hover ul li a {
    background:#888;
    }
    
    .menu2 ul li:hover ul li:hover ul li.group {
    width:152px;
    padding:5px 0;
    }
    
    .menu2 ul li:hover ul li:hover ul.left {
    left:-200px;
    }
    
    .menu2 ul li:hover ul li:hover ul li a:hover {
    background:#666;
    color:#0ff;
    }
    
    /* specific to IE5.5 and IE6 browsers */
    .menu2 ul li a:hover ul {
    display:block;
    position:absolute;
    top:30px;
    background:#42688F;
    left:0;
    margin-top:1px;
    }
    
    .menu2 ul li a:hover ul.scroller {
    height:138px;
    overflow:auto;
    }
    
    .menu2 ul li a:hover ul.endstop {
    left: -90px;
    }
    
    .menu2 ul li a:hover ul li a {
    display:block;
    color:#fff;
    height:1px;
    line-height:15px;
    padding:4px 16px;
    width:152px;
    }
    
    .menu2 ul li a:hover ul li a.drop {
    background:#888;
    padding-bottom:5px;
    }
    .menu2 ul li a:hover ul li a ul {
    visibility:hidden;
    position:absolute;
    height:0;
    width:0;
    }
    
    .menu2 ul li a:hover ul li a:hover {
    color:#ff0;
    background:#888;
    }
    
    .menu2 ul li a:hover ul li a:hover.drop {
    background:#888;
    color:#ff0;
    }
    
    .menu2 ul li a:hover ul li a:hover ul {
    visibility:visible;
    position:absolute;
    top:-69px;
    color:#000;
    left:152px;
    height:138px;
    width:170px;
    overflow:auto;
    background:#888;
    }
    
    .menu2 ul li a:hover ul li a:hover ul.left {
    left:-170px;
    }
    
    .menu2 ul li a:hover ul li a:hover ul li a:hover {
    background:#666;
    color:#0ff;
    }
    
    .left {
    clear:both;
    }
    </style>
    
    </head>
    
    <body>
    
    <table width="938" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td color="#FFFFFF">
    <div class="menu2">
    <ul>
    <li><a href="{path=site/index}" class="menu2one">home</a></li>
    <li><a href="{path=bioethics/about_us}" class="menu2two">about us</a></li>
    <li><a href="{path=bioethics/contact}" class="menu2three">contact us</a></li>
    <li><a href="{path=archive/archive_display}" class="menu2four">archive</a></li>
    <li><a href="" class="menu2five">rss feeds &#187;</a></li>
    </ul>
    
    <ul>
    <li><a href="http://www.bioedge.org/index.php/bioethics/rss_bioedge/">BioEdge</a></li>
    <li><a href="http://www.bioedge.org/index.php/bioethics/rss/">MediaWatch</a></li>
    </ul>
    <td class="menu2" height="27" margin-right="10">{embed="bioethics/search"}</td>
    
    </div>
    </td>
    </tr>
    </table>
    
    </body>
    </html>
    There's still a few things in there that I don't think you need, but I can't really be sure. It says in your CSS things like "/* specific to non IE browsers */", and such, but... There's nothing actually applying it to just those browsers. You would need conditional comments or another method of doing that.
    Last edited by Aceramic; 05-15-2008 at 06:05 PM.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have put the result here. But there is no display.

    http://exitfegs.co.uk/15e.html

    This is as far as I got. It appears to work.

    http://exitfegs.co.uk/15d.html

    .

    Frank
    Last edited by effpeetee; 05-15-2008 at 09:53 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have just updated this. See if it is OK.

    http://exitfegs.co.uk/15d.html

    You may have to trim the table cells. It's not my field I'm not very good at tables..
    Note that in html you do NOT put px after the figure. width="120" is the style.
    For css - width:"120px" ; is used.

    Frank
    Last edited by effpeetee; 05-15-2008 at 10:00 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Here is a screenshot.

    Frank
    Attached Thumbnails Attached Thumbnails Menu Debugging through Css-screenhunter_01-may.-16-15.47.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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