Results 1 to 1 of 1

Thread: Drop Down Tabs (5 styles) - IE6 / IE7 problem

  1. #1
    Join Date
    Feb 2008
    Posts
    133
    Thanks
    16
    Thanked 2 Times in 2 Posts

    Question Drop Down Tabs (5 styles) - IE6 / IE7 problem

    Script: Drop Down Tabs (5 styles) - Example 2
    http://www.dynamicdrive.com/dynamici...roptabmenu.htm

    How to make menu bigger for cross browser?
    My attempts to edit the CSS breaks in ie6 and ie7?
    Code:
    .bluetabs{
    	background-color: #6699CC;
    }
    .bluetabs ul{
    	padding: 8px 0;
    	margin-left: 0;
    	margin-top: 1px;
    	margin-bottom: 0;
    	font: bold 12px Verdana;
    	list-style-type: none;
    	text-align: left; 
    }
    .bluetabs li{
    display: inline;
    margin: 0;
    }
    .bluetabs li a{
    	text-decoration: none;
    	padding: 8px 7px;
    	border: 1px solid #ccc;
    	border-width: 2px 2px 0 2px;
    	color: #fff;
    	background-color: #6699CC;
    }
    .bluetabs li a:visited{
    color: #fff;
    }
    .bluetabs li a:hover{
    color: #333;
    background-color: #f2f2f2;
    }
    .bluetabs li.selected{
    	color: #333;
    	background-color: #f2f2f2;
    }
    .bluetabs li.selected a{ 
    	color: #333;
    	background-color: #f2f2f2;
    }
    .bluetabs li.selected a:hover{ 
    text-decoration: none;
    }
    /* ######### Style for Drop Down Menu ######### */
    .dropmenudiv_b{
    position:absolute;
    top: 0;
    border: 2px solid #ccc; 
    border-width: 0 1px;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: #6699CC;
    width: 200px;
    visibility: hidden;
    list-style-type: none;
    }
    .dropmenudiv_b a{
    width: auto;
    display: block;
    text-indent: 5px;
    border: 0 solid #ccc; 
    border-top-width: 1px;
    padding: 2px 0;
    text-decoration: none;
    color: #fff;
    }
    #dropmenu1_a a.last, .dropmenudiv_b a.last  {
    	border: 1px solid #ccc; 
    	border-bottom-width: 1px;
    }
    
    * html .dropmenudiv_b a{ 
    width: 100%;
    }
    .dropmenudiv_b a:hover{ 
    color: #333;
    background-color: #f2f2f2;
    }
    Attached is what happens in ie6 and ie7 - overlapping, padding or margin issues??

    Found the problem!!! removed red
    .bluetabs li.selected {
    color: #333;
    background-color: #f2f2f2;
    }
    Last edited by student101; 03-30-2010 at 11:25 AM.

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
  •