|
CSS - Horizontal Menu With Whatever:hover Problems
I'm trying two "new to me" things at once here. First, I'm creating a horizontal drop down menu for the first time. Along with that, I'm using the whatever:hover method with the IE behavior fix instead of the conditional comment tables method (which is semantically incorrect).
I've got two problems in IE that can be viewed he http://www.windrivers-gsp.com/test/index.php CSS: Code:
@charset "utf-8";
/* CSS Document */
/* Document Formatting */
html { width:100%;}
body, tr, th, td, p { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
color:#000000;
margin:0px;
padding:0px;
}
#navigation { position:relative;
background:url(design/menubar.gif) #009933;
background-repeat:repeat-x;
width:100%;
height:30px;
text-align:center;
display:block;
}
#nav2 { position:absolute;
left:50%;
width:628px;
margin-left:-314px;
}
#container { position:relative;
max-width:1400px;
min-height:400px;
overflow:visible;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #666666;
padding:15px 10px 10px 10px;
z-index:2;
}
#content { font-size: 1em;
margin-right:36%;
overflow: visible;
background: #FFF;
text-align: left;
height: auto;
padding-right:10px;
}
#rightpane { font-size: 1em;
float:right;
margin-top:0;
width:35%;
overflow: visible;
text-align: left;
height: auto;
}
#fixcont {width:100%;float:left}
/* PIE/Aslett Clear Fix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* New Navigation Menu Styling */
#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 157px;
float: left;
}
#menu a, #menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
display: block;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
margin: 0;
padding: 0;
height:30px;
line-height:30px;
}
#menu h2 {color: #000; background:url(design/menutab.gif); font-weight:normal;}
#menu h2:hover {background-position: 0 30px;}
#menu a {color: #000; text-decoration: none;}
#menu ul ul a {font-size:.8em; background-color:#a4906d;}
#menu ul ul a:hover {background-color:#CCCCCC;}
#menu ul li {position: relative;}
#menu ul ul {position: absolute; z-index: 10;}
div#menu ul ul {display: none;}
div#menu ul li:hover ul {display: block;}
HTML: Code:
<!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>Test Menu</title>
<link href="menutest.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<style type="text/css" media="all">
body { behavior: url(csshover.htc); font-size: 100%;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 30px;}
#menu a, #menu h2 { font: 1em; font-family: Verdana, Arial, Helvetica, sans-serif;}
</style>
<![endif]-->
<meta http-equiv="Content-Language" content="en-us" />
<meta name="title" content="Test Menu" />
<meta name="Publication_Date" content="09/07" />
<meta name="robots" content="ALL" />
<meta name="revisit-after" content="2 weeks" />
</head>
<body>
<div id="navigation">
<div id="nav2">
<div id="menu">
<ul>
<li><h2><a href="index.php">Home</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Two</a></h2>
<ul>
<li><a href="index.php">Page 2.1</a></li>
<li><a href="index.php">Page 2.2</a></li>
<li><a href="index.php">Page 2.3</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2><a href="index.php">Page Three</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Four</a></h2>
<ul>
<li><a href="index.php">Link 1</a></li>
<li><a href="index.php">Link 2</a></li>
<li><a href="index.php">Link 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="container" class="clearfix">
<div id="content"><div id="fixcont">
<p style="text-align:center;">Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; </p>
</div></div>
<div id="rightpane"><p>Right Side Content</p></div>
</div>
</body>
</html>
Basically, it looks like my #container div has a higher z-index than my menu drop downs, despite stating otherwise in the CSS. Also, the drop down <ul>'s are not directly under the header <ul>, but rather are about 50% off right. In FF everything looks good, of course. Any ideas? Similar TutorialsI am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: Code: <!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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
I've been trying to solve this for many hours. I'm using CSS and transitional tables. I have content with a box of navigation right aligned within the content table. I need to have a gray line in the content area dividing sections. The width of that gray line is dependent on whehter that navigation box is there or not. I've tried two ways to create the line, a table set at 100% with a gray background color and a <hr> tag that is styled in the css. I thought the hr tag was working, but in NS7, the gray line writes over the navigation box. Here's the page: http://www.vma.org/paris/nci-intranet/work-life-services-coachin.html If I use a table width=100%, it starts working in NS7 and Firefox, but stops working in IE. As you can see from the page, the width of the gray line is dependent on the navigation box to the right. The navigation box is a right aligned table floating within the content box. Here's my <hr> definition in the css: hr { border: 0; color: #D5D5D5; background-color: #D5D5D5; height: 1px; text-align: left; padding: 0px; margin: 0px; } Any ideas? Its driving me crazy, I know there's gotta be a simple solution to having the line take up the same amount of space as the text does and no more. Thanks! i have an icon on the site that users can place their mouse cursor over and a popup appears with helpful info. however on a friends machine today i found that the popup appears out of place....is thre a way that i can place the popup statically in one place on any machine... here is the code Code:
div#tooltip a span {display: none;}
div#tooltip a:hover span {display: block;
position: absolute; top: 270px; left: 705px; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: black; background-color:#FFFFCC; border: 1px solid #ccc;
font: 10px Verdana, sans-serif; text-align: center;}
an example of this can been seen here any help would be helpful thanks RF Thanks for taking the time to read my question. I am having problems with hover on my menu. Just before you mouse over the next button, the previous one lights up. I really don't know why. See: #MenuItemTop and #MenuItem I've attached my html, and my css. I have no where to post it. Thanks again. Brad Hello, I am designing a web page and I am having problems with a hover effect in IE6. The page is located at http://www.backontrack.nu/egusin/layout.php and if you hover over the menu items using Firefox (or any other real browser) you will see the hover effect. If you try doing this in IE6 there won't be any hover. Is there some obvious way of fixing this that I'm missing? Another thing, I would like to center the page. I can do this by adding margin: 0 auto; to the container class but this doesn't work in IE6. I know I could do the centering with a wrapper and some negative margins but I'd rather avoid that if at all possible. The odd thing someone at http://www.xs4all.nl/~peterned/examples/csslayout1.html is using the technique I tried for centering and it seems to work for him, even in IE6. Thanks in advance! /Robert One is my fault for sure, the other maybe not. http://67-42-48-70.eugn.qwest.net/s...playseries2.php That's my site. If it's down, it basically some links that when hovered, display an image. The css is below. Code:
.seriesbox
{
height: auto;
width: auto;
}
.flashybox
{
/*float: left;*/
display: block;
height: auto;
width: auto;
}
.flashybox a span
{
display: none;
float: left;
color: yellow;
}
.flashybox a:hover span
{
display: inline;
float: none;
color: blue;
}
It works well in FF etc etc. But not IE6. Also there's a weird purple line at the bottom of the image. Like this Here is the relevant HTML for the rollover issue. Code: <div class="flashybox"> <b>G</b><br/><a href="addcharacter.php?series=Gankutsuou&addnewcharacter=false">Gankutsuou<br/> <span><img src="pictures/gankutsuou.jpg" ></span></a> <br/></div> Any ideas on what I could do? Hi all, I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7. The li tag css is Code:
li{
background:url('../images/li_bg.gif') repeat-x #ff0000;
display:inline;
padding:0 5px 0 5px;
margin:0 2px 0 0;
}
List html is: Code: <ul> <li><a href="member.php">Home</a></li> <li><a href="profile.php">Profile</a></li> <li><a href="help.php">Help</a></li> <li><a href="logout.php">Logout</a></li> </ul> I reset margin and padding for all other tags in a general css file. The image is a 1px width gradient. Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin. Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space. Have seen plenty of navbar tutorials but not with margin between list elements. Any help is much appreciated... Hi Folks, I'm having problems with some of the divs on my site. Here is the site with the problem areas colorized to highlight the issue... example I have 3 columns, but the problem arises in the area marked "panel2". I want the div containing this text to stretch to fill the remaining available space so that the border-left attribute reaches the footer, encapsulating the text in the middle column. I can't use the border-right attribute of the middle column because of the small indent between panels 1 and 2. I've scoured forums and googled till my fingers hurt, but can't seem to come up with a satisfactory explanation as to why I can't do this. the CSS is he styles.css Any help/suggestions or comments would be appreciated more than I can describe!! Thanks in advance!! what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu i looked at these and could find one http://www.cssdrive.com/index.php/menudesigns/category/C20/ Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? I've tried the tutorials on CSS menus but can't seem to get it to work right for my project. I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help? The code is below: Code:
<tr>
<td width="766">
<div id="navcontainer">
<ul>
<li><a href="">Home</a></li>
<li><a href=""> Project Status</a></li>
<li><a href=""> Tasks</a></li>
<li><a href="">General Information</a></li>
<li><a href="">Completed Tasks</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS Code:
body,html {
margin: 0;
}
#navcontainer ul {
list-style-type: none;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0.2em 1em;
color: #fff;
background-image: url(images/back.gif);
height: 24px;
line-height: 23px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #960033;
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
background-image: url(images/backover.gif);
}
--- I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages. When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below. Ideas anyone? Code: Code: Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> Jake Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? |
|||||||