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

    CSS Vertical Menu Indenting in Explorer

    I am having issues with my CSS displaying properly in Explorer 7 (of course!). I have posted a generic example so you may see what I am working with as it provides the same end result I am getting. Pretend I have a table here... this is the way I have to do it, so I won't get too much into why. It is displaying properly in Firefox, but when its viewed in Explorer 7, it massively indents the first link, and bumps over the ones below it too but not as far.

    Can anyone help me see what I am missing here... Sometimes when I look at code too long, my mind will over complicate things and I fail to see the itty bitty mistakes. Thanks, or if someone else has a way to control how it's viewed in explorer through *html {} hack, anything!!! any help!!! will do wonders for my sanity. Thanks!

    If you copy from this line below and stick the whole thing in an HTML sheet you will see what I mean.



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    <!--
    window.onload=show;
    function show(id) {
    var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
    <style>
    body {
    margin-top:0px;
    margin-bottom:0px;
    margin-right:0px;
    margin:0px;
    }
    .main_bg {
    background-image:url(images/main_bg_gradient.gif);
    background-repeat:repeat-x;
    background-color:#7AAFDB;
    }
    .top_bg {
    background-image:url(images/top_bg.gif);
    background-repeat:repeat-x;
    background-color:#FFFFFF;
    height:197px;
    }

    .container {
    vertical-align:top;
    margin-left:85px;
    margin-top:0px;
    }
    .col {
    margin-top:0px;
    vertical-align:top;
    font-family:Helvetica, Arial, sans-serif;
    padding-top:0px;
    }
    .col_rside {
    background-image:url(images/2col_06.gif);
    background-repeat:repeat-y;
    width:17px;
    height:100&#37;;
    }
    .col_lside {
    background-image:url(images/2col_04.gif);
    background-repeat:repeat-y; width:14px;
    }
    .col_bottom {
    background-image:url(images/2col_10.gif);
    background-repeat:repeat-x;
    }
    .col_top_rc {
    background-image:url(images/2col_03.gif);
    background-repeat:no-repeat;
    }
    .col_top_lc {
    background-image:url(images/2col_01.gif);
    background-repeat:no-repeat;
    height:14px;
    }
    .col_top {
    background-image:url(images/2col_02.gif);
    background-repeat:no-repeat;
    }
    .colb_top {
    background-image:url(images/heading_blue_bg.gif);
    background-repeat:repeat-x;
    }
    .colb_bottom {
    background-image:url(images/testnav2_06b.gif);
    background-repeat:repeat-x;
    width:180px;
    }
    .colb_rc {
    background-image:url(images/2col_11.gif);
    background-repeat:no-repeat;
    width:17px;
    height:17px;
    }
    .colb_lc {
    background-image:url(images/2col_08.gif);
    background-repeat:no-repeat;
    width:14px;
    height:17px;
    }

    .menu {
    margin-top:0px;
    vertical-align:top;
    padding-top:0px;
    }
    .menu_rside {
    background-image:url(images/testnav2_04.gif);
    background-repeat:repeat-y;
    height:100%;
    width:15px;
    }
    .menu_bottom {
    background-image:url(images/testnav2_06.gif);
    background-repeat:repeat-x;
    width:189px;
    }
    .menu_inside {
    background-color:#FFFFFF;
    padding-left:14px;
    padding-top:6px;
    }
    .menu_inside a {
    color:#000000;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    outline: none;
    padding:0px;
    }
    .menu_inside a:hover {
    background-image:url(nav_over.gif);
    background-repeat:repeat-x;
    visibility:visible;
    border-right:solid;
    border-left:solid;
    border-color:#96C1E6;
    border-bottom-color:#CCCCCC;
    border-bottom:thin;
    border-top:thin;
    padding:0px;
    }

    h1 {
    font-family:Helvetica, Arial, sans-serif;
    font-stretch:expanded;
    font-size:14px;
    text-align:center;
    color:#000000;
    text-transform:uppercase;
    }
    p {
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    text-align:justify;
    vertical-align:top;
    margin-bottom:10px;
    margin-top:0px;
    }
    a {
    color:#0063AF;
    }

    .bluebox {
    margin-top:0px;
    vertical-align:top;
    padding-top:0px;
    }
    .bluebox_inside {
    background-color:#FFFFFF;
    padding-left:14px;
    padding-top:6px;
    }
    .bluebox_in {
    background-color:#FFFFFF;
    padding-left:0px;
    padding-top:6px;
    }
    .bluebox_rside {
    background-image:url(images/menu-template_06.gif);
    background-repeat:repeat-y;
    width:17px;
    }
    .bluebox_top {
    background-image:url(images/menu-template_02.gif);
    background-repeat:repeat-x;
    height:44px;
    width:100%;
    }
    .bluebox_lside_top {
    background-image:url(images/menu-template_01.gif);
    background-repeat:no-repeat;
    height:44px;
    width:14px;
    }
    .bluebox_rside_top{
    background-image:url(images/menu-template_03.gif);
    background-repeat:no-repeat;
    height:44px;
    width:17px;
    }
    .bluebox_bottom {
    background-image:url(images/menu-template_08.gif);
    background-repeat:repeat-x;
    height:17px;
    width:100%;
    }
    .bluebox_lside_bottom {
    background-image:url(images/menu-template_07.gif);
    background-repeat:no-repeat;
    height:17px;
    width:14px;
    }
    .bluebox_rside_bottom {
    background-image:url(images/menu-template_09.gif);
    background-repeat:no-repeat;
    height:17px;
    width:17px;
    }
    .bluebox_inside a {
    color:#000000;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    outline: none;
    }
    .bluebox_inside a:hover {
    background-image:url(nav_over.gif);
    background-repeat:repeat-x;
    visibility:visible;
    border-right:solid;
    border-left:solid;
    border-color:#96C1E6;
    border-bottom-color:#CCCCCC;
    border-bottom:thin;
    border-top:thin;
    }
    .mid_length_divider {
    background-image:url(images/mid_length_divider.gif);
    background-repeat:no-repeat;
    width:402px;
    height:20px;
    }
    .full_length_divider {
    background-image:url(images/full_length_divider.gif);
    background-repeat:no-repeat;
    width:627px;
    height:20px;
    }

    img.floatLeft {
    float: left;
    margin-right:20px;
    }
    img.floatRight {
    float: right;
    margin-left:20px;
    }
    .boxHeaderFont {
    font-family: Arial, Helvetica, sans-serif;
    color:white;
    font-weight:bold;
    font-size:13px;
    background-image:url(images/menu-template_02.gif);
    }
    <!--
    body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
    }

    #menu {
    position: absolute; /* Menu position that can be changed at will */
    top: 0;
    left: 0;
    z-index:100;
    width: 100%; /* precision for Opera */
    }
    #menu dl {
    float: left;
    width: 12em;
    }
    #menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    border: 1px solid gray;
    margin: 1px;
    }
    #menu dd {
    display: none;
    border: 1px solid gray;
    }
    #menu li {
    text-align: center;
    background: #fff;
    }
    #menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    }
    #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    background: #eee;
    }
    #site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    padding: 5px;
    border: 1px solid gray;
    }

    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-position: inside;
    list-style-type: none;
    }
    </style>

    </head>

    <body>
    <tr><td colspan="2" class="menu_inside"><dt onclick="javascript:show('smenu1');"><p><a href="#">MAIN TITLE 1</a></p>
    </dt>
    <dd id="smenu1">
    <ul>
    <li><a href="#">name one</a></li>
    <li><a href="#">name two</a></li>
    <li><a href="#">name three</a></li><p></p>
    </ul>
    </dd>
    <dt onclick="javascript:show('smenu2');"><p><a href="#">MAIN TITLE 2</a></p>
    </dt>
    <dd id="smenu2">
    <ul>
    <li><a href="#">name one</a></li>
    <li><a href="#">name two</a></li>
    <li><a href="#">name three</a></li>
    <li><a href="#">name four</a></li>
    <li><a href="#">name five</a></li><p></p>
    </ul>
    </dd>
    <dt onclick="javascript:show('smenu3');"><p><a href="#">MAIN TITLE 3</a></p>
    </dt>
    <dt onclick="javascript:show('smenu4');"><p><a href="#">MAIN TITLE 4</a></p>
    </dt>
    </td>
    </tr>

    </body>
    </html>
    Last edited by iHATEsushi; 07-15-2008 at 04:22 PM. Reason: forgot to add something to the comments.


 

Posting Permissions

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