|
CSS - Firefox/ie Menu Problems
If you view my website http://jordanmeeter.com/index you'll see how the menu displays, and how it is supposed to appear. And then if you view the website in IE, you'll notice that there are grey boxes inbetween each menu item. What is causing this? Here is the HTML:
Code: <div id="navcontainer">
<ul id="navlist">
<li><a href="#" title="One">One</a></li>
<li><a href="#" title="Two">Two</a></li>
<li><a href="#" title="Three">Three</a></li>
<li><a href="#" title="Four">Four</a></li>
<li><a href="#" title="Five">Five</a></li>
</ul>
</div>
And the CSS: Code: #navlist {
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}
#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}
#navlist li a {
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #38739D;
background: #616161;
text-decoration: none;
color: #A5D3EF;
}
#navlist li a:link { color: #A5D3EF; }
#navlist li a:visited { color: #A5D3EF; }
#navlist li a:hover {
border-color: #54ACEB;
color: #FFF;
background: #616161;
}
Similar TutorialsHello ppl, I made a website using some mouseover menus, this is the simpliest way I found to create some menues using divs and css but I have a problems in firefox and netscape, the menu it's not apearing at all when i go over a TD which has the onmouseover property. I tried to add the mouseover property to the image from that TD but I had no succes and to a link which I made for test , nothing happent . In opera and IE everything is working fine. the link is here www.medimpact.ro 10x in advance see ya all I'm hoping I can get some guidance on why I can't get this popout menu to work! I used the code from this article to build a popout menu, but for some reason I can't get it to work in firefox. If you test their demo in Firefox but if you test mine, it looks great in Internet Explorer, but gets all messed up Firefox & Opera. If you save the page you will see there is a style sheet as well as a small Javascript file too. If someone could check over my code for me that would be great! I have been staring at it for hours and can't seem to find the problem! This is my first project using CSS styles to control something besides the usual things like fonts, etc. so go easy on me! Thanks in advance! Chelsea 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>
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;
}
Hi, I'm designing the following site: http://www.texasmocktrial.org if you click on the top menu in fire fox, you'll notice that the connector to the menu in the top left hand corner is not aligned properly. in IE, there is no problem. ironically, i originally designed this site for firefox and now i cant figure out what i did to cause this problem. here is the css & javascript file: http://www.texasmocktrial.org/templates/style.css http://www.texasmocktrial.org/templates/menu.js can anyone figure out what seems to be the problem? thanks. Hello, I'm having a slight issue with what I belive to be margins. In IE half the logo is being cut off and in firefox I have a grey area above the menu bar that shouldn't be there. I have checked both my css and xhtml both validated fine with out any warnings. I'm pretty new to CSS and this is starting to annoy me =\. **WARNING** The site is political in nature. Links to the code: h**p://www [.] dncreform [.] com / t / css / main.css h**p://www [.] dncreform [.] com / t / Thank You, William look at URL in both IE and Firefox, and see the difference. It's really butchered in Firefox, and I REALLY don't see why. My code seems okay. source: PHP 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>my index...</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body class="body"> {start loop} <div class="content2"> <div class="newsheader"><p class="leftalign"><b>{title}</b></p><p class="rightalign">{author} - {day} / {month} / {year}</p></div> <div class="newscontent">{content}</div> <div class="newsfooter"><p class="rightalign"><a href="{commentsurl}">see comments</a></p></div> </div> {end loop} {next page} </body> </html> CSS: PHP Code: a { color: #000000; text-decoration: underline; } a:hover {color: #808688;} body { background: #F2F0F0; color: #880000; text-align: center; } div.content { border: 1px solid; margin-top: 1px; margin-left: 0px; margin-right: 5px; padding-left: 0px; padding-top: 2px; padding-bottom: 2px; padding-right: 2px; text-align: center; width: 97%; border-color: #880000; float: inherit; } div.content2 { border: 1px solid; margin-top: 0px; margin-left: 0px; margin-right: 0px; padding-left: 4px; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; text-align: center; width: 90%; background-color: #C9C9C9; float: inherit; } div.newsheader { margin-left: 0px; margin-right: 0px; width: 100%; background-color: Maroon; border-bottom: 1px solid; padding-bottom: 3px; color: white; float: inherit; } div.newscontent { text-align: justify; padding: 2px; color: black; } div.newsfooter { margin-left: 0px; margin-right: 0px; width: 100%; border-color: Maroon; border-top: 1px solid; padding-bottom: 3px; color: black; float: inherit; } div.container { margin-left: auto; margin-right: auto; text-align: center; width: 100%; } p.rightalign { float:right; } p.leftalign { float:left; } if anyone could help.. im losing my calm :P on this page the image on the left that reads "Grade" is 10px from the side (where it should be) in IE... but in firefox, it isnt 10px from the side... but rather 0px... when i change the margin-right to 20px instead of 10px, it looks fine in Firefox, but 10px too far over in IE. any help would be GREAT thanks http://925-sterling-silver-jewelry....udes/header.php well this is my first proper CSS based site but i am having troubles with it. the problem is that in IE the div (main) starts near to the sidebar div, wheras in firefox it starts a bit further away! also at the moment the links at the bottom dont appear in IE but do in FF albeit little messed up. help please? hi, I wonder if anyone can help with my layout problems in Firefox, i have tried to have vertically alignment on the whole page, its looks ok in IE but not FF. Im fairly new to CSS so if anyone can spot what i have done wrong that would be great link to layout here thanks Hi Y'all I am experiencing some clearance problems in Firefox. The following page: http://temp.awebcompany.net/contact.php The left column ( #left) overlaps the page content (#middle). It all looks nice and clears properly in IE - which I found shocking as I was expecting the problem in IE not FF. Any ideas how to fix this? I have tried the following on #middle and also on #pagecontainer: #middle:after { content: "."; display: block; height: 0; clear: both; visibility:hidden; } Thanks, Vince I've been pulling out my hair trying to figure out what it is i'm doing wrong here. I've been messing with this code and trying different things, but can't seem to figure out what the problem is. One of my divs is not sized properly. Can someone take a quick look and see what it could be? I'd realyl appreciate it. Thanks! http://ritchie.acomp.usf.edu/~lamba/my2.html I'm trying to do some positioning with CSS laying out borders for my website which are composed of images. ie....border_left.jpg and border_bottom.jpg. My style sheet looks like this. .border_image_left { position: absolute; top: 119px; left: 0px } .border_image_bottom { position: absolute; top: 719px; left: 0px } In my html I have code like this. <p class="border_image_left"><img src="img/left_border.jpg"></p> <p class="border_image_bottom"><img src="img/bottom_border.jpg"></p> however IE and Firefox are rendering it different Firefox shows more space than IE. Anyway to correct this issue. Or any other trick for laying out borders with using a table? Thanks Hi, I have managed to rewrite my three column navigation page using floated divs instead of its original table (the page was written years ago and I am updating to get away from tables). This was hard for me because I am very new to CSS. My code validated and the page looks fine in IE but in Firefox the third or right column does not clear the middle column. I tried to google the problem but the explanations are way over my head. Also the only way I could get the blue border to not show up in firefox was to add the style directly to the image code. Can someone please help me. The link is www.medeaslair.net/myths.html. Here is the CSS Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Greek Myths</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Rose A. Rosencrans" />
<style type="text/css">
body {
text-align: center;
padding-top: 45px;
background-image: url("images/tan_marble3.jpg");
color: black;
font-family: papyrus;
font-weight: bold;
font-size: 15px;
}
a:link {
color: blue;
}
a:visited {
color: green;
}
a image {
border-style: none;
}
#container {
margin: 0 auto;
width: 750px;
text-align: left;
}
#columnone {
float: left;
margin: 0;
width: 250px;
padding-top: 45px;
}
#columntwo {
float: left;
width: 250px;
padding-top: 45px;
}
#columnthree {
float: right;
clear: both;
padding-top: 25px;
}
h1 {
text-align: center;
}
h3 {
text-align: center;
}
#email {
text-align: center;
text-decoration: none;
padding-top: 150px;
border: 0;
}
ul {
margin: 0 auto
width: 750px;
}
li {
text-size: 12px;
text-decoration: none;
padding-right: 4px;
margin: 0 auto;
margin-bottom: 2px;
border-style: none;
list-style-type: none;
}
</style>
</head>
Here is the HTML Code: <body> <div id="container"> <img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" /> <img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" /> <h1>Tales of Greek Mythology</h1> <img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" /> <br /> <div id="columnone"> <ul> <li style="font-size: 15px; text-decoration: underline; padding-bottom: 4px;">Gods and Goddesses</li> <li><a href="aphrodite.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Aphrodite</li> <li><a href="apollo.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Apollo</li> <li><a href="artemis.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Artemis</li> <li><a href="athena.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Athena</li> <li><a href="dionysus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Dionysus</li> <li><a href="hades.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hades</li> <li><a href="hera.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hera</li> <li><a href="hermes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hermes</li> <li><a href="poseidon.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Poseidon</li> <li><a href="zeus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Zeus</li> <li style="font-size: 15px; text-decoration: underline; padding-top: 210px; padding-bottom: 4px;">Tales of Love and Woe</li> <li><a href="hermes.html#baucis"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Baucis and Philemon</li> <li><a href="cupid.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Cupid and Psyche</li> <li><a href="pan.html#echo"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Echo and Narcissus</li> <li><a href="pan.html#endymion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Endymion</li> <li><a href="artemis.html#orion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orion</li> <li><a href="orpheus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orpheus and Eurydice</li> <li style="font-size: 15px; text-decoration: underline; padding-top: 60px; padding-bottom: 4px;">Giants and Beasts</li> <li><a href="artemis.html#otus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Otus and Ephialtes</li> <li><a href="minotaur.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Minotaur</li> <li><a href="cyclopes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Cyclopes</li> </ul> </div> <!-- end of columnone div --> <div id="columntwo"> <ul> <li style="text-size: 15px; text-decoration: underline;">Men and Heroes</li> <li style="padding-top: 4px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Agamemnon</li> <li><a href="atreus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Atreus</li> <li><a href="daedalus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Daedalus and Icarus</li> <li><a href="athena.html#erichthonius"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erichthonius</li> <li><a href="heracles.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Heracles</li> <li><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Hyacinthus</li> <li><a href="hera.html#ixion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Ixion</li> <li><a href="atreus.html#orestes"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Orestes</li> <li><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Pentheus</li> <li><a href="perseus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Perseus</li> <li><a href="phrixus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Phrixus</li> <li><a href="pandora.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Prometheus</li> <li><a href="hades.html#sisyphus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Sisyphus</li> <li><a href="atreus.html#tantalus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Tantalus</li> <li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Tales of The Sea</li> <li style="padding-top: 4px;"><a href="sea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /> </a>Sea Myths</li> <li><a href="circe.html#glaucus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Glaucus and Scylla</li> <li><a href="sea.html#nereus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nereus</li> <li><a href="sea.html#sirens"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Sirens</li> <li><a href="sea.html#triton"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Triton</li> <li style="text-size: 15px; text-decoration: underline; padding-top: 100px;">Tales of Interest</li> <li style="padding-top: 4px;"><a href="garden.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Mythic Garden</li> <li><a href="samhain.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Blessed Samhain </li> <li><a href="thor.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Thor</li> <li><a href="links.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Links and Credits </li> </ul> </div> <!-- end of columntwo div --> <div id="columnthree"> <ul> <li style="text-size: 15px; text-decoration: underline; padding-top: 20px;">Women and Witches</li> <li style="padding-top: 2px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Alcmene</li> <li><a href="athena.html#arachne"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Arachne</li> <li><a href="circe.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Circe</li> <li><a href="dionysus.html#erigone"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erigone and Icarius</li> <li><a href="zeus.html#europa"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Europa</li> <li><a href="zeus.html#io"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Io</li> <li><a href="zeus.html#leda"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Leda</li> <li><a href="leto.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Leto</li> <li><a href="medea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Medea</li> <li><a href="leto.html#niobe"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Niobe</li> <li><a href="pandora.html#pandora"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Pandora</li> <li><a href="persephone.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Persephone</li> <li><a href="dionysus.html#semele"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Semele </li> <li><a href="pan.html#syrinx"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Syrinx</li> <li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Satyrs and Centaurs</li> <li style="padding-top: 4px;"><a href="chiron.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Chiron</li> <li><a href="dionysus.html#midas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>King Midas </li> <li><a href="apollo.html#marsyas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Apollo and Marsyas</li> <li><a href="chiron.html#nessus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nessus</li> <li><a href="pan.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Pan</li> <li><a href="chiron.html#peirithous"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Peirithous</li> </ul> </div> <!-- end of columnthree div --> </div> <!-- end of container div --> </body> </html> Im relatively new to CSS and im trying to make a navigation menu. I've been able to gather some code from other tutorials and finally got one that works fine under firefox 3.5, Opera 9 and IE8. However i've been told that its not working properly under IE7. Can anyone tell me if theres a fix for this? i've searched around other tutorials but couldnt make sense of them (which is probably why the CSS is a bit messy). Anyhelp would be greatly appreciated. link: users.tpg.com.au/tetsuo/css_help/index.html CSS: users.tpg.com.au/tetsuo/css_help/awis.css I've never used CSS to make a menu before so i used an online maker @ purecssmenu.com, unfortunately they don't appear to have a decent support forum or any means of emailing them. I'm having a small problem putting the menu in to my site. The banner image for the site is 800px. When i put the menu in its not wide enough and i can't see a way of making it fit. Also i'm using a table to position it. When its positioned to the left there seems to be some padding or somthing making it not align up with the banner image. It appears to be 1 or 2px short. The style for the menu is... Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#000000;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
height:21px;
float: left;
}
ul.pureCssMenu ul{
width:225.75px;
}
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:#000000;
border-width:1px;
border-color:#000000;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:normal 11px Tahoma;
color: #ffde00;
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:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#808080; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#ffde00;
border-color:#000000;
border-style:solid;
font:normal 11px Tahoma;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#ffde00;
border-color:#000000;
border-style:solid;
font:normal 11px Tahoma;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #557D4F !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:9px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./images/arr_white.gif)}
ul.pureCssMenu table a:hover table span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(./images/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(./images/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
And the html for the site is... Code: <!-- Start PureCSSMenu.com MENU --> <ul class="pureCssMenu pureCssMenum0"> <li class="pureCssMenui0"><a class="pureCssMenui0" href="/index.html">Home</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>About Us</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="/news.html">News & Events</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/promotions.html">Promotions</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/distribution.html">Distribution Network</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Services</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="/service.html">Service</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/delivery.html">Delivery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/m2m.html">Made to Measure</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Products</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="/linings.html">Linings</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/blackouts.html">Blackouts</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Interlinings</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="/interlining.html">Interlining</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/wadding.html">Wadding</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/2fold.html">2 Fold</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="accessories.html">Accessories</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Blind Systems</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="/bsm2m.html">M2M & Component</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/setsize.html">Set Size & Open Rail</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/motorisedbs.html">Motorised</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bsaccessories.html">Accessories</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bslinings.html">Linings</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Curtain Tracks</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="/easyflow.html">Easy Flow</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/trackservices.html">Track Services</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/handdrawn.html">Hand Drawn</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/corded.html">Corded</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/motorised.html">Motorised</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/panelsystem.html">Panel System</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/metalpoles.html">Metal Poles</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/woodenpoles.html">Wooden Poles</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Contract</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="/contractlinings.html">Contract Linings</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/contractfabrics.html">Contract Fabrics</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bamboo.html">Bamboo Fabrics</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/cushions.html">Cushions & Duvets</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/upholstery.html">Upholstery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/printing.html">Printing</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/irishlinen.html">Irish Linen, Garment Linings & Interlinings</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Contact Us</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="/general.html">General Enquiries</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/newenquiries.html">New Enquiries</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="/orders.html">Orders</a></li> </ul> <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a> <!-- End PureCSSMenu.com MENU --> <!-- (c) 2009, PureCSSMenu.com --> If anyone can help me make this 800px wide even if it means having a blank image at the end to fill any space and help removing any padding thats making it not appear full width it would be much appreciated. I have a vertical CSS menu using lists on my website. Everything looks ok when the page is first loaded but when I click on one of the menu items the left edge of the menu shifts to the left making the entire menu 10px wider. The div containung the menu has a left value of 10px but this seems to be ignored or overwritten when I click on a menu item. The right edge of the menu does not change. If I refresh the page it appears correctly again. Any ideas? the url is: http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html In IE8 beta it works perfectly. In firefox the entire bottom section (the part under the slide show) is messed up. In Opera there's a gap under the play controls. If I close the gap, it messes up IE. Getting this slide show to work was quite the task, but I'm close to having it work on the big three! Should I just un-nest everything? |
|||||||