CSS - Css Menu With Showing Different Images On Hovering?

I am having a problem with some css image links not showing up in some browsers (IE 7, for example). Seems to work on most Mac browsers (of course!) Any help is appreciated! I've tried a few different things with the code, which explains the few items that are commented out.

HTML:

<a href="contact-form.php" class="more-info"><img src="images/spacer.gif" width="156" height="79" /></a>
<a href="charity.php" class="community"><img src="images/spacer.gif" width="154" height="72" /></a>

CSS:

a.more-info:link {
display:block;
overflow:hidden;
text-indent:-9999px;
width:156px;
height:79px;
background:url(../images/more-info2.png) no-repeat 0 0;
margin:6px 0 0 3px;
}

a.more-info:hover{
background-position: -156px;
}

a.community:link{
display:block;
overflow:hidden;
text-indent:-9999px;
width:154px;
height:72px;
background:url(../images/community.png) no-repeat 0 0;
margin:6px 0 0 3px;
}

a.community:hover{
background-position:-154px;
}

Hi

I'm having some problems with CSS and was hoping that somebody on here could help me.

Firstly despite having a container (wrap) div set to a padding of : 0px auto; the site is not centering.

Second none of my images are showing, I've attempted to add a background and header image but neither are showing.

I'm a little confused because the same methods work fine on my wordpress site.

Here is a link to the dev site;

C:\Users\Keith\Documents\Site\index.html

And below is the CSS code;

Code:

/* ------------------------------
HTML Redefine Tags
------------------------------ */
body {
	width: 100%;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
	background: url (img/background.jpg) no-repeat bottom;
}

input, form, textarea

h1, h2, h3, h4, h5, h6 {
	margin: 0; 
	padding: 0;
}

h1 {
	font-size: 18px;
}

h2 {
	font-size: 14px; 
	color: #999999;
}

h3 {
	font-size: 13px; 
	border-bottom: solid 1px #DEDEDE; 
	padding: 4px 0; 
	margin-bottom: 10px;
}

a:link, a:visited {
	color: #0033CC;
}

a:hover {
	text-decoration: none;
}


/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (780 pixel) */

#container {
	width: 1024px;
	background: #ececec; 
	margin: 0px auto;
}

#topbar {
	width: 1000px;
	height: 118px; 
	display: block; 
	background: url(img/header.png);
	float: left;
	position: relative
}

#navbar {
	width: auto; 
	display: block; 
	height: 28px;
}

#navbar a {
	heigth: 28px; 
	line-height: 28px; 
	padding: 0 8px; 
	display: inline;
}

#main {
	width: auto; 
	display: block; 
	padding: 10px 0;}

#column_left {
	width: 332px; 
	height: 387px;
	margin-right: 1px;
	margin-left: 13px; 
	background: #000;
	float: left;
}

#column_right {
	width: 332px;
	height: 387px; 
	margin-right: 1px;
	background: #000; 
	float: left;
}

#column_right_adsense {
	width: 332px;
	height: 387px;
	background: #000; 
	float: left;
}

div.spacer {
	clear: both; 
	height: 10px; 
	display: block;
}

#footer {
	width: 1000px;
	height: 150px; 
	display: block;
	margin: 0 13px; 
	padding: 10px 13px; 
	font-size: 11px;
	color: fff; 
	background: #737373;
}

I have a menu that is built using css/html that shows up fine in firefox but doesnt in IE.

The rollover buttons work but the submenu that should appear when the rollover is active, doesnt. [submenu is only for 'products' and 'about us']

the site is he http://soem.batcave.net
the css for the navmenu is he http://soem.batcave.net/navstyle.css

Any help on why this is happening [or not as is the case] would be greatly appreciated.

Thanks

I will try to explain as simple as I can:

I have rollover drop down menus, made with <DIV>'s. Showing and hiding them with JavaScript/CSS, usual stuff...

While opening and closing menus, and hovering the menu items, table's bkg images are kind of "blinking". I am using CSS to put bkg image to a cell Code:

background-image:url(/burakueda/images/bg_gifs/down_end.gif);

.

I realized that, browser tries to download bkg images everytime I open a pulldown menu, or hover a menu item.

I have other images in same page, inserted with <IMG> tag, they don't have any problem.

Anyone knows anything about this?

Thanks in advance for any help

Hi all,
I have this headache problem ... check it out here on my site
You see that menu ? it should be all over the #bar, but it just minimizes it to that small size.
It should be all over the #bar

Thanks !!!

I am not literate in CSS at all. I can change numbers and so forth, but to write my own css I can not do. I am confused on why this page is showing incorrectly on some versions and correctly on others. I am not asking for the solution, just a suggestion on what I should be looking for. I want to learn this so I am not spending more time correcting things than I am now! My pc shows it displayed correctly, however, my client's doesnt. Her menu on the left is displayed well below everything else on the page. I have used this template from one of the free template sites and modified to fit our needs.
I hope I can contribute in other fields of this group some way.. and appreciate any assistance with this I can get!

Toni

CSS BELOW:
Code:

/* Globals */ html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center; background-color: #ccc; background-image:url(images/plaidbg.gif)} a{ color: #981793;padding:10px;}  /* Primary Divs */ div#header { height: 4em; color:#000; border-bottom: 2px solid #A9A9A9;} div#wrapper { margin-top: 5px; } div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#FFFFAC} div#extra{background:#FFFFAC} div#footer{background: #FFFFAC;color: #000; border-top: 2px solid #A9A9A9; } div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto; } div#bgwrap { background: #FFFFAC url(images/brushbg.gif); width: 800px; margin: 0 auto;} div#content{float:right;width:545px} div#calendar{float:inherit;width:inherit} div#navigation{float:left;width:150px} div#extra{float:left;clear:left;width:150px;} div#footer{clear:both;width:100%}  /* TABLES */  table {border: 2px solid #FFFF84; border-collapse:collapse; width:90%; margin-left: 3ex; } td {padding:3px; border: 1px solid #ccc; color:#000;} th {text-align:left;border: 1px solid #fff} thead th {color:#000; font-size:1.5em; background-color: #990 ; padding: 10px 6px} tbody th {color:#000; font-size:1.15em; background-color: #FFFF84 ; padding: 6px} tbody th.sub {font-size: .90em; color:#fff; background-color: #336; padding: 6px}  /* TEXT STYLES */ div#content a:link, div#content a:visited { padding:0; color:#600; text-decoration:none; border-bottom: 1px solid #FFFF84; } div#content a:hover {background-color: #990; color:#fff; } div#content h1 { font-size: 2em; color:#000; margin-top: 0;  text-transform:uppercase; letter-spacing: 1px;} div#content h2 { font-size: 2em; color: #000; line-height: 1.3em; letter-spacing: -1px;} div#content h3 { font-size: 1.5em; color: #990;} div#content h4 { font-size: 1.25em; color: #966;} div#content h5 {font-size: 1em; font-weight:bold;} div#content h1,h2,h3,h4,h5 {padding:0 5px 0px;} acronym {border-bottom: 1px dotted #966; cursor:help; }  form,submit { padding:0; margin:0; } /* removes extraneous padding around the form */ code { border: 1px dotted #FFFF84; background-color: #990; color:#fff; margin-left: 3ex;} blockquote { border: 1px solid #FFFF84; background-color: #990; color:#fff; margin: 3ex; font-style:italic;}  /* Horizontal Navigation Menu */ #header ul { margin:0; text-align: right; padding-top: 1.6em; padding-bottom:0;} #header ul li { list-style-type:none; display:inline;} #header ul li a:link, #header ul li a:visited { display:inline; padding-top: 3em; text-decoration:none; color:gray; border-left: 2px solid gray;} #header ul li a:hover { border-bottom: 1px solid gray; background: #FFFFAC url(images/arrow2.gif) center center no-repeat;} .skiplink a:link, .skiplink a:visited { visibility: hidden;}  /* Vertical Navigation Menu */ #navigation { margin-bottom: 15px; } #navigation ul { list-style-type:none; margin:0; padding:0; } #navigation ul li {line-height: 4px; border-bottom: 1px solid gray;} #navigation ul li a:link,#navigation ul li a:visited { text-decoration:none; color:#000; text-transform:uppercase; display:block; } #navigation ul li a:hover { background: #FFFFAC url(images/arrow.gif) left center no-repeat; padding-left: 25px; font-weight:bold; } #navigation p{margin:0 10px 10px}  /* Logobox */ #logobox {background-image:url(images/plaidbg.gif); width: 150px; border: 1px solid #FFFFAC; text-align:center;} #logobox h1 { border-top: 1px solid #600; } #logobox h1, #logobox h2 { background-color: #A9A9A9; color: #FFFF84; margin: 5px; margin-bottom: 0; padding: 8px; font-size: 1.3em; text-transform: uppercase; border-right: 1px solid #600; border-left: 1px solid #600;} #logobox h2 { margin-top: 0; margin-bottom: 5px; font-size: 1em; border-bottom: 1px solid #600;}  /* Main pic area above content */ div#mainpicbox {  height: 400px; border: 1px solid #A9A9A9; margin-left: 10px; padding: 10px; margin-bottom: 15px;} div#mainpic { height: 400px; background: url(images/blockdesign.gif) top center repeat-y; color:white; } div#mainpic h2 { color:#fff; font-size: 2.75em; margin-top:0; padding-top: 2em; padding-left: 20px; margin-bottom:0; } div#mainpic h3 { padding-left: 20px; color:#330;} div#mainpic p, div#mainpic a:link, div#mainpic a:visited { display:inline; margin:0; color:#fff; margin-left: 10px;font-weight:bold; font-size: 1.2em; text-decoration:none; } div#mainpic a:hover {color:#600; background-color:inherit; }  /* Extra section */ .stripnav { background-color: #A9A9A9; width: 130px; border: 1px solid #A9A9A9; text-align:center;} div#extra p {margin-left: 0;  } div#extra h2 { background-color: #A9A9A9; color: #FFFF84; margin-bottom: 0; padding: 8px; font-size: 1em; text-transform: uppercase; border: 1px #000;} div#extra p a:link, div#extra p a:visited { padding:0; color: #600; font-weight:bold; padding-bottom: 1px; text-decoration:none;} div#extra p a:hover { text-decoration:underline;}  /* Photo Gallery Area */ div#gallery { border-top: 2px solid #A9A9A9; padding-top: 15px;} div#gallery img {width: 50px; height: 50px; padding: 2px; border:1px solid #A9A9A9;} div#gallery ul { list-style-type:none; margin:0; padding:0;} div#gallery ul li {display:inline;} div#gallery ul li a:link, div#gallery ul li a:visited {display:inline; border-bottom:0;} div#gallery ul li a:hover {background-color:inherit;} /* Footer Area */ div#footer ul { list-style-type:none; margin:0; padding:0; padding-top: 2px; text-align:right; font-size: .8em; } div#footer ul li { list-style-type:none; display:inline; border-left: 1px solid gray;} div#footer  ul li a:link,#footer ul li a:visited { display:inline; text-decoration:none; color:#000; text-transform:uppercase;} div#footer ul li a:hover {text-decoration:underline;} div#footer p {text-align:center; margin-top: 5px;}  /* Content Area */ div#content img { border: 1px solid #A9A9A9; padding: 2px; margin: 3px; margin-left: none; } div#content p {padding-left: 5px;} /* Bonus Styles */ p.rightsidelink { text-align:right;} .rightsidelink a:link, .rightsidelink a:visited { padding:0; color:#600; font-weight:bold; text-decoration:none;} .rightsidelink a:hover {text-decoration:underline;} .entrytext { margin-top: 0; font-size:larger; font-weight:bold;} .bright { font-size: 1.5em; color:#600; text-transform:uppercase;}

Then page text/layout he
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="bgwrap">
<div id="container">
<div id="header">
<ul>
<li class="skiplink"><a href="#content">Skip to Content</a></li>
<li class="skiplink"><a href="#navigation">Skip to Navigation</a></li>
<li><a href="/shop">Shopping</a></li>
<li><a href="http://members.ebay.com/ws/eBayISAPI.dll?ViewUserPage&userid=" target="_blank">Ebay</a></li>
<li><a href="contact_us.shtml">Contact Us </a></li>
<li><a href="index.shtml">Main Page </a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<div id="mainpicbox">
<div id="mainpic">
<h2>&nbsp;</h2>
</div>
</div>
<h1 align="center"> Welcome to </h1>
<h1 align="center"> </h1>
<p align="center">A painting studio featuring artwork for sale </p>
<p align="center">and<br />
    <br />
    offering instruction for those who would like to create their own </p>
<p align="center">landscape or floral paintings in oils.</p>
<p align="center">&nbsp;</p>
<p align="center">If you would like to be notified of new classes or items for sale, </p>
<p align="center">please be sure to join our mailing list.</p>
<p align="center">No purchase is necessary to register.<br />
</p>
<p class="rightsidelink">&nbsp;</p>
<div id="gallery">
<p class="entrytext">&nbsp;</p>
</div>
</div>
</div>
<div id="logobox">
<h1> </h1>
<h2>Explore your creativity</h2>
</div>

<p><!--#include file="menu.html" -->
</p>
</div>
<div id="footer">
<ul>
<li><a href="index.shtml">Main Page</a></li>
<li><a href="about.shtml">About Us</a></li>
<li><a href="/shop">Shopping</a></li>
<li><a href="/shop/index.php?main_page=index&cPath=7">Classes</a></li>

<li><a href="contact_us.shtml">Contacts</a></li>
</ul>
<p>Copyright 2007 - | Site designed and hosted by<a href="http://www..com" target="_blank"></a> </p>
</div>

</div>
</div>

</body>
</html>

Then Menu.html file he
Code:

<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<div id="navigation">
<ul>
<li><a href="index.shtml">Home</a></li>
<li><a href="about.shtml">About Us</a></li>
<li><a href="contact_us.shtml">Contact us </a></li>
<li><a href="calendar.shtml">Calendar</a></li>
<li><a href="classes.shtml">Classes</a></li>
<li><a href="events.shtml">Other Events </a></li>
</ul>
</div>

<div id="extra">
<h2 class="stripnav">Shopping</h2>
<p>Here we will show a single item from each category in your shopping area that will be linked to it.. </p>
<p><a href="#">Pattern Packets </a><br />
  Photo goes here </p>
<p><a href="#">Glass</a><br />
  Photo goes here </p>
<p><a href="#">Paintings</a><br />
  Photo goes here</p>
<p><a href="#">Wood</a><br />
  Photo goes here </p>
  <p><a href="#">Other</a><br />
  Photo goes here </p>
    <p><a href="#">Supplies</a><br />
  Photo goes here </p>
</div>

Any ideas why the text isn't showing up in the main site menu (top left hand side of screen):

http://www.thepartyparty.ca

Take a look in Firefox and then IE. Firefox works wonderfully (surprise), IE shows no text. Any suggestions?

Ryan

This problem just started happening, but frustratingly I can't remember what I was changing when it started happening.

The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons.

OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem.

If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE!

GAAAAH

Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS:
Code:

html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
 body {
margin: 0; 
padding: 0; 
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;

}

img {
border:0;
}

a:link {
text-decoration: none;
color: #0096db;
}

a:hover {
text-decoration: underline;
}

a:visited {
color: #00abc7;
text-decoration: none;
}

#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}

#logo {
float:left;
width:140px;
margin:0;
padding:0;
}

#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}

#clear_both {
clear:both;
}

#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}

#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}

#content {
float:left;
width:500px;
}

#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}

#content p {
padding-left: 15px;
}

#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}

#focus_box h1 {
padding-top:15px;
}

#focus_box p, h1, ul {
padding-left:15px;
}

table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}


#menu2 {
float: left;
width: 200px;
}

#main {
float: right;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}

/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/

#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}

#sitemap li {
margin-left: 15px;
}

#sitemap ul {
margin-bottom:15px;
}

#sitemap ul li ul {
margin-left:15px;
}

And here is the HTML:
Code:

<%@ LANGUAGE="VBSCRIPT" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


	<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "(URL address blocked: See forum rules)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">

<!-- #INCLUDE FILE="menutop.asp" -->

<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
 <td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
 <td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
 <td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
 <td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
 <td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>

</body>
</html>


</body>

</html>

A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos.

This would be a lot easier if I could show you a picture of what was going on.

I am having the same problem as a few other posters regarding Spry menu bars. I was wondering if someone here could help us.

The link is
The problem link

Thanks

Can somebody tell me if this is possible?

I have a horizontal menu and I'm using images. I'm using javascript for the drop down menu etc. The menu is an include so it looks the same on all the pages. What I want to do is when I'm on say "Contact" the rollover color (this is an image) displays the "Contact" hover image, and the same with the other pages.

So what needs to happen is CSS needs to override the button with the hover image.

Is it possible to put css in every page that tells it to display the needed hover image when on that page?

Hi,

I'm trying to set up my (very basic, horizontal, no dropdown) CSS menu so that when a user hovers over the menu link items, the formatting changes and they basically get an image on mouseover (nothing more than changing the text colour and adding a curve on the left hand side, so it just looks like a selected tab).

It kind of works but instead of the whole image showing it only shows in the area where the menu link text is, so instead of covering the height of the menu bar and a length I specify, it's just covering the actual word e.g "Home" in each case on the menu.

I can't seem to get it so that on rollover the whole image shows. I've tried setting it so that the links have a background image (just a plain block from the nav bar) but that doesn't work.

My CSS is:

/* this is the bar where the menu is located */
.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

/*holder for the menu */
div.navigation {
margin-left:30px;
padding-top:10px;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
display: block;
padding: 0px 20px 0px 10px;
display: inline;
height:2.19em;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
}

.navigation ul li a:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
}

I've tried setting display:block; and float:left; on the .navigation ul li, but this makes the menu become vertical and throws the whole page out of sync.

I tried this altrnative code, to no avail:

.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

div.navigation {
margin-left:30px;
padding-top:10px;
height:2.19em;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
padding: 0px 20px 0px 10px;
display: block;
float:left;
height:2.19em;
}

.navigation ul li:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
background-repeat:no-repeat;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
display: inline;
}

Any ideas or pointers gratefully received!

Hi there,

Can someone help me make a menu Im working on.
The menu is make up of a few cells in a table, each cell has a Background image and an image which I would like to haved change when the mouse is over that cell in the table. How is this done?



Owen,

Hi!

I'm trying to implement an image drop-down menu. Everything seems to be working but there is an element that is pushing my second image button down and I can't seems to figure where it's coming from. It seems to be my link that is causing it but i'm stumpped.

I've set up a test page so you can see what is happening.
the site is at test .sylvaindelisle .com

Thanks for taking the time to take a look.

Hello,

I've always made my menu buttons with the text built into the image but is there a better way to do it?

Thanks for the help.

If you take at the link below I'm having trouble with the top menu.

http://departments.brooklands.ac.uk/ifp/test/

I'm trying to use background images as buttons with normal xhtml text links.

But I can't seem to get the text in the middle of the buttons.

I think I may be going about this in the wrong way, so if anyone could take a look that would be great.

Thanks

Jemes

Code:

#topbar{
padding-top:18px;
border: 0px solid #000000;
background-image:url(../images/top.gif);
background-repeat:no-repeat;
height:120px;
margin-left:16px;
}

#topmenu{
margin:32px 0px 0px 30px;
font-size: 10pt;
font-weight:bold;
height:30px;
}

#topmenu ul{
    margin:0px;
    padding:0px;
list-style-type: none;
}

#topmenu ul li{
    padding-right:4px;
}

.home{
float:left;
display:inline;
background-image: url(../images/home.gif);
background-repeat: no-repeat;
height:33px;
width:45px;
}

.active{
float:left;
display:inline;
background-image: url(../images/top_active.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}

.norm{
float:left;
display:inline;
background-image: url(../images/top_norm.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}

#topmenu li a{
text-decoration: none;
color: #AC5BA0;
padding-right: 0.7em;
height:30px;
}