|
CSS - Menu Problems In Ie: Menu Contents Shift Down On Hover
I 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>
Similar TutorialsHi all, I'm a CSS newbie and I need your help, pleeease! I tried to make a rollover graphic menu today. And of course I got completely stuck with this code: Code:
/* Header */
#header {
position: absolute;
background: url(images/header.jpg) no-repeat;
width: 830px;
}
#menu, #menu li a:hover, #menu li.current a {
background: url(images/link_menu.jpg) no-repeat;
}
#menu {
margin: 115px 0px 0px 29px ;
width: 600px ;
height: 75px ;
list-style-type: none;
}
#menu li {
float: left;
margin: 0px 0px 0px 0px;
width: 120px;
height: 75px;
}
#menu li#menu-contact {
margin: 0;
}
#menu li a {
display: block;
padding: 75px 0px 0px 0px;
height: 75px;
overflow: hidden;
}
html>body #menu li a {
height: 0;
}
#menu li#menu-home a:hover, #menu li#menu-home.current a {
background-position: 0px -75px 120px 29px;
}
#menu li#menu-about a:hover, #menu li#menu-about.current a {
background-position: -120px -75px;
}
#menu li#menu-gallery a:hover, #menu li#menu-gallery.current a {
background-position: -240px -75px;
}
#menu li#menu-foto-shop a:hover, #menu li#menu-foto-shop.current a {
background-position: -360px -75px;
}
#menu li#menu-contact a:hover, #menu li#menu-contact.current a {
background-position: -480px -75px;
}
The rollover works, but somehow it shifts to the right Like this: URL What am I doing wrong? Why does it shift? Thanks in advance... 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? I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on. if there is a better way of doing this all please let me know this is menu.php PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>BHI and Roth's Website menu</title> <?php <link rel="stylesheet" type="text/css" href="menu_css.css" /> </head> <BODY STYLE="background-color:transparent"> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenui"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li> </ul> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li> </ul> </body> </html> <?php } } } else //if the cookie does not exist, they are taken to the login screen { header("Location: login.php"); } ?> </html> And this is menu_css.css Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#990033;
background-repeat:repeat;
border-color:#FFEE00;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#990033;
border-width:0px;
border-color:#990033;
border-style:solid;
text-align:center;
text-decoration:none;
padding:4px;
_padding-left:4;
font:normal 11.5px Verdana;
color: #FFEE00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none;
padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#BB99BB;
background-image:none;
}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFEE00;
border-color:#0099cc;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFEE00;
border-color:#990033;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
When you hover over Contact Us/info the menu that drops down by the way i'm using the pixo plugin for that the words end up being seen through the tab.. and the news thing that scrolls that is using the plugin Announcement and vertical scroll news How do you fix that? This is a problem in Firefox, IE etc.. is the url mcshanesnursery dot com can please someone tell me why the code below does not work. and please explain how do I make it work. Code:
<style>
a.home {
width: 63px;
height:47px;
padding:0px 0px 0px 0px;
background: url(http://refinethetaste.com/html/themes/default/images/btn_header_home_off.gif) no-repeat;
}
a.home:hover {
background: url(http://refinethetaste.com/html/themes/default/images/btn_header_home_on.gif) no-repeat;
}
a.myaccount {
width: 100px;
height:47px;
padding:0px 0px 0px 0px;
background: url(http://refinethetaste.com/html/themes/default/images/btn_header_myaccount_off.gif);
}
a.myaccount:hover {
background: url(http://refinethetaste.com/html/themes/default/images/btn_header_myaccount_on.gif);
}
</style>
<a href="#" class="home"></a>
<a href="#" class="myaccount"></a>
Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers. When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane. If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here.. If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone.. Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help: Home page style sheet: mainline.divsharp.com/wp-content/themes/mainline/style.css Interior page style sheet: mainline.divsharp.com/wp-content/themes/mainline/interior.css In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this: Code:
<li id="popout_hov">
<div id="popout">code for menu pane</div>
</li>
#popout_hov #popout {
visibility: none;
}
#popout_hov:hover #popout {
visibility: visible;
}
Thanks. Okay so the site is pawnsuppliesdirect.com it works flawlessly on mozilla, and IE7, but on IE6 the spacing is messed up and the hover links don't show the flyout part of the menu. Below is the css for the menu and it does validate: @charset "utf-8"; /* CSS Document */ /* common styling */ .menu {font-family: arial, sans-serif; width:100px; height:100px; position:relative; margin:0; font-size:10px; margin:5px 5px 60px 5px;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#FFFFFF; width:90px; height:20px; border-left:1px solid #5fb7dd; text-align:left; background:#000000; line-height:19px; font-size:11px; padding-left:10px;} .menu ul {padding:0; margin:0; background-color:#000000;list-style-type: none;} .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#5fb7dd;} .menu ul li:hover ul {display:block; position:absolute; top:0; left:101px;} .menu ul li:hover ul li a.hide {background:#000000; color:#FFFFFF;} .menu ul li:hover ul li:hover a.hide {width:100px;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:url(../img/transparent.gif); color:#ffffff; width:100px; border-right:1px solid #5fb7dd;} .menu ul li:hover ul li a:hover {background:#5fb7dd; color:#fff;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:140px; top:0; color:#ffffff;} .menu ul li:hover ul li:hover ul li a {display:block; width:100px; background:#5fb7dd; color:#ffffff;} .menu ul li:hover ul li:hover ul li a:hover {background:#5fb7dd; color:#fff;} any suggestions? Hiya, Hoping for a bit of help with a menu I've made. Basically it's a tabbed menu with another line underneath for an explanation of what you'll find if you click on the tab. The explanation shows up when you hover over the appropriate tab. I also have an 'active' class that highlights whatever section you're on and shows that explanation as default. It all works fine until you're halfway through the menu, and the explanations won't show for any menu item previous to the active one. I know this is something to do with z-index, but I can't for the life of me figure out where to put it. Can anyone help? This is only happening in IE. Full Code he 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=iso-8859-1" /> <title>Menu Problem</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <!-- The line below starts the conditional comment --> <!--[if IE]> <style type="text/css"> body {behavior: url(csshover.htc);} </style> <![endif]--> <!-- This ends the conditional comment --> </head> <body> <div class="container"> <p>First Active Tab:</p> <div class="nav"> <ul> <li class="active"><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> <p style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #000;">Middle Active Tab:</p> <div class="nav"> <ul> <li><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li class="active"><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> </div> </body> </html>
CSS He Code: /* CSS Document */ body{margin: auto; text-align: center; background: #fff; font-size: 80%;} .container{ margin: auto; padding-top: 6px; width: 1000px; text-align: left; background: #fff;} /* Main Menu */ .container .nav{background: #fff; height:68px; line-height:34px;left:0px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #fff; text-transform:uppercase;margin-left: 6px; } .container .nav ul{list-style: none; position:relative;} .container .nav ul li{display: inline; float: left; position:relative; font-size: 0.9em; } .container .nav ul li a{text-decoration:none; color:#fff; background: #A90100; padding-left: 20px; } .container .nav ul li a, .container #nav ul li a span{ display: block; float: left;} /* Hide from IE5-Mac \*/ .container .nav a, .container .nav a span{float: none} .container .nav ul li a:hover{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a span{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active ul{display: block;} .container .nav ul li a span{background: #A90100; padding-right: 20px; } .container .nav ul li a:hover span{text-decoration:none; color:#fff; background: #351405; } .container .container .nav li > ul {top: auto;left:auto;} .container .nav ul li ul{ display:none; position: absolute; width: 700px; left: 0px; top: 0px; float: left; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-transform:none; font-weight: normal;} .container .nav ul li:hover ul{ z-index:100;} .container .nav ul li ul.item1{ left: 10px; z-index: 0;} .container .nav ul li ul.item2{ left: -67px; z-index: 0;} .container .nav ul li ul.item3{ left: -144px; z-index: 0;} .container .nav ul li ul.item4{ left: -221px; z-index: 0;} .container .nav ul li ul.item5{ left: -298px; z-index: 0;} .container .nav ul li ul.item6{ left: -375px; z-index: 0;} .container .nav ul li:hover ul.item1{z-index: 100;} .container .nav ul li:hover ul.item2{z-index: 100;} .container .nav ul li:hover ul.item3{z-index: 100;} .container .nav ul li:hover ul.item4{z-index: 100;} .container .nav ul li:hover ul.item5{z-index: 100;} .container .nav ul li:hover ul.item6{z-index: 100;} .container .nav ul li ul li{ display:inline; position: absolute; float: left; left:10px; top: 39px; height: 24px; line-height: 24px; width: 700px; float: left; color: #fff; font-family:Arial, Helvetica, sans-serif; font-size: 1em; text-transform:none; font-weight: normal; background: #351405;} .container .nav ul li:hover ul {display: block;}
My nav menu works 100% in IE8, FF, Opera and Chrome... but it's doing something weird in IE7 that can kindof affect it's functionality but I have no idea really where to look for the problem. It's most easily seen on two pages. The front page, he http://www.skullcrow.com ...and on the product pages he http://www.skullcrow.com/proddisp.php?id=skull01 On the main page when you hover over the menu and get the drop downs, if you move your cursor so you're also over the text div in the background, the menu goes away. You can tell easiest when viewing the "Community" and "Help" lists. On the product display page is the same thing over a larger area. Anytime you move the cursor to a part of the menu that's covering the text or (only some of?) the background div, it disappears. The menu is obviously on top, and this problem does not occur in basically any other browser. The main reason I need to fix this is that these menus will probably only get bigger and the navbar will become barely unusable in IE7 after a while. I don't exactly what code I would need to post for this, I was just hoping for some general information that could point me in the right direction. Thanks for any help. Hello, I'm trying to create a menu for my NGO to replace the one they have currently but I'm running into some problems. The highlight color in this photo is one - how do you get around this issue? I'd like to keep the colors the same, if possible, but I recognize that might not be acceptable. the menu img is at kburke - org slash menuhover.jpg Thanks! here's the code: /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; font:11px Verdana, sans-serif; font-weight:bold; } .sf-menu a { border-left: 1px solid #fff; border-top: 1px solid #CFDEFF; padding: .75em 1em; text-decoration:none; color: #FFFFFF; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #ffffff; } .sf-menu li { background: #b6791e; } .sf-menu li ul li a { color: #769841; } .sf-menu li li a:active, .sf-menu li li a:focus { color: #ffffff; } .sf-menu li li { background: #ffffff; } .sf-menu li li li { background: #ffffff; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #769841; outline: 0; color: #FFFFFF; } /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } 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! I had to make a hover menu that was full CSS, and i couldn't make it work in IE, because of the old issue of IE not supporting :hover for anything else but the a tag. So i modded some example i found on the internet that was using js for ie, attached through behaviours, in the css file. The url is this. The menu works fine in mozilla but it has a problem in IE, and i think it's css, not js. If you hover over the Products button and then over one of the items that appear, the item right under it will get a few pixels higer, which causes the whole menu to move down as you movewr over those ites. And it's annoying. Can some one give me a hint please? I've tried all sorts of things, adding empty level 3 menus to the items that don't need it, but still nothing... Thanks in advance... Hi. I am having dificulty getting a menu item to change colour and background colour when mouse over http://www.des-otoole.co.uk/HC2010/holidayclub.php any reason as it is at the end of the style sheet code Code:
#tabnav a:hover
{
background: #bfbfbf;
color: #f05320;
}
I followed the online examples pretty closely but for some reason the effect isn't working how it is supposed to. You'll see what i mean he http://www.mr-danny.com/example.html could anybody tell me what i'm doing wrong? Code:
<html>
<head>
<style type="text/css">
ul#menu{
position:relative;
top:163px;
left:405px;
display: inline;
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li{
display:inline;
list-style-type:none;
}
ul#menu li ul.submenu{
display:none;
}
ul#menu li ul.submenu li{
display:block;
}
ul#menu li:hover > ul.submenu{
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li class="home"><a href="" title="">Heading 1</a></li>
<li class="services"><a href="" title="">Heading 2</a>
<ul class="submenu">
<li><a href="" title="">sub 2-1</a></li>
<li><a href="" title="">sub 2-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 3</a></li>
<li><a href="" title="">Heading 4</a>
<ul class="submenu">
<li><a href="" title="">sub 4-1</a></li>
<li><a href="" title="">sub 4-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 5</a>
<ul class="submenu">
<li><a href="" title="">sub 5-1</a></li>
<li><a href="" title="">sub 5-2</a></li>
</ul>
</li>
</ul>
</body>
</html>
Hi everyone, I am having an issue with IE7 (imagine that) with a css drop down nav menu. On IE8 and Chrome the menus work flawlessly but in on IE7 the menu is behind the pictures on the page. The page is located at www.philadler.com/newlayout2.php. At first I thought it may be a z-index problem but the nav bar is set to 1000 and 900 depending on the menu and the thumbnails are set to 100. As of now the site validates on both css and xhtml 1.0 transitional. I can list any code if needed. Thanks for any help Phil Hello, I am working on my HW problem with CSS, it's about rounded and angular corners in menu (active or hover). I can't post picture (not permitted), but probably you know what i mean, rounded corners are created with image and angular are created with padding by CSS. Angular is ready, now i have to do rounded, which is more hard. I have 3 pictures, left rounded side, middle and right rounded side. But i really dont know how to add it to a.active or a:hover elements. Middle picture will be repeated depending on text long, so i can't do 1 picture. Thank you for your help. Hi, I am trying to make a dropdown menu by using only CSS and no Javascript. Here is my HTML Code:
<ul id="nav">
<li>
<a href="/family-flowers.html"><span>Family Flowers</span></a>
<ul>
<li>
<a href="/family-flowers/anniversary-flowers.html"><span>Anniversary Flowers</span></a>
</li>
<li>
<a href="/family-flowers/birthday-flowers.html"><span>Birthday Flowers</span></a>
</li>
<li>
<a href="/family-flowers/christmas-bouquets.html"><span>Christmas Bouquets</span></a>
</li>
<li>
<a href="/family-flowers/new-baby.html"><span>New baby</span></a>
</li>
</ul></li>
<li class="level item-2 nav-congratulation">
<a href="/congratulation.html"><span>Congratulation</span></a>
</li>
<li class="level item-3 nav-corporate">
<a href="/corporate.html"><span>Corporate</span></a>
</li>
<li class="level item-4 nav-get-well">
<a href="/get-well.html"><span>Get Well</span></a>
</li>
<li class="level item-5 nav-love">
<a href="/love.html"><span>Love Bouquets</span></a>
</li>
<li class="level item-6 nav-mixed">
<a href="/mixed.html"><span>Mixed</span></a>
</li>
<li class="level item-7 nav-monthly">
<a href="/monthly.html"><span>Monthly</span></a>
</li>
<li class="level item-8 nav-funeral">
<a href="/funeral.html"><span>Funeral</span></a>
</li>
<li class="level item-9 nav-window">
<a href="/window.html"><span>Window plants</span></a>
</li>
</ul>
and this is my CSS Code:
#nav { list-style:none; margin:0; padding:0; width:150px; }
#nav li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
#nav li:hover ul { display: block; }
everything is fine, only on my hovering, the sub UL is not displaying even i made it to display as BLOCK on hover. can anybody help with this please? thank you very much [edit] in fact it is working in FF but not in IE [/edit] check out parrisstudios(dot)com/mirage_framing In firefox it is normal, but in ie 6 when you hover over one of the links it gives you a weird drop down box type thing, but it wont go away until you refresh. I wan't to say it is like that peek-a-boo bug but backwards.... Code: ul{
margin: 0;
padding: 0;
list-style:none;
width: 410px;
float:left;
position:relative;
line-height:20px;
}
ul a{
line-height:10px;
float:left;
display:block;
padding: 0 12px;
text-decoration:none;
color: #C0AEA0;
position:relative;
}
li a:hover {
margin: 0;
padding: 0 12px;
float:left;
position:relative;
background-color:#EADED2;
line-height:20px;
}
ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}
li a{
display:block;
text-decoration:none;
color: #C0AEA0;
float:left;
position:relative;
line-height:20px;
}
THANKS! Hello, This is my first post, so let my start by saying thanks and hopefully this can be of some help. I work in a college, and I'm somewhat unfamiliar with the CSS used. I also apologize in advance if my issue is simple, but I looked through the rules and resources sections and I felt my issue was somewhat specific. In an effort to save time and frustration, I'll put it in the simplest terms I can: I'm trying to make the site I have control over have a menu that drops down upon mouseover. The site is he www dot ccm dot edu/admissions The menu I'd like to make expandable on mouseover is the "Things to Do" menu on the right side of the page. For example, here's how another site does it: www dot ecc dot edu/admissions You can see the menu on the left side of the page, "Admissions Checklist". I show that site as an example because we're using the same templates. I inquired as to how they achieved the menu on their site, but they unfortunately didn't know. If possible, I'd like to have the menu expand upon mouseover instead of a click. Below are the copied CSS codes for each menu. The site I want the menu to be able to expand on mouseover: Code: /* TodoList */
.AC-TodoList {position:absolute;top:7px;right:-27px;background:#eeeac3;width:164px;padding:19px 13px 0px;}
.AC-TodoList DIV {padding-bottom:14px;text-align:center;}
.AC-TodoHeader {padding-left:21px;}
.AC-TodoHeader H4 {background:url(../images/admissions/header_thingsToDo.gif) no-repeat;width:116px;height:14;text-indent:-9999px;overflow:hidden;}
.AC-TodoList .AC-TodoCheck {display:none;}
#zone1 .AC-TodoList A {display:block;background:url(../images/admissions/bg_todoSm.gif) no-repeat;width:153px;height:22px;padding:8px 5px 4px;font-weight:bold;color:#8d8a6e;}
#zone1 .AC-TodoActive A {background-position:0px -34px;color:#fff;}
#zone1 .AC-TodoComplete A {background-position:0px -68px;width:128px;padding-left:30px;text-align:left;}
#zone1 .AC-TodoList A.large {background-image:url(../images/admissions/bg_todoLg.gif);height:36px;line-height:1.4em;}
#zone1 .AC-TodoActive A.large {background-position:0px -48px;}
#zone1 .AC-TodoComplete A.large {background-position:0px -96px;}
.AC-TodoListCt .controls {display:none;}
And the site that already has the effect I'd like to use:
/* To Do List */
#AC-TodoList {margin:0px -20px 0px -24px;background-color:#586A3E;padding-left:24px;}
#AC-TodoList INPUT {display:none;}
#AC-TodoList .AC-Spacer {display:none;}
#AC-TodoList .controls {display:none;}
.AC-TodoHeader {display:block;width:220px;height:32px;cursor:pointer;}
.AC-TodoHeader H4 {margin:0px;padding:0px;font-size:1em;font-weight:normal;line-height:1.6em;text-transform:uppercase;color:#f9e9b6;padding:0px 0px 0px 5px}
.AC-TodoHeader H4 A {color:#f9e9b6;}
.AC-TodoOpen H4 {background-color:#7F0000;position:absolute;width:233px;height:32px; }
.AC-TodoOpen h4 A {width:238px;height:32px; background-color:#7F0000;}
.AC-TodoContent {background-color:#ffffff; position:absolute;width:238px;height:0px;overflow:hidden; z-index:999; color:#F9E9B6;}
.AC-TodoIncomplete {background:url(../images/admissions/todo_checked.gif) no-repeat 7px 8px transparent; border-bottom:solid 1px #C9C9CA;}
.AC-TodoIncomplete a {display:block;padding:4px 10px 2px 30px;color:#7F0000;text-decoration:none;font-weight:normal;}
.AC-TodoComplete {background:url(../images/admissions/todo_checkedCom.gif) no-repeat 4px 8px transparent; border-bottom:solid 1px #C9C9CA; background-color:#B2B3B4;}
.AC-TodoComplete a {display:block;padding:4px 10px 2px 30px;color:#ffffff;text-decoration:none;font-weight:normal;}
.AC-TodoFooter {background:url(../images/admissions/todo_footer_bg.gif) no-repeat;width:238px;height:41px;cursor:pointer;}
I apologize if I'm breaking any rules, or my issue is simplistic. I especially apologize if my issue isn't well illustrated because of the no links policy. But thank you in advance to anyone that might be able to help. Hi all, haven't had to post for awhile. Need some help! Am trying to create a popup box below menu when hovering over link, strictly using CSS. My problem is everything's working perfect in IE(a rarity), but in Firefox the box pops up too high and is wider than I want Here's the code... CSS: Code:
body {
margin: 0; padding: 0;
background: url(bodybg.jpg) repeat-x #000;
}
#header {
position: absolute; top: 0; left: 0;
width: 100%; height: 100px;
background: url(metalpipe2.png) bottom repeat-x;
margin: 0; padding: 0;
}
#leftcontent {
position: absolute; top: 110px; left: 0;
width: 125px; height: 700px;
margin-left: 15px; padding: 0;
}
/*moved background to #leftcontent a. Can now create transparent gap for background to show between links.*/
#leftcontent a {
display: block;
margin: 0; padding: 5px;
font-weight: bold; font-size: 17px;
background: #222; color: #C00;
font-family: Arial;
text-align: center;
text-decoration: none;
}
#leftcontent a:hover {
color: lightgrey;
border: none;
}
/*had to add border: none; to make span box work in IE*/
#leftcontent a span {
display: none;
}
#leftcontent a:hover span {
display: block;
position: absolute; top: 255px; left: 0;
width: 135px;
margin-left: -5px; padding: 5px;
background: #000; color: lightgrey;
font-size: 12px;
border: 1px solid white;
}
#midcontent {
position: absolute; top: 110; left: 155px; right: 25px;
height: 700px;
margin: 0; padding: 0;
background: #F5F5F5;
}
#midcontent p {
margin: 0; padding: 20px;
}
HTML: Code:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="TestPage.css" type="text/css" media="screen" />
<style type="text/css">
<!--
#leftcontent a#link1 {
color: #C00;
background: #444;
border: none;
padding: 5px;
}
--> </style>
</head>
<body>
<div id="header">
<img src="x-fire_logo_t4.png" alt="X-Fire logo" />
</div> <!-- end #header -->
<div id="leftcontent">
<a href="link" id="link1">Home</a>
<a href="link" id="link2">Home Fire Sprinklers<span>Text for<br />a:hover span { }<br />popup window</span></a>
<a href="link" id="link3">Fire Alarm Systems</a>
<a href="link" id="link4">Burglar Alarm Systems</a>
<a href="link" id="link5">Insurance<br /> Info.</a>
<a href="link" id="link6">Contact Us</a>
</div> <!-- end #leftcontent -->
<div id="midcontent">
<p>Here's my dilema. Hover over Home Fire Sprinklers link. There should be a popup window below menu.<br />Popup location & width looks great in IE.<br />But in Firefox it pops up higher & wider than I wish. </p>
<p>Could someone tell me what I'm overlooking?...Many Thanks!</p>
<p>Got idea from <a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">Eric Meyer's site</a>. His page doesn't encounter this problem and I can't see anything special in the source that's much different from mine.</p>
</div> <!-- end #midcontent -->
</body>
</html>
Many Thanks, James |
|||||||