SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To clear the gap in IE you need to use overflow:hidden here.
    Code:
    .sublink_top {
        background-image: url(http://r-interactive.net/clients/avenues/images/inside_submenu_top.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        height: 11px;
        width: 242px;
         overflow:hidden
    }
    IE will always stretch the height of an element to accommodate the content which in this case is the current fontsize/lineheight which is greater than 11px. Just add overflow:hidden to any elements that are smaller than the current font-size to stop IE stretching them.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    For your second question then something like this should work.

    Code:
    /* the sub menu start here*/
    ul#submenu {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #FFFFFF;
        padding: 0;
        vertical-align: middle;
        font-weight: bold;
    }
    ul#submenu li {
        list-style: none;
        width: 242px;
        float:left;
        clear:left;
        height: 35px;
        line-height:35px;
    }
    ul#submenu a {
        color: #FFFFFF;
        background-image: url(http://r-interactive.net/clients/avenues/images/inside_submenu_img.jpg);
        background-repeat: no-repeat;
        background-position: left;
        width:242px;
      float:left;
        height: 35px;
    }
    ul#submenu a:hover {
        background-image: url(http://r-interactive.net/clients/avenues/images/inside_submenu_img_mo.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        color: #9F370C;
    }
    ul#submenu li.last span {
        border-bottom:none
    }
    ul#submenu a span{
        width:199px;
        margin:0 0 0 15px;
        text-indent:10px;
        float:left;
        height:34px;
        overflow:hidden;
        border-bottom:1px dotted #fff;
    }
    
    /* the sub menu ends here*/

    Code:
    <div id="sublink">
                    <div class="sublink_top"></div>
                    <div class="sublink_main">
                        <ul id="submenu">
                            <li><a href="#1"><span>Recent Jobs</span></a></li>
                            <li><a href="#2"><span>Training</span></a></li>
                            <li class="last"><a href="#3"><span>Your Page</span></a></li>
                        </ul>
                    </div>
                    <div class="sublink_bottom"></div>
                </div>

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

    You can add multiple classes as long as you separate them by a space.

    e.g.
    Code:
     <li class="last active">
    You can read more about multi class elements here.

    (Note that you can't do the same thing with IDs as ID's must be unique to the element.)

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

    I have replied in the other thread with something that may help


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
  •