|
CSS - Css Menu With Transition In Firefox?
I came across an article the other day explaining how to give css menus a blending transition effect. Unfortunatly the article I read was only for IE so it didn't work in Firefox. Does anyone know how I can add a transition effect that will work in Firefox?
Link to the article: http://www.ssi-developer.net/css/menu-rollover-effect_transition.shtml Similar TutorialsI 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> -------------------- Hi can anyone see a problem with this code, it sits absolutly perfectly in internet explorer, but the menu jus doesn't sit correctly in firefox any help appreciated cheers boyindie here is my css Code: ul#navlist
{
width: 230px;
padding: 0px;
height:200px;
border-right: 1px solid #808080;
border-top: 0px;
margin: 0px;
font: bold 25px verdana,helvetica,arial,sans-serif;
background: #3300cc;
}
ul#navlist li
{
width: 230px;
list-style: none;
margin: 0px;
border-left:1px solid black;
border-top: 1px solid black;
}
ul#navlist li a
{
display: block;
width: 230px;
padding: 4px 8px 4px 8px;
border: 1px;
border-left: 20px solid #330099;
background: #CCFFCC;
text-decoration: none;
text-align: right;
}
ul#navlist li a:link { color: #666677; }
div#navcontainer li a:visited { color: #666677; }
ul#navlist li a:hover{
border-color:#CCFFCC;
color:black;
background: #330099;}
Code:
body{
background-color:#C0C0C0;
color:Black ;
font:oblique 17px verdana,arial,sans-serif,impact;
}
h1{
color:Black ;
font:oblique 50px verdana,arial,sans-serif,impact;
}
div#content
{
width:770px;
background-color:white;
border-width:medium;
border-color:blue;
border-style:solid;
margin-left: 270px;
margin-right:190px;
padding-right:9px;
margin-top:0;
}
div#content h2
{
font: oblique 25px verdana;
color: black;
font-weight: normal;
}
div#content p
{
color:black;
margin: 0;
font:oblique 50% verdana,helvetica,arial,sans-serif,times-new-roman,impact;
;
}
div#content { line-height: 150%; }
#cleardiv
{
clear: both;
height: 1em;
}
div#footer ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
div#footer li
{
display: inline;
margin-right: 1em;
}
div#leftframe
{
left: 9px;
top: 130px;
height: 590px;
width:220px;
background-color:#3300cc;
}
div#topframe{
width: 1186px;
height: 120px;
background-color:#3300CC;
}
div#pageName{
background-color:#3300cc;
height: 11px;
width:60px ;
margin-left: 1000px;
margin-top:-90px
}
div#headImage{
width: 659px;
height:115px;
border-width:medium;
border-color:black;
border-style:solid;
background-color:white;
}
and my html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FTP Computing Limited</title>
<link rel="stylesheet" type="text/css" href="css/main.css" title="style1">
<link rel="stylesheet" type="text/css" href="css/menu.css" >
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<!--TOP FRAME CODE-->
<div id="topframe" >
<div id="headimage" style="" ><img src="header.jpg" alt="head banner" style="width: 494px; height: 120px" /> </div>
<div id = "pageName"><h1>home</h1>
</div>
</div>
<!--TOP FRAME CODE-->
<!-- LEFT FRAME CODE-->
<div id="leftframe" style="width: 266px" >
<div id="navcontainer"><br/><br/>
<!--Navigation menu code-->
<ul id="navlist" style="height: 263px" >
<li><a href="/index.htm" style="width: 230px">Home</a></li>
<li><a href="/background.htm" style="width: 230px">Background</a></li>
<li><a href="/develop.htm" style="width: 230px">Development</a></li>
<li><a href="/clients.htm" style="width: 230px">Clients</a></li>
<li><a href="/clients.htm" style="width: 230px; height: 28px;" id="A1" onclick="return A1_onclick()">CV</a></li>
<li><a href="/contact.htm" style="width: 230px">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content" style="margin-top:-555 ">
<h1>WELCOME</h1>
<h2>this is the home of FTP Computing Limited</h2>
<br/><br/><br/><br/><br/>
</div>
<!-- LEFT FRAME CODE-->
<!--MAIN BODY OF PAGE-->
<!--MAIN BODY OF PAGE-->
</body>
</html>
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;
}
can anyone help me figure out why the css javascript menu does not display the same in IE and Firefox? Are there common problems? Hi I'm having trouble getting my drop downs in my menu to work properly in firefox My website is www dot baliweddingsolutions dot com the menu's are truncating, I've looked at the css in firebug but can't for the life of me work out a fix, can anyone offer me some advice? Thanks Diana Hi; I got two problem in my code. 1) a list of menu could not sit in the center. 2) a list menu has a gap from top in the Firefox, but there is not gap from top from IE browser. And in the IE Browser, the list of menu sit too hight on the top. How could i sit the list of menu in the center and there are about 1px gas or not gas between the top and the menu bar in IE and Firefox. my code as following; Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font: 80% arial, helvetica, sans-serif;
background: white;
margin: 0;
}
#container{
position: relative;
width: 780px;
w\idth: 780;
border: solid #036;
border-width: 0 3px;
margin: auto;
}
#navlist
{
color: white;
text-align: center;
list-style-type: none;
padding-bottom: 1px;
}
#navlist li
{
bacground-color: #4c56d9;
margin-left: 1px;
display: inline;
border: 3px solid #4c56d9;
padding: 1px;
}
#navlist li a
{
text-decoration: none;
border: 2px solid #737be4;
padding: 2px;
color: white;
margin-left: 1px;
background-color: #4c56d9;
}
</style>
</head>
<body>
<div id="container">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Contact Us </a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</body>
</html>
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 Hi, I'm having a problem, I'm using the chunk of css code below to make a horizontal menu that I want to run across the 895 px #container that I've created. The menu fits perfectly in IE, but in firefox it overflows the last menu button the next line. How do I get the css menu to be the exact same width in firefox and IE?? Here's the css: Code: #snav ul
{
float:left;
width:100%;
padding:0px;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7.9em;
text-decoration:none;
text-align:center;
color:black;
background-color:#eed9ac;
padding:0.2em 0.6em;
border-right:1px solid black;
}
a:hover {background-color:#e7bb5b; text-decoration:underline; color:#9b2f1e}
li {display:inline}
Thanks for looking! Alrite, I have a dropdown menu that is fully CSS driven. The menu works fine except that the dropdown links dont work in Firefox. Once clicked the menu goes to the main heading link for the dropdown menu, instead of the dropdowns item link. However if u right click on the link and say open in new window/tab it works fine. I have attached the files. Thanks a lot Nick Hi, I have an issue with Vertical menu contained in Re-sizable DIV. This menu appears differently in IE vs Firefox (Please refer attached Image) http://img402.imageshack.us/img402/7830/resize.png URL Attached Image Following is the Code for the Style class mentioned in the image Code:
.cwc_navMenuLabel {
line-height:14px;
vertical-align:top;
white-space:nowrap;
}
.AccButton{
float: right;
align:right;
text-align: right;
position: relative;
top: -1px;
z-index: 10;
width: 16px;
margin:0 5px 0 0;
}
/*USE THIS FOR IE*/
.AccLiIE {
display: inline;
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
height: 19px;
white-space: nowrap;
}
/*USE THIS FOR NON-IE BROWSER*/
.AccLi {
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
white-space: nowrap;
}
Please let me know the change that i have to do in CSS to make the menu appear in IE the way it looks in Firefox. Thanks and appreciate your help Well, i'm designing a website for myself and i've run into a setback(i'm totally new to web design) with the navigation and how it appears in firefox. Heres how it displays in IE, and firefox.(well my url has been blocked so showing a picture may not be possible) I'd like it to appear in firefox the same as IE.. Heres the html code: Quote: <div id="Navigation"> <ul> <li><a href="main.htm"><b>Homepage</b></a></li> <li><a href="home.html">About Me</a></li> <li><a href="home.html">My Interests</a></li><br> <li><a href="home.html">Cool Sites</a></li> <li><a href="home.html">My Opinions</a></li> </ul> </div> Css code thats formatting the <div> and its contents. Quote: #Navigation { width: 9em; border-left: 3px #000000 solid; padding: 0 0 1px 0; magin-bottom: 2px black; font-family: Verdana; background-color: #202020; color: #4b225b; text-align:c enter; font-size: 10pt; font-weight: normal; } #Navigation ul { list-style: none; margin: 0; padding: 0; border: none; } #Navigation li { border-bottom: 1px solid #202020; margin: 0; } #Navigation li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px #202020 solid; background-color: navy; color: #ffffff; text-decoration: none; width: 100%; } #Navigation li a:hover { border-left: 10px solid black; background-color: black; color: #white; } I wonder if its possible to help me find the cause of the issue as i'd prefer that it appear the same in both IE and Firefox >.> Thank you for your help 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 Hello 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 the menu at the site I am building myself at: http://sphinxgaming.ath.cx/ Works perfectly in firefox, all links are missing on the menu in IE And the validator gives me some very strange errors (document type does not allow element "BODY", for example) http://validator.w3.org/check?uri=h...lidator%2F1.654 Any ideas? By the way, I have tried 3 different DOCTYPES, with no better results How do I fix this CSS-Firefox Issue? I have a horizontal CSS menu with a width of 400px. There are four elements each with a width of 100px. The height is 50px (if that matters at all). This whole menu is centered using the <center> tag right outside the <ul> tag which I use to center the menu. The following is the CSS I'm using. It's not fully complete with respect to the images. The problem is that the elements (with a width of 100px) will all line up horizontally as expected in IE, but the fourth element drops off (vertical ~20px vertical shift) in Firefox. I have tried adjusting the width of the <ul> in the CSS and it will bring all the elements on the same horizontal level if I change the width to 500px, but it doesn't center the menu anymore. Is there anyway I could center my menu without the error in Firefox. CSS: #nav {width:400px; list-style:none; overflow:hidden;} #nav ul li {padding: 10px; list-style-type:none; display:inline; /*text-indent: -9999px;*/} #nav a {display:block; float:left; text-decoration:none; outline:none; width:100px; height:35px;background-image: url(MenuBar.gif);} #home {} #home:hover {background-position:0 -100px;} #products #products #history #history #contact #contact #nav a:link {color:blue;} #nav a:hover {color:green;} a {outline:none;} HTML: <td width="80%" id="nav"><center><ul id="nav"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="product">Products</a></li> <li><a href="#" id="history">History</a></li> <li><a href="#" id="contact">Contact</a></li> </ul></center> </td> [This menu is organized by a large table, hence the 80% width which helps organize the elements of the page] PLEASE Help me. I can't seem to get it working. EDIT: Solved. Here is the issue in firefox: It's displaying the divider 1 pixel down? It displays inline with IE. The code is: #navigation { height:37px; background: url(/img/menu_bg.jpg) repeat-x; } #navigation ul{ list-style:none; } #navigation ul li{ display: block; float: left; width:83px; /* 751 divided by number of items (9) */ text-align:center; background: url(/img/divider.jpg) right no-repeat; line-height:37px; } #navigation ul li.last{ background: none; } #navigation a:link,#navigation a:visited { color:#FFFFFF; font-weight:bold; text-decoration:none; } #navigation a:hover { color:#ff9f47; } Help appreciated. 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 My drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code. Code:
#menu {
width: 769px;
height: 27px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background: #000000 url(images/SDCB-menu-bar.gif);
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 125px;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000000 url(images/SDCB-menu-bar.gif);
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Here is the HTML. Code:
<div id="menu">
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li>
<li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li>
<li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li>
<li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="History">History</a></li>
<li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li>
<li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li>
<ul>
<li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li>
<li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li>
</ul>
<li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li>
<li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li>
<li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li>
</ul>
</ul>
</div>
Thank you in advance I'm starting to get a headache trying to figure out what the problem is with Firefox on this issue... A highlighted menu should drop down over the div beneath it. It works fine in Opera & IE, but Firefox gets moody about it. geekville.net Any ideas? Thanks! EDIT: Nevermind, I made it work. 2am is a good time to stop writing css. Hello, I have a problem to display a List/Menu in IE. It cut off the text in the drop down list when I set the WIDTH of the drop down box shorter than the text. It works fine in FireFox. Here is the picture I captured to demonstrate what I'm talking about. Sorry the forum don't allow me to post url, please copy the link and paste it in your browser linklighthouse.com/dropdown_ie.html How do I fix this problem in IE? Please help! Thanks |
|||||||