|
CSS - Menu Not Displaying Same In Ie And Firefox
can anyone help me figure out why the css javascript menu does not display the same in IE and Firefox?
Are there common problems? Similar TutorialsI'm working on a client's website and trying to get the navigation menu to look right in firefox, for some reason it seems to ignore all width properties and the table cells overlap, but only in firefox. IE displays it perfectly, any help would be appreciated. www.entsource.com/hcs/ It is source viewable and the css code follows: a.nav { color: black; text-decoration: none; border: 1px solid #6D92A2; width: 150px; padding: 2px; font-family: tahoma; font-size: 11pt; text-align: center; } a.nav:hover { color: #F80808; text-decoration: none; border: 1px solid #F80808; width: 150px; padding: 2px; font-family: tahoma; } table.pane { width: 900px; } td.nav-cell { width: 155px; border-right: 2px solid #6D92A2; } td.main { width: 750px; padding: 10px; } hr { color: #6D92A2; height: 1px; width: 400px; } strong.header { color: white; background-color: #CCCCCC; width: 700px; height: 20px; border-top: 1px black solid; border-bottom: 1px black solid; font-size: 16pt; font-family: tahoma; } strong.bold { color: black; font-size: 16pt; font-family: tahoma; } I am using the below CSS to display a photo at the top of my pages. The CSS worked fine with the original photo (using a template) on both firefox and IE. However, when I changed the photo for my own it stops appearing on IE. Firefox displays the picture perfectly, and the div that holds the image is sized correctly (shows as white space on page). Does anyone know why this may be happening? I am using IE 7. The rest of the CSS is working, even the links to other images I use as backgrounds. Code: #header-photo {
clear: both;
height: 200px;
width: 790px;
margin: 0 auto;
background: #FFF url(header-photo.jpg) no-repeat center center;
} For some reason the table isn't being positioned properly in firefox, but it is in IE. The attribute top:15% seems to not be used in firefox, does anyone know if I should be doing it another way? Here is my css: Code:
div.leftBorder
{
position:absolute;
height:100%;
width:15%;
background-color:#DDDDDD;
}
p.imgText{
font-size:18px;
position:absolute;
left:1%;
top:1%;
color:#CC0000;
}
table.menuTable{
position:relative;
top:15%;
}
Here is the html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="specs.css">
<title></title>
</head>
<body>
<div class="leftBorder"></div>
<p class="imgText">MEDITECH Interface Specifications</p>
<center>
<table class="menuTable" cellspacing=0>
<!-- Spec number menu Title -->
<tr>
<th class="menuTitle">Spec. Number</th>
<th class="menuTitle">Description</th>
</tr>
<!-- Spec number menu -->
<tr>
<td class="menuSpec"><a href=".\R404.htm" target="iframe">R404</a></td>
<td class="menuDesc">MEDITECH MAGIC C/S Admissions System to Other Vendor Ancillary System</td>
</tr>
<tr>
<td class="menuSpec"><a href=".\R469.htm" target="iframe">R469</a></td>
<td class="menuDesc">EDI Integration: ANSI Formats 270 and 271 for Insurance Eligibility
</tr>
<tr>
<td class="menuSpec"><a href=".\R948.htm" target="iframe">R948</a></td>
<td class="menuDesc">MEDITECH MAGIC C/S ITS Orders to Other Vendor Image Viewing System</td>
</tr>
<tr>
<td class="menuSpec"><a href=".\R949.htm" target="iframe">R949</a></td>
<td class="menuDesc">MEDITECH MAGIC C/S ITS Reports to Other Vendor Image Viewing System</td>
</tr>
<tr>
<td class="menuSpec"><a href=".\R953.htm" target="iframe">R953</a></td>
<td class="menuDesc">Other Vendor Image Status Updates to MEDITECH ITS Application</td>
</tr>
</table>
<iframe name="iframe" frameborder=0 marginwidth=10 width=70 height=70></iframe>
</center>
</body>
</html>
Hello Can anyone tell me where this code is going wrong, works fine in IE, firefox shows all the menu under one another. Here is my code - css Code:
div#menuContainer
{ width:146px;
position:absolute;
margin:0px;
background:#ffffff;
height:400px; }
ul#mainMenu{ margin:0;
padding:1px 0;
list-style:none;
width:100%;
height:21px;
border-left:1px solid #ffffff;
font-family:verdana, arial, helvetica;
font-size:12px;}
ul#mainMenu li{ margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:146px; }
ul#mainMenu li a:link{ padding:4px 0; display:block; text-align:center; text-decoration:none; background-color:#333333; color:#ffffff; width:146px; height:25px; border-right:1px solid #ffffff; border-top:1px solid #ffffff;
font-family:Arial, Helvetica, sans-serif; font-size:16px;}
ul#mainMenu li a:visited{ padding:4px 0; display:block;
text-align:center;
text-decoration:none;
background-color:#999999;
border-top:1px solid #ffffff;
border-right:1px solid #ffffff;
color:#ffffff;
width:146px;
height:25px;
font-family:Arial, Helvetica, sans-serif; }
ul#mainMenu li a:hover{ padding:4px 0;
display:block;
text-align:center;
text-decoration:none;
background-color:#666666;
color:#ffffff;
width:146px;
height:25px;
border-right:1px solid #ffffff;
border-top:1px solid #ffffff;
font-family:Arial, Helvetica, sans-serif; }
ul#mainMenu li a:active{ padding:4px 0; display:block;
text-align:center;
text-decoration:none;
background-color:#999999;
color:#ffffff;
width:146px;
height:25px;
border-right:1px solid #ffffff;
border-top:1px solid #ffffff;
font-family:Arial, Helvetica, sans-serif;}
ul#mainMenu li ul.subMenu { display:none; margin:0; padding:0;
list-style:none; position:absolute;
left:147px;
top:0px;
padding:1px 1px 0 1px;
border-right:1px solid #FFFFFF;
background:#ffffff;
z-index:1000; }
ul#mainMenu li:hover ul.subMenu{ display:block; }
ul#mainMenu li ul.subMenu li{ width:146px;
clear:left;
}
ul#mainMenu li ul.subMenu li a:link { clear:left;
background-color:#000066; padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;
}
ul#mainMenu li ul.subMenu li a:visited{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000; }
ul#mainMenu li ul.subMenu li:hover a{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:1000;}
ul#mainMenu li ul.subMenu li a:active{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none;
border-bottom:1px solid #ffffff;
position:relative; z-index:1000;}
ul#mainMenu li ul.subMenu li a:hover{ clear:left;
background-color:#000099;
padding:4px 0;
width:146px;
border:none; border-bottom:1px solid #ffffff;
position:relative; z-index:1000; }
ul#mainMenu li ul.subMenu li ul.subMenu1{ display:none;
margin:0; padding:0; list-style:none;
position:absolute;
left:147px;
top:-2px;
padding:1px 1px 0 1px; border-right:1px solid #FFFFFF; background:#ffffff; z-index:900; }
ul#mainMenu li ul.subMenu li:hover ul.subMenu1{ display:block; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:link{ background-color:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:visited{ background:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li:hover a{ background:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:hover{ background:#000099; }
ul#mainMenu li ul.subMenu li ul.subMenu1 li a:active{ background:#000099; }
ul#mainMenu li ul.subMenu li a span{ position:absolute;
top:0;
left:132px; font-size:12pt;
color:#fe676f; }
ul#mainMenu li ul.subMenu li:hover a span{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
ul#mainMenu li ul.subMenu li a:hover span{ position:absolute; top:0; left:132px;
font-size:12pt;
color:#ffffff; }
html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <link rel="stylesheet" type="text/css" href="menu_style.css" /> </head> <body> <div id="menuContainer"> <ul id="mainMenu"> <li><a href="#" name="Home">Home</a></li> <li><a href="#" name="Services">Services</a></li> <ul class="subMenu"> <li><a href="#" name="internet marketing">Internet Marketing</a></li> <li><a href="#" name="web development">web development</a></li> <li><a href="#" name="e-commerce">e-commerce</a></li> </ul> <li><a href="#" name="About">About Us</a></li> <li><a href="#" name="case studies">Case Studies</a></li> <li><a href="#" name="Jobs">Jobs at toltech</a></li> <li><a href="#" name="Contact Us">Contact Us</a></li> <ul class="subMenu"> <li><a href="#" name="Location">Location</a></li> <li><a href="#" name="Enquiry Form">Enquiry Form</a></li> </ul> </ul> </div> </body> </html> Thanks in advance, gillian I've built a website using only div's and I am only having problems with one of them... I have the div with a margin-left : 48px; In IE this aligns the div with a section of text above it (the result I had wanted) however in Firefox it displays about 20pixels to the left of the IE display. If I set the margin-left : 96px; it aligns properly in Firefox but is then messed up in IE. I have an attachment of my code its not very large. Is there any fix for this problem? I am sure that this is no surprise to many of you and hope that someone kind help me find a solution. I am having trouble displaying a drop down CSS menu in IE7, it seems to work fine in Firefox. Please advise and thank you for all your help with this. I have spent far too much time on this and still can't figure it out. Website is located at: myasvn.org/_/campusrec/temp.php PHP Code: /* Navigation Menu */ ul#menu { background: rgb(63, 69, 76) url('../_media/bk-menu.png') repeat-x; list-style-type: none; list-style-image: none; list-style-position: outside; width: 950px; height: 34px; display: block; line-height: 34px; z-index:2; } ul#menu li a { display: block; color: rgb(255, 255, 255); text-decoration: none; text-align: center; } ul#menu li a:hover, ul#menu li:hover { background-color: rgb(53, 60, 66); } ul#menu li { border-right: 1px solid rgb(53, 60, 66); float: left; } ul#menu li ul { position: absolute; left: -999em; background-color: rgb(238, 238, 238); width: 165px; list-style-type: none; list-style-image: none; list-style-position: outside; } ul#menu li li { border-right: medium none; width: 157px; float: left; line-height: 30px; } ul#menu li li a { border-bottom: 1px solid rgb(210, 210, 210); width: 157px; color: #000000; text-decoration: none; text-align: left; padding-left: 8px; display: block; } ul#menu li li a:hover { color: rgb(255, 255, 255); background-color: rgb(204, 0, 0); } ul#menu li:hover ul { left: auto; } ul#menu li:hover ul, #menu li.sfhover ul { left: auto; } Hi there, I customized the content module so the title of an article displays an image before the text and the text is displayed with two colors!! The relevant part of the code is at follows: Code: <h2 class="title">
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<div><span class="image-title"></span>
<?php
$titles = explode(" ",$this->item->title);
for ($i=0; $i<count($titles)-1; $i++){
echo '<div style="float:left;padding-left:7px;color:#303030;">'.$this->escape($titles[$i]).'</div>';
}?>
<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div></a>
<div style="clear:both;height:0px;"></div>
<?php else : ?>
<div><span class="image-title"></span>
<?php
$titles = explode(" ",$this->item->title);
for ($i=0; $i<count($titles)-1; $i++){
echo '<div style="float:left;padding-left:7px;">'.$this->escape($titles[$i]).'</div>';
}?>
<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div>
<div style="clear:both;"></div>
<?php endif; ?>
</h2>
In both IE and Google Chrome everything is displayed as wanted (apart from ie which has some positioning problem but i'm not focusing on that now) In firefox, I can see the content loading correctly but just before the page finish loading the image disappears... I just can't understand why!! You can take a look at this url: Can anyone please help?? Thanks Here is a quick visual layout of my page (container) (div banner) (div left column) (div middle content) (div right column) (div footer) In my (div left column) is a list that is aligned right which works great. However, lower in the (div left column) I wish to make another list and align it left. The problem is it won't align all the way to the left. It stops at about the center of the div. I didn't notice it on the first list because it aligned right just fine but it also stops in the middle. Here is the HTML: (go easy on the coding, I'm still pretty new at this stuff) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="css/common.css" type="text/css" media="screen" /> <title>Las Vegas Floor Care</title> </head> <body id="body"> <div id="container"> <div id="banner"> </div> <div id="content"> <div id="content_left"> <div class="links"> <ul class="list"> <li><a href="index.htm"><span class="list_big">H</span>OME <span class="list_big">P</span>AGE</a></li> <li><span class="list_big">R</span>ESIDENTIAL</li> <li><span class="list_big">C</span>OMMERCIAL</li> <li><span class="list_big">C</span>ONTACT <span class="list_big">U</span>S</li> </ul> </div> <div class="special_offers">Special Internet Offers</div> <img class="image_center" src="images/coupon.jpg" /> <ul class="list_offers"> <li>Test 1</li> <li>Test 2</li> </ul> </div> <div id="content_middle"> <div id="content_middle_top"> </div> <p class="text"><img src="images/slogan.jpg" style="float:left; margin-right:2px" /> At Las Vegas Floor Care we use Prochem truck mount extractors, which have been rated number one for over 30 years. We also use the Bridgpoint brand of treatment solutions that are eco friendly, pet friendly, and are even biodegradable. We offer carpet repair, cleaning, and protection making you get more out of your carpet no matter what the situation. We also offer 3 different types of tile cleaning to fit the condition of your tile and your pocket book.</p> <br /> <p class="text">We cater to all aspects of cleaning ranging from the average home owner who wants clean floors to the executive who needs to keep their office in tip top shape, and everything in between. There is no job too big or small. We offer several service packages for home owners with yearly service contracts.</p> <div id="content_middle_bottom"> </div> </div> <div id="content_right"> <img class="image_center" src="images/contact.jpg" /> <div class="side_text">If you have questions or would like to schedule a cleaning, please contact us at <span class="contact_number">(702) 756-0148</span>.</div> </div> </div> <div id="bottom"> <img src="images/bottom_top.jpg" align="top"/> <p class="bottom_text"> Phone: (702) 756-0148 <br /> Fax: (206) 350-7320 <br /> </p> </div> </div> </body> </html> Here is the CSS: Code:
#banner {position:relative; width:700px; height:130px; clear:both; background-image:url(../images/banner.jpg)}
#body {text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/bg.jpg); margin-top:20px; background-position:center}
#bottom {position:relative; text-align:right; width:700px; clear:both; background-color:#970000}
.bottom_text {font-family:Calibri; font-size:14px; text-align:right; margin:0px 8px 0px 4px; color:#CCCCCC}
.contact_number {font-family:Calibri; font-size:12px; color:#970000}
#container {width:700px; margin-left:auto; margin-right:auto; text-align:left}
#content {position:relative; width:700px; overflow:auto; background-image:url(../images/content_bg.jpg); background-position:center}
#content_left {float:left; width:138px; margin-right:5px; clear:left}
#content_left_bottom {width:138px; background-color:#FF3399}
#content_left_top {width:138px; background-color:#FF3399}
#content_middle {float:left; width:414px}
#content_middle_bottom {width:414px; height:100px; background-image:url(../images/middle_bottom.jpg)}
#content_middle_top {width:414px; height:30px; background-image:url(../images/middle_top.jpg)}
#content_right {float:left; width:138px; margin-left:5px; clear:right}
#content_right_bottom {width:138px; background-color:#00FF00}
#content_right_top {width:138px; background-color:#00FF00}
.image_center {margin-left:auto; margin-right:auto; text-align:center; display:block}
.links a:link {text-decoration:none; color:#666666}
.links a:visited {text-decoration:none; color:#666666}
.links a:hover {text-decoration:underline; color:#970000}
.links a:active {text-decoration:none; color:#970000}
.list {font-family:Calibri; font-size:14px; list-style:none; text-align:right; margin:0px 4px 20px 4px; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#666666; padding-bottom:10px; padding-right:4px; color:#666666}
.list_big {font-family:Calibri; font-size:18px}
.list_offers {font-family:Calibri; font-size:12px; list-style:none; text-align:left; margin-left:0px; overflow:auto; color:#666666}
.side_text {font-family:Calibri; font-size:12px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}
.special_offers {font-family:Calibri; font-size:18px; text-align:center; margin-left:4px; color:#970000}
.text {font-family:Calibri; font-size:14px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}
Thanks ahead of time for any help. Hey all. I am having the hardest time trying to figure this one out. I have the menu working correctly in Firefox and Safari but its acting up a little in IE7. After a couple of hours of trying to figure this one out I figured I definitely need another eye or two to look it over. I think the problem is minor but then again I don't know. If you click here and view it in IE7 and then visit one of the links in the menu you will see what I am talking about. If one of the links have been visited and you hover over it the left part of the image does not display at all. ANY help at all would be so GREATLY APPRECIATED! here is the code for the menu. Code: div#logoSlim .navigationSlim {
position: relative;
top: 5px;
left: 75px;
}
div#logoSlim .navigationSlim ul{
list-style:none;
margin:0 auto;
}
div#logoSlim .navigationSlim ul li{
float:left;
list-style:none;
margin-left: 2px;
}
div#logoSlim .navigationSlim ul li a, div#logoSlim .navigationSlim ul li a:visited {
height: 19px;
float:left;
display:block;
color:#fff;
text-decoration:none;
text-transform: uppercase;
font: bold 12px Arial, Helvetica, sans-serif;
background: bottom;
font-weight:bold;
padding:0px 0 10px 11px;
text-align:center;
}
div#logoSlim .navigationSlim li a , div#logoSlim .navigationSlim li a:visited {
float:left;
display:block;
padding: 6px 10px 10px 1px;
}
div#logoSlim .navigationSlim li a span, div#logoSlim .navigationSlim li a:visited span{
float:left;
display:block;
padding: 6px 10px 10px 1px;
}
div#logoSlim .navigationSlim li.current a {
color:#fff;
background: url(../images/nav_slim_left.gif) no-repeat left 5px;
}
div#logoSlim .navigationSlim li.current a:visited {
color:#fff;
background: url(../images/nav_slim_left.gif) no-repeat left 5px;
}
div#logoSlim .navigationSlim li.current a span {
color:#fff;
background: url(../images/nav_slim_right.gif) no-repeat right 5px;
}
div#logoSlim .navigationSlim li a:visited {
color:#fff;
background: url(../images/nav_slim_left.gif) no-repeat left 5px;
}
div#logoSlim .navigationSlim li a:hover {
color:#fff;
background: url(../images/nav_slim_left.gif) no-repeat left 5px;
}
div#logoSlim .navigationSlim li a:hover span {
color:#fff;
background: url(../images/nav_slim_right.gif) no-repeat right 5px;
}
Hey there! Hey folks, Here's the page in question. The problem is, the menu is dropping behind the content boxes, and thusly, being inaccessable. Here's the code; Code:
#menu {
width:780px;
height:28px;
background: #CCCCCC url(images/menu_img.gif) no-repeat center top;
}
ul#nav {
padding: 0;
margin:0 25px 0 25px;
list-style: none;
}
li.navB {
float: left;
position: relative;
width: 230px;
margin:7px 0 7px 0;
font:bold 12px arial, verdana, sans-serif;
text-decoration:none;
color:#2F60C0;
}
li ul {
display: none;
position: absolute;
top: 15px;
left: 0;
padding:5px;
width:100px;
list-style:none;
margin:0;
}
li ul li{
padding:2px;
width:100px;
list-style:none;
margin:auto;
}
li:hover ul, li.over ul{
display: block;
background:white;
border:1px solid #333333;
width:100px;
padding:5px;
position:absolute;
}
not sure what the problem is. any help'd be greatly appreciated. Hi everyone A bit of a call for help with some niggly issues - all found on the following page and css: http://www.crashingbydesign.com.au/rsaa/index.html http://www.crashingbydesign.com.au/rsaa/home.css 1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!! 2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on?? All help appreciated. Cheers Bevester Hi, I'm using a right-to-left layout and I can't find a way to display my list items correctly on Firefox. When I insert something into the rtl div with a float, the list item does not wrap correctly. 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>
<style type="text/css">
<!--
#content {
margin:0 200px 0 20px;
border: 2px solid #000;
direction:rtl;
}
#floatdiv {
width:100px;
height:100px;
margin:10px;
border: 1px solid #000;
float:left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="floatdiv"</div>
<p>This is a test</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>
Is there a problem in my code? Thanks, Ehud. Hi all, This is the xHTML link This is the CSS file. Please open this in Internet Explorer. Notice that when the drop-down menu falls over the drop-down list form, it gets hidden beneath the list. I've spent a whole week trying to fix this but wasn't successful This works perfectly in Firefox though. Thanks!! My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? 1. top and bottom images are collapsing, i cant get them to display correctly without filling the html with either breaks or text 2. I cant get the images submenuedivider and submenuemarker to display simultaneously when i hover the links in the list. 3. Right now my soltuion to not display the divider image below the last element in the list is through the code: <li><a style="background-image: none;" href="x.html">SOmething</a></li> </ul> However, this also causes the mrker to not be seen above the list element as well, which isn't exactly what I wanted to happen, so what do I do? I'm stuck The CSS: Code: .leftCol
{
width: 190px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 10px;
float: left;
}
.leftCol body {font-size:100%; color: #FFF;}
.leftCol h1 {font-size:1.1em; font-weight:bold; color: #FFF;}
.leftCol h2 {font-size:1.0em; color: #FFF;}
.leftCol h3 {font-size:1.0em; color: #FFF;}
.leftCol p {font-size:0.875em color: #FFF;}
.submenue
{
width: 188px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
float: left;
background-image: url(images/submenue/submenuefiller.jpg);
background-repeat: repeat-y;
text-indent:25px;
}
.submenue ul {list-style-type: none; margin: auto;}
.submenue ul a {padding-bottom: 10px; background: url(images/Submenue/submenuedivider.png); background-repeat: no-repeat; background-position: bottom; display: block; line-height: 25px; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #FFF;}
.submenue ul a:hover {background-image: url(images/Submenue/submenuemarker.jpg);}
.submenuetop
{
width: 188px;
hight: 54px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url(images/Submenue/top.jpg);
background-size: 100%;
background-repeat: no-repeat;
margin: 0;
float: left;
}
.submenuebottom
{
width: 188px;
hight: 60px;
background-image: url(images/Submenue/bottom.jpg);
background-position: left top;
background-repeat: no-repeat;
margin-top: 54;
float: left;
}
The HTML: Code: <div class="leftCol"> <div class="submenuetop"></br><h1>something</h1></div> <div class="submenue"> <ul> <h3>Listing</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3.html">5</a></li> </br> <h3>Produkt</h3> <li><a href="1.html">1</a></li> <li><a href="2.html">2</a></li> <li><a style="background-image: none;" href="3">something</a></li> </ul> </div> <div class="submenuebottom"></br></br></br></br></div> </div> I have created a CSS menu and it works well in Firefox 1.5 and IE 6, but there's a problem with it in Firefox 1.0. See my menu he http://www.republiklabs.com/op/op1/rates2 The problem with this menu in Firefox 1 is that rather than stack the drop down items on top of each other, they fly out to the side horizontally. Any ideas why?? Here is all my CSS for the menu. Any help would be greatly appreciated!!! -------------------- .menu { font-family: verdana, arial, sans-serif; width:930px; margin:0 0 0 0px; } .menu ul { padding:0; margin:0; list-style-type: none; } .menu ul li { float:left; position:relative; } .menu ul li a, .menu ul li a:visited { display:block; text-align:left; text-decoration:none; width:170px; height:10px; color:#FFFFFF; line-height:9px; } .menu ul li ul { display: none; } .menu ul li:hover a { border-width:1px; } .menu ul li:hover ul { display:block; position:absolute; top:50px; left:0; } .menu ul li:hover ul li a { display:block; background: #747679 url(../images/nav_bg1.gif) no-repeat; color: #FFFFFF; padding: 3px 0px 3px 15px; border-width:0 1px 1px 1px; height:12px; } .menu ul li:hover ul li a:hover { background:#006EBD; color:#FFFFFF; } /* NAVIGATION END *******************************/ -------------------- Here is the code used to display the menu: <ul> <li><a class="hide" style="width:110px" href="#" onmouseover="MM_swapImage('nav1','','images/nav1_r.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/nav1.gif" alt="Funstuff" name="nav1" border="0" id="nav1"></a> <ul> <li><a href="home">Current Issue</a></li> <li><a href="event_calendar">Events Calendar</a></li> <li><a href="ask">Ask the Pros</a></li> <li><a href="stories">Submit a Story/Photo</a></li> <li><a href="review">Boat (equipment) Review</a></li> <li><a href="contest">Contest Form</a></li> <li><a href="competitions">Follow Competitions</a></li> <li><a href="survey">Online Survey</a></li> <li><a href="links">Links</a></li> </ul> </li> ... </ul> -------------------- I can't find the problem with my dropdown navigation bar that is CSS based. In firefox it works fine and page has no errors. In IE 6 the menu drop down doesn't work and I have an error on the page. In IE 7 the hover state and current state background doesn't take up the whole menubar like it should and does in Firefox. I also get a syntax error. I have validated my page with XHTML Trans 1.0 and Validated My CSS. Here is the link to the page. (no links are setup yet just #) http://www.nessphysiotherapy.com/index2.php Matt |
|||||||