Results 1 to 1 of 1

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

  1. #1
    Join Date
    Feb 2008
    Posts
    137
    Thanks
    18
    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.
    ASCII stupid question, get a stupid ANSI!
    Beta is Latin for still doesn’t work.
    Mac users swear by their Mac, PC users swear at their PC.
    Keyboard not found...Press any key to continue.

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
  •