www.webdeveloper.com
Results 1 to 9 of 9

Thread: "a:selected" doesnt work in IE6?

  1. #1
    Join Date
    Jun 2006
    Posts
    120

    "a:selected" doesnt work in IE6?

    My IE6 doesnt seem to recognise the a:selected CSS item.

    Am I doing something wrong or does IE6 just ignore this rule?

  2. #2
    Join Date
    Feb 2005
    Posts
    1,018
    Why would it work? Its not even valid. I think you are looking for a:active and even then it will only work when the mouse button is held down on the link.

  3. #3
    Join Date
    Jun 2006
    Posts
    120
    hehe ok my mistake. i am using "#sidebar ul li a.selected", wasnt paying attention...

    nevertheless it still doesnt work in IE6. seems like some other style overrides this one in IE for some reason.

  4. #4
    Join Date
    Feb 2005
    Posts
    1,018
    Well without seeing more code there isn't much we can do. Can you post a link to the site?
    If you can't handle the job then don't take the job or ask for help on it if you are getting paid for it.
    Web Developer's Handbook.::.Why Tables for Layout is Stupid?.::.Why I won't help you

  5. #5
    Join Date
    Jun 2006
    Posts
    120
    I cant link to the site as its still being developed, but I can show the code:

    CSS


    Code:
    #sidebar {
    	float:left;
    	width:185px;
    	padding-left:5px;
    	margin-left:3px;
    	margin-top:10px;
    	font-family:"Verdana", sans-serif;
    }
    
    /* IE-Fix */
    * html #sidebar {
    	margin-left: 0.1em;
    }
    
    #sidebar ul {
    	list-style-type:none;
    	padding:0;
    	margin: 0em 0.4em 0em 0em;	
    }
    
    #sidebar li {
    	_height: 1em; /* IE HACK */
    }
    
    /* -- main title for each menu section (not a link) -- */
    #sidebar li.head {
    	padding:2px;
    	padding-left:0px;
    	padding-top:7px;
    	text-transform:uppercase;
    	letter-spacing:1px;
    	color: #333;
    	font-weight:bold;
    	font-size: 0.7em;		
    }
    
    /* -- normal menu style -- */
    #sidebar ul li a:link, #sidebar ul li a:visited {
    	color:#222; 
    	font-size: 0.7em;
    	text-decoration:none;
    	display:block;
    	padding-left:15px;
    	background-image:url(../images/icons/arrow3.gif);
    	background-repeat:no-repeat;
    	background-position:0px 0px; /*left top; */
    }
    #sidebar ul li a:hover {
    	color:red;
    	background-image:url(../images/icons/arrow2.gif); 	 /* _on */
    }
    #sidebar ul li a.selected {
    	color:red;
    	background-image:url(../images/icons/arrow2.gif);
    }
    
    /* -- product menu styles -- */
    #sidebar li.lv1 a:link, #sidebar li.lv1 a:visited {
    	padding:2px;
    	border:1px solid #CCC;	
    	background:#EEE;
    	display:block;
    	margin-bottom:1px;
    }
    #sidebar li.lv1 a:hover {
    	background:none;	
    	color:#FFF;
    	background-color:#FF3300;
    /*	background-color:#EEE; *//* 296B9D */
    	border:1px solid red;	
    }
    #sidebar li.lv1 a.selected {
    	padding:2px;
    	border:1px solid #444;
    	background-color:#296B9D; /*#003D6B; *//*004080;*/
    	color:#FFF;
    	display:block;	
    }
    
    #sidebar li.lv2 a:link, #sidebar li.lv2 a:visited {
    	margin:0px;
    	color:#555;	
    	padding:2px;
    	border:none;
    	background:none;
    	text-decoration:none;	
    	display:block;
    	margin-bottom:1px;	
    	margin-top:3px;		
    }
    #sidebar li.lv2 a:hover {
    	background:none;
    /*	background-color:#FF3300;*/
    	color:#FF3300;		
    }
    #sidebar li.lv2 a.selected {
    	padding:2px;
    	background:none;
    	color:#FF3300;		
    	display:block;		
    }
    
    #sidebar li.lv3 a:link, #sidebar li.lv3 a:visited {
    	padding:0px;margin:0px;
    	border:none;
    	background:none;
    	padding:2px;
    	display:block;									
    	color:#999;
    	background-image:none;	
    }
    #sidebar li.lv3 a:hover {
    	background:none;
    /*	background-color:#FF3300;*/
    	color:#FF3300;			
    }
    #sidebar li.lv3 a.selected {
    	padding:2px;
    	background:none;
    	color:#FF3300;		
    	display:block;	
    }
    HTML

    Code:
    <div id="sidebar">
    <ul>
    
    <li class='head'>List By Category</li>
    
    <li class='lv1'>
    <a href='products.php?m1=080000&amp;country=AU' title='XXX'>
    XXX
    </a>
    </li>
    <li class='lv1'>
    <a href='products.php?m1=090000&amp;country=AU' title='YYY'>
    YYY
    </a>
    </li>
    <li class='lv1'>
    <a href='products.php?m1=010000&amp;country=AU' title='AAA'>
    AAA
    </a>
    </li>
    <li class='lv1'>
    <a class='selected' href='products.php?m1=150000&amp;country=AU' title='ZZZ'>
    ZZZ
    </a>
    </li>
    <li class='lv2'>
    <a href='products.php?m1=150100&amp;country=AU' title='Z1'>
    Z1
    </a>
    </li>
    <li class='lv2'>
    <a class='selected' href='products.php?m1=150200&amp;country=AU' title='Z2'>
    Z2
    </a>
    </li>
    <li class='lv2'>
    <a href='products.php?m1=150300&amp;country=AU' title='Z3'>
    Z3
    </a>
    </li>
    <li class='lv1'>
    <a href='products.php?m1=120000&amp;country=AU' title='BBB'>
    BBB
    </a>
    </li>
    
    </ul>
    
    </div>
    So the ZZZ main category, and the Z2 sub category are both class 'selected'. In Firefox they are thus displayed differently, but in IE this is not working, they just display the same as non selected items.

  6. #6
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    maybe your looking for

    a:focus
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  7. #7
    Join Date
    Jun 2006
    Posts
    120
    Thanks for the suggestion but I believe it has nothing to do with a:focus.

    I am succesfully marking up my html so that selected menu items become "class='selected'", but for some reason IE6 doesnt apply that style and Firefox does.

  8. #8
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Try changing
    Code:
    #sidebar li.lv1 a.selected
    to
    Code:
    #sidebar ul li.lv1 a.selected
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  9. #9
    Join Date
    Jun 2006
    Posts
    120
    Well I got some smal progress. Now the selected item has has the color:#FFF applied, but for some reason none of the other style items (background color etc) have been applied.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles