2 replies [Last post]
b_winter
Offline
newbie
Western Canada
Last seen: 5 years 7 weeks ago
Western Canada
Joined: 2009-02-17
Posts: 5
Points: 0

Hello all,

As I've just written in a different post in the CSS Layouts forum, I'm fairly new (about two weeks in) to learning HTML and CSS.

I'm in the process of constructing a CSS only dropdown menu - the menu is a hybrid of image and text, where the main "buttons" are images that rollover on :hover, and the text submenus drop below the "hovered over" button and display horizontally.

Everything is functioning nearly as I intend. The problem I am dealing with has to do with the submenus.
In the instance of :hover, everything displays as it should - I've tested in IE7, Firefox, Opera, and Safari.
What I wish to have occur, though, is, upon the instances of :focus, a darkening of the border on the edge of the "boxes" inside which the submenu text is displayed. I have this functioning in Firefox; however, in the other three browsers I have listed, it does not seem to function at all. The CSS which ought to cause the border color change is at the very bottom of the "CSS" code box.

It may be something simple I'm overlooking - like I say, I haven't been at this very long.
I would appreciate any help offered. I'll post the related CSS and HTML in the post, and perhaps upload it as well.

Thanks.
-B

CSS

#menu {
	background:transparent none repeat scroll 0 0;
	height:38px;
	left:166px;
	position:absolute;
	top:2px;
	width:640px;
	z-index:20;
	}
#nav {
	font-family:arial,verdana,sans-serif;
	height:38px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position:relative;
	width:632px;
	z-index:200;
	text-align: center;
	}
 
#nav li.top {
	display:block;
	float:left;
	}
 
#nav li a {
	cursor:pointer;
	display:block;
	height:36px;
	padding:0;
	text-decoration:none;
	width:126px;
	}
 
#nav li:focus,
#nav a:focus{
	outline: none;
}
 
#nav li a b {margin-left:-9999px;}
 
#nav li a.home {background: url(../Images/images/images/LBBHomeUP.gif)}
#nav li a.about {background:url(../Images/images/images/LBBAboutUP.gif)}
#nav li a.services {background: url(../Images/images/images/LBBServUP.gif)}
#nav li a.gallery {background:url(../Images/images/Buttons/images/LBBGalUP.gif)}
#nav li a.contact {background: url(../Images/images/images/LBBContUP.gif)}
 
#nav li:hover a.home,
#nav a.home:hover 
{background: url(../Images/images/images/LBBHomeP.gif)}
#nav li:hover a.about,
#nav a.about:hover
{background: url(../Images/images/images/LBBAboutP.gif)}
#nav li:hover a.services,
#nav a.services:hover 
{background: url(../Images/images/images/LBBServP.gif)}
#nav li:hover a.gallery,
#nav a.gallery:hover 
{background: url(../Images/images/images/LBBGalP.gif)}
#nav li:hover a.contact,
#nav a.contact:hover 
{background: url(../Images/images/images/LBBContP.gif)}
 
#nav table {
	border-collapse:collapse;
	height:0;
	left:0;
	margin:-1px;
	padding:0;
	position:absolute;
	top:0;
	width:0;
	}
 
#nav li:hover {
	position:relative;
	z-index:200;
	}
#nav a:hover {
	position:relative;
	white-space:normal;
	z-index:200;
	}
 
#nav .sub {
	left:0;
	position:absolute;
	top:36px;
	visibility:hidden;
	left: -30px;
	}
 
#nav :hover ul.sub, 
#nav ul.sub:hover a {
	background:transparent none repeat scroll 0 0;
	display:block;
	position:absolute;
	visibility:visible;
	width:300px;
	}   
 
#nav ul.sub li, 
#nav ul.sub li a {
	display:block;
	float:left;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	width:110px;
	color: #000000;
	height:auto; 
	line-height:1.4em;
	border: #999999 1px solid;
	font-style: italic;
	font-weight:bold;
	}
#nav :hover ul.sub li, 
#nav ul.sub:hover li a {
	background: #999999 none repeat scroll 0 0;
	color: #000000;
	position:relative;
	visibility:visible;
	width:110px;
	}
 
#nav ul.sub:hover ul.sub li a, 
#nav ul.sub li a:hover {
	background: #9A7F30;
	color:#000000;
	text-align: center;
	}
 
#nav ul.sub:focus ul.sub li a,
#nav ul.sub li a:focus {
	outline: thin;
	border: #333333 1px solid;
	}

HTML
<div id="menu">
 
 
    	<ul id="nav">
			<li class="top">
				<a class="home" href=""><b>Home</b></a>              
                </li>    
 
 
			<li class="top">
				<a class="about" href="">  
				<b>About</b></a>            
                </li>
 
			<li class="top">
				<a class="services" href="">
				<b>Services</b></a>
					<ul class="sub">
                		<li>
                		<a class="roofing" href="">Roofing</a>                        
                        </li>
                		<li>
                		<a class="construction" href="">Construction</a>                        
                        </li>
              	</ul>
            </li>
 
			<li class="top">
				<a class ="gallery" href="">  
				<b>Gallery</b></a>                
                <ul class="sub">
                		<li>
                		<a class="roofing" href="">Photos</a>                        
                        </li>
                		<li>
                		<a class="construction" href="">Testimonials</a>                        
                        </li>
              	</ul>
                </li> 
 
			<li class="top">
			<a class="contact" href="">  
		    <b>contact</b></a>            </li>  
		</ul>

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 24 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I'm a little surprised to

I'm a little surprised to hear that it works at all in Firefox. The trouble with focus is that unlike hover it likes to affect only (ONLY) the element with the focus, while :hover can travel through the cascade. Not sure what outline: thin is... Firefox is one browser who has an outline by default and it's not thicker than 1 pixel already...

The last mention of your focus *should* work... so long as no other :focus interferes, focussing on the sub li's anchors SHOULD be able to put a dark grey border around the anchors-- except in IE, which still doesn't recognise :focus (IE8 will, I hear). You'll never get styled :focus working in IE6 or 7. In Firefox, something clicked on will keep the focus and thus focus styles even after the mouse leaves. Opera only keeps the styles so long as the mouse button is held down AND the mouse stays over the area. Leaving the area and coming back while still holding the button down should show you the styles changing from unfocussed to focussed (last I checked with Opera 9.27). Safari as far as I know doesn't keep focus on something clicked at all, but brings the focus back to the top of the page I think.

#nav ul.sub:focus ul.sub li a, <span style="font-weight:bold"><-- should not work</span>
#nav ul.sub li a:focus <span style="font-weight:bold"><--should work</span>

I remember someone making a CSS suckerfish which had more :focus stuff, and supposedly their version didn't have the Javascript most people use to make keyboarding through dropdown menus easier. I might dig it up and see if they somehow got such a setup like yours working.

The rest of the code... dropdown menus are large steaming piles of code no matter what. This makes them a little harder than other parts of a page to style. The secret is to make it as little code as possible:

#nav table {
	border-collapse:collapse;
	height:0;
	left:0;
	margin:-1px;
	padding:0;
	position:absolute;
	top:0;
	width:0;
	}

If you are using those Stu Nichols tables for IE6, you do NOT need to style them, at all. Waste of code.

background:transparent none repeat scroll 0 0;

these are all defaults. if you don't want a background colour to appear somewhere and it shows up because it's inheriting from somewhere, just undo what you don't want. What's the point of setting a position, repeat and scroll on a non-existent background? You've listed this on almost every element here. You can remove just about all of them.
	display:block;
	float:left;

Know that anyone you ever float is automagically a block now. So whenever you float elements you can always leave out the display: block.

	display:block;
	position:absolute;

Same goes for position: absolute. It's automagically a block.

Now unlike static blocks, neither of these blocks are automatically 100% wide of their containers and they never have margin collapse. But they are blocks.

	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;

Those can be replaced with list-style: none. No point in mentioning the position of something that doesn't exist.

	white-space:normal;

As opposed to... white-space: abnormal? (It's a valid CSS declaration but it doesn't seem to have any business here)

Using visibility: hidden and visible to show dropdown elements is considered "bad" because it's inaccessible to screen readers 99% of the time. The machines figure you don't want the element on the page, and so don't read it out. A blind person isn't going to mouse over anything, so instead the recommended version is keeping position: absolute like you have, but setting the left position to negative bazillion pixels initially, and then back to left: 0 on :hover (:focus is a different beast). left: -9999em usually works well.

The tags in your anchors should go. The tag does still have a place in modern web design, somewhere, but not here. You are already bolding in the CSS, and it looks to me like the is there for styling purposes so just let CSS do it... unless they are image sandbags? In which case I understand them then.

Lastly, don't think that you need to wrap an element around a ul (exception: you need a 100% width background image and a less-than-100% wide ul) because a ul is also a block like a div is a block. You can shift all your stylings for the #menu div onto the ul itself. (Now when I tried removing the wrapping div with a Stu menu I had, one of my first drop-downs, everything died horribly, but if the menu is written correctly in the first place, you don't need that wrapping div.)
You also similarly don't need classes on your subs. In CSS you can mention subs with
ul ul
or
ul li ul
no names needed until you have someone who must be different from everyone else at their level. Same goes for li class="top"-- that looks like it's just everyone who's #nav li and not #nav li li. State your desired styles for #nav li and undo anything that gets inherited by #nav li li (things like position: relative won't get inherited, borders and backgrounds may well).

I'm no expert, but I fake one on teh Internets

4xelements
Offline
newbie
Last seen: 4 years 38 weeks ago
Timezone: GMT-7
Joined: 2009-07-21
Posts: 1
Points: 0

Same problem with ;focus state

I have a gallery that displays large images on focus and also has a drop down menu. It works fine in Firefox but Safari won't keep the images displayed or the menu dropped when its in the :focus state.

I am pretty new to this stuff as well so it might be something simple, but its all CSS and I think I have the specificity right. I also know I have a lot of excess code right now, can that get in the way maybe?

Any help would be appreciated.

<!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>
 
<style type="text/css">
body
{
	margin: 0;
	padding: 0;
}
#container {
	width: 100%;
	background-color: #666666;
	padding-bottom: 20px;
	padding: 0;
	position: absolute;
}
#maincontent {
	width: 90%;
	margin: 0 auto;
	background-color: #FFFFFF;
	position: relative;
	padding-top: 10px;
	z-index: 1;
	border: 3px solid #000;
}
#gallery
{
	height: 545px;
	width: 800px;
	position: relative;
	margin: 0 auto;
	font: "lucidia handwriting";
	list-style: none;
	padding-top: 5px;
	padding-left: 5px;
	border: 3px ridge #f90;
	background-color: #FFFFFF;
}
#thumbwindow {
	margin: 10px;
	float: right;
	height: 530px;
	width: 265px;
	border: 1px solid #000;
	background-color: #000000;
	z-index: 1;
	margin-top: 5px;
	overflow: auto;
}
#thumbcontainer {
	float: left;
	padding-bottom: 5px;
	overflow: hidden;
}
.thumb 
{
	float: left;
	display: inline;
	border: 1px solid #fff;
	width: 75px;
	height: 75px;
	overflow: hidden;
	z-index: 1;
	margin-top: 10px;
	margin-left: 8px;
}
.thumb  img   {
	border: none;
}
.thumb  span     
{
	display: none;
	width: 500px;
	text-align: center;
	background: transparent;
	margin: 10px;
	color: #000;
	font-family: "Lucida Handwriting";
	line-height: 1px;
}
.thumb  span  img       
{
	border: 5px double #000;
	float: left;
}
.landscape   img {
	margin: 100px 32.5px;
	z-index: 100;
}
.portrait   img {
	margin: 30px 106.5px;
	z-index: 100;
}
.thumb:focus {
	border: 1px solid #06f;
}
.thumb:hover 
{
	overflow: visible;
}
.thumb:active {
	border-left: 2px solid #000;
	border-top: 2px solid #000;
	border-right: none;
	border-bottom: none;
}
.thumb:hover .thumbs {
	border: 1px solid #f90;
	position: relative;
	top: -1px;
	left: -1px;
}
.thumb:active      .landscape    
{
	display: block;
	position: absolute;
	height: 530px;
	z-index: 1000;
	top: 1px;
	left: 1px;
	background-image: url(GALLERY_18bgland.jpg);
}
.thumb:active       .portrait    
{
	display: block;
	position: absolute;
	height: 530px;
	z-index: 1000;
	top: 1px;
	left: 1px;
	background-image: url(GALLERY_18bgport.jpg);
}
.thumb:focus      .landscape    
{
	display: block;
	position: absolute;
	height: 530px;
	z-index: 500;
	top: 1px;
	left: 1px;
	background-image: url(GALLERY_18bgland.jpg);
}
.thumb:focus      .portrait    
{
	display: block;
	position: absolute;
	height: 530px;
	z-index: 500;
	top: 1px;
	left: 1px;
	background-image: url(GALLERY_18bgport.jpg);
}
#bgimage {
	float: left;
	z-index: 1;
	margin-top: 5px;
	margin-left: 5px;
	border: 1px solid #000;
	height: 530px;
	width: 500px;
}
#nav {
	font-family: "Lucida Handwriting";
	font-size: 1.5em;
	text-decoration: none;
	position: relative;
	width: 100%;
	float: left;
	overflow: visible;
	z-index: 2;
}
#nav a  {
	text-decoration: none;
	display: block;
	background-color: #666666;
	margin-right: 1px;
	margin-left: 1px;
	margin-bottom: 2px;
	color: #f90;
}
#nav a:hover {
	color: #0066FF;
	background-color: #FFFFFF;
}
#nav a:active {
	background-color: #000;
	color: #FFFFFF;
}
#nav #homenav {
	margin-left: 2px;
}
#nav #gallerynav {
	height: 1.5em;
	color: #f90;
	background-color: #fff;
	border-right: 3px solid #000;
	border-left: 3px solid #000;
	border-bottom: 3px solid #fff;
	margin-bottom: 0px;
}
#nav #gallerynav:hover {
	color: #06f;
}
#nav #aboutnav {
	margin-right: 2px;
}
#nav ul {
	position: relative;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	height: 1.5em;
}
#nav  li {
	text-align: center;
	float: left;
	list-style: none;
	margin: 0 auto;
	width: 25%;
	background-color: #f90;
	position: relative;
	height: 1.5em;
}
#nav   .menutab  {
	position: relative;
}
#nav   #submenu   {
	display: none;
	width: 100%;
	position: relative;
	height: 1.5em;
	left: 0.5em;
}
#nav    #submenu    .submenutab      {
	background-color: #000;
	width: 100%;
	border-bottom: 1px solid #000;
	border-right: 2px solid #000;
	border-left: 2px solid #000;
}
#nav #submenu .submenutab a {
	padding: 0px;
}
#nav  .menutab:hover  #submenu  {
	display: block;
}
#nav   #menutab2:hover #gallerynav {
	color: #06f;
	border-bottom: 3px solid #000;
}
.clear {
	clear: both;
}
a:focus {
	outline: none;
}
</style>
 
</head>
 
<body>
<div id="container">
<div id="nav">
	<ul id="menu">
        <li class="menutab"><a href="#" id="homenav">Home</a></li>
    <li class="menutab" id="menutab2"><a href="#" id="gallerynav">Galleries</a>
       	  <ul id="submenu">
           	<li class="submenutab"><a href="#"> Buddha </a></li>
            <li class="submenutab"><a href="#"> Sports </a></li>
          </ul>
      	</li>
	  <li class="menutab"><a href="#" id="servicesnav">Services</a></li>
 		<li class="menutab"><a href="#" id="aboutnav">About Me</a></li>
	</ul>
</div>
    <br class="clear" />
<div id="maincontent">
<div id="gallery">
<img id="bgimage" src="GALLERYbg1.jpg" alt="bgimage" />
<div id="thumbwindow">
<div id="thumbcontainer">
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha1 s.jpg"/><span class="landscape"><img src="GALLERYbuddha1 L.jpg"/>
<h2>Captions fit here</h2></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha2 s.jpg"/><span class="landscape"><img src="GALLERYbuddha2 L.jpg"/>
<h2>Captions fit here</h2></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha3 s.jpg"/><span class="portrait"><img src="GALLERYbuddha3 L.jpg"/>
<h2>Captions fit here</h2></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha4 s.jpg"/><span class="portrait"><img src="GALLERYbuddha4 L.jpg"/></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha5 s.jpg"/><span class="portrait"><img src="GALLERYbuddha5 L.jpg"/></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha6 s.jpg"/><span class="landscape"><img src="GALLERYbuddha6 L.jpg"/></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha7 s.jpg"/><span class="portrait"><img src="GALLERYbuddha7 L.jpg"/></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha8 s.jpg"/><span class="portrait"><img src="GALLERYbuddha8 L.jpg"/></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha1 s.jpg"/><span class="landscape"><img src="GALLERYbuddha1 L.jpg"/>
<h2>Captions fit here</h2></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha2 s.jpg"/><span class="landscape"><img src="GALLERYbuddha2 L.jpg"/>
<h2>Captions fit here</h2></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha3 s.jpg"/><span class="portrait"><img src="GALLERYbuddha3 L.jpg"/>
<h2>Captions fit here</h2></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha4 s.jpg"/><span class="portrait"><img src="GALLERYbuddha4 L.jpg"/></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha5 s.jpg"/><span class="portrait"><img src="GALLERYbuddha5 L.jpg"/></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha6 s.jpg"/><span class="landscape"><img src="GALLERYbuddha6 L.jpg"/></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha7 s.jpg"/><span class="portrait"><img src="GALLERYbuddha7 L.jpg"/></span></a>
<a href="#" class="thumb"><img class="thumbs" src="GALLERYbuddha8 s.jpg"/><span class="portrait"><img src="GALLERYbuddha8 L.jpg"/></span></a>
 
</div>
</div></div>
</body>
</html>