|
CSS - List/menu Form Problem In Ie And Firefox
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 Similar TutorialsHi; 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>
Hi, I am working on this website atm: www.powys.gov.uk I have a problem with the menu, the problem is when you scale the browser window and the menu links(on the left column) are forced to wrap, the indentation of the link isnt the same e.g: Code: My Menu Link Has been wrapped I want it to be like: Code: My Menu Link Has been Wrapped The problem only occurs in IE, it looks perfect in Mozilla, can anyone offer any help on how I might fix this? I am out of ideas. Regards, Graham Heya! I am really new to html - creating my first website for uni course now. My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one. The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome. this is the html: <div id="ourproject"> <ul> <li>OUR<br> PROJECT <ul> <li><a href="index.html">Project Overview</a></li> <li><a href="Introduction.html">Introduction</a></li> <li><a href="participants.html">Participants</a></li> </ul> </li> </ul> </div> and my css: #ourproject ul { position:relative; color: #FFF; text-decoration: none; width: 102px; top:0px; left:0px; height:86px; list-style:none; float:left; padding-left:20px; border-left-width: 3px; border-left-style: solid; border-left-color: #FFF; } #ourproject ul:hover { color:#FF9900; border-left-color: #F90; padding-left:20px; } #ourproject ul ul { position:relative; visibility:hidden; z-index:2000; background-color:#0E1221; font-size: 12px; width: 602px; display: inline-block; height: 45px; float: left; top:25px; left:-23px; } #ourproject ul li { display: inline-block; margin-right:30px; height: 25px; float: left; margin-top:4px; width: 125px; } #ourproject ul:hover ul { visibility:visible; } #ourproject ul ul li{ width:80px; padding: 0; text-align:left; } In IE9 compatibility view, the menu is distorted. I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts. I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed. I hope to get some answer soon! Please ask any more question if you need to- i will be happy to answer. Thanks in advance. 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>
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 HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox. So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative. URL But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this. URL I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help! Advance thanks for those who read this! Hopefully someone can help me out with this! EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean. CSS CODE: Code: * {
margin:0;
padding:0;
}
#nav {
list-style:none;
position:relative;
}
#nav li {
float:left;
text-align:center;
}
#nav a {
display:block;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
background:#254563;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0px;
}
#nav ul {
position:absolute;
left:-999em;
list-style:none;
padding:0 0 0;
width: 500px;
}
#nav ul li {
width: auto;
margin: 3px 3px 0 0px;
}
#nav ul a {
font-size: 12px;
height: auto;
padding: 5px 10px;
background: #dfeec9;
border-radius: 8px;
-moz-border-radius: 8px;
width: auto;
}
#nav li:active ul, #nav li:hover ul {
height: 30px;
left: 10px;
position: relative;
padding: 0px 3px 5px 3px;
background: none;
width: 500px;
}
.navi01 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 33px;
height: 44px;
text-decoration: none;
background: url(images/navi_01.png);
}
.navi02 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 133px;
height: 44px;
text-decoration: none;
background: url(images/navi_02.png);
}
.navi03 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 86px;
height: 44px;
text-decoration: none;
background: url(images/navi_03.png);
}
.navi04 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 83px;
height: 44px;
text-decoration: none;
background: url(images/navi_04.png);
}
.navi05 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 92px;
height: 44px;
text-decoration: none;
background: url(images/navi_05.png);
}
.navi06 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 82px;
height: 44px;
text-decoration: none;
background: url(images/navi_06.png);
}
.navi07 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 30px;
height: 44px;
text-decoration: none;
background: url(images/navi_07.png);
}
HTML NAV CODE: Code: <ul id="nav"> <li><span class="navi01"> </span></li> <li><a href="originalart/gallery.php"><span class="navi02"> </span></a> <ul> <li><a href="originalart/gallery.php">Original Art</a></li> <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> <li><a href="commissions/gallery_commissions.php">Commissions</a></li> <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> </ul> </li> <li><a href=""><span class="navi03"> </span></a> <ul> <li><a href="info.php">Info</a></li> <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> </ul> </li> <li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04"> </span></a></li> <li><a href="http://blog.luisarafidi.com/"><span class="navi05"> </span></a> <ul> <li><a href="#">Old Artwork</a></li> <li><a href="#">More</a></li> </ul> </li> <li><a href=""><span class="navi06"> </span></a></li> <li><span class="navi07"> </span></li> </ul> I am having problems with a horizontal list menu. If you take a look at the link below I'm trying to get the top picture, menu and the main content area to all line up vertically. http://www.willisemail.co.uk/skill/ I may be wrong but the list menu seems to be the problem as it never lines up. Any help would be great or a suggestion on how to go about this another way. Thanks Jemes html { padding:0px; margin:0px; } body { background-color: #F5F5F5; font-size: 12px; color: #564b47; text-align:center; margin:0px; padding:0px; } /* Site Holder Start */ #box { width: 750px; margin: 0px auto; padding: 0px; text-align: left; border: 1px solid #979696; background-color: #FFFFFF; background-image:url(../Images/mid.jpg); } /* Site Holder End */ /* Site Holder Start */ #box2 { margin-left: 49px; margin-right: 50px; margin-top: 10px; margin-bottom: 10px; padding: 0px; text-align: left; } /* Site Holder End */ /* Content Start */ #content { width: 461px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /* Content Start */ #content2 { margin-left: 14px; margin-right: 15px; margin-top: 0px; margin-bottom:0px; padding:0px; background-color:#FFF; overflow: hidden; } /* Content End */ /*Right Menu Start*/ #right { width: 178px; padding:0px; float:right; background-color:#FFF; overflow: auto; } /*Right Menu End */ .imgRight { text-align:center; margin-top: 10px; } .imgMain { text-align:center; margin-top:10px; border: 1px solid #979696; } .Menu { margin-top:10px; padding: 0px; } .Menu ul { padding: 0px; margin:0px; list-style-type:none; } .Menu li { display: inline; list-style-type:none; padding: 1px; margin:0px; } .Main { margin: 0px; border: 1px solid #979696; margin-top:8px; margin-bottom:10px; } I'm having troubles with a list menu. The first problem I have is that the menu options dont fill the whole of the menu but do in Firefox. The second problem is that the padding is different in IE and Firefox and I would like them to be the same. If anyone could help that would be great. http://departments.brooklands.ac.uk/wine/example/ Jemes Essentially it lines up correctly but when I view it in firefox it doesn't. How should I tweak my code to make this work? Here is the url: http://www.westcadet.com/designs/index.htm Here is the CSS code snippet that is making this all work Code: /*--------------- Navigation Layout Begin ---------------*/
#HeaderTopLeftInnerRight {
width:618px;
height:100px;
vertical-align:top;
}
#NavMenu {
width:600px;
padding-top:22px;
}
#NavMenu ul {
list-style: none;
margin-left:22px;
}
#NavMenu li {
float: left;
padding-left:8px;
padding-right:8px;
}
#NavMenu li a {
color:#FFFFFF;
text-decoration: none;
}
#NavMenu li a:hover {
color:#EB2A2D;
}
.NavChosen {
background-color: #858181;
color:#FFFFFF;
}
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. On my website, my menu shows dots on FireFox, but none in Chrome and ie, I would want to remove the dots , is there any way i can do that? www.willietsang.co.cc Thanks in advance.! I'm trying to create a menu using 'list' but so far without much success :-( Problems? Not displaying horizontally in browser. Can't center text in box. Adding 'padding' didn't work. Any help would be much appreciated, Mike P.S. Please ignore the colors ;-) //paste.pocoo.org/show/207718/ Please add http to the above - I'm not yet allowed to .. Hi, I'm trying to make a simple rollover menu with a <ul><li> list. Here's my stylesheet: Code: .navigation{
width:768px;
height:26px;
padding: 94px, 0px, 10px, 5px;
z-index:999;
}
.navigation ul.nav li {display:inline}
.navigation ul.nav li a.link: hover{
color:#fbe8be;
font-family:times, serif;
font-size: 14pt;
text-decoration:none;
}
.navigation ul.nav li a.link:active{
text-decoration:none;
color:#bac4a1;
font-family:times, serif;
font-size: 14pt;
}
And here's my XHTML: Code: <div class="navigation"> <ul class="nav"> <li><a href="index.php" class="link">Home</a></li> | <li><a href="ScopeofServices.php" class="link">Scope of Services</a></li> | <li><a href="BaselineFees.php" class="link">Baseline Fees</a></li> | <li><a href="BaslineProcedures.php" class="link">Baseline Procedures</a></li> | <li><a href="Qualifications.php" class="link">Qualification<a></li> | <li><a href="contact.php" class="link">Contact Us</a></li> | <li><a href="considerations.php" class="link">Key Considerations & Pre-Conditions</a></li> </ul> </div> Here's the page: http://www.caillouette.com/SelvanSite/index.php Can anyone tell me why my rollovers don't work? thanks - Hi Folks This is my first post here, hopefully I'll keep to etiquette I'm always ready to be corrected if I step out of line. Anyway, I have an unusual problem I can't seem to solve. I am making a menu with drop downs using lists, I have it working in my HTML editor (CoffeeCup). When I try to view it in Firefox or IE7 the sub lists show and push the tabs I made to the side. Here is the CSS I'm trying to use, some I've taken from tutorials, some of my own (which is where the problem possibly lies) Code: /*1. Taken from http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ with thanks */
.btn {
float: left;
background: url(images/btn_left.png) no-repeat;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
width:100px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
color: #fff;
font-size: 1em;
text-decoration: none;
padding-bottom:25px;
padding-left:10px;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_home { background-color: #575757;padding-left:10px; }
.btn_e1 { background-color: #575757;padding-left:10px; }
.btn_e2 { background-color: #575757;padding-left:10px; }
.btn_e3 { background-color: #575757;padding-left:10px; }
.btn_e4 { background-color: #575757;padding-left:10px; }
.btn_e5 { background-color: #575757;padding-left:10px; }
.btn_home:hover { background-color: #DC134C; }
.btn_e1:hover { background-color: #DC134C; }
.btn_e2:hover { background-color: #FF00FF; }
.btn_e3:hover { background-color: #DC134C; }
.btn_e4:hover { background-color: #DC134C; }
.btn_e5:hover { background-color: #DC134C; }
/*End of 1*/
/*My random scrawlings*/
#navigation {
height:35px;
width:787px;
position:relative;
margin:0 auto 0 auto;
z-index:100;
}
#navmenu, #navmenu ul {
padding:0;
margin:0;
list-style-type:none;
}
#navmenu {
margin:0;
}
#navmenu li {
float:left;
position:relative;
text-align:center;
}
#navmenu li a, #navmenu li a:visited {
width:101px;
font-size:1em;
font-family:Arial;
height:16px;
text-decoration:none;
}
#navmenu li li a, #navmenu li li a:visited {
display:block;
width:122px;
color:#fff;
height:15px;
text-decoration:none;
z-index:100;
margin-left:-1px;
}
#navmenu li:hover > a {
background-color:;
color:#fff;
text-decoration:underline;
}
#navmenu li li:hover > a {
background-color:#DC134C;
color:#fff;
text-decoration:underline;
}
#navmenu li ul {
display: none;
}
#navmenu li:hover > ul {
display: block;
position: absolute;
top:0;
left:203px;
}
#navmenu > li:hover > ul {
left:0;
top:35px;
}
/*End of my random scrawling*/
And here is the HTML I'm using the create my lists Code: <div id="navigation">
<ul id="navmenu">
<li class="btn btn_home"><a>Home</a><span></span></li>
<li class="btn btn_e1"><a>Element 1</a><span></span></li>
<ul>
<li><a>Sub 1</a></li>
<li><a>Sub 2</a></li>
<li><a>Sub 3</a></li>
<li><a>Sub 4</a></li>
</ul>
<li class="btn btn_e2"><a>Element 2</a><span></span></li>
<ul>
<li><a>Sub 5</a></li>
<li><a>Sub 6</a></li>
<li><a>Sub 7</a></li>
<li><a>Sub 8</a></li>
<li><a>Sub 9</a></li>
</ul>
<li class="btn btn_e3"><a>Element 3</a><span></span></li>
<li class="btn btn_e4"><a>Element 4</a><span></span></li>
<li class="btn btn_e5"><a>Element 5</a><span></span></li>
</ul>
</div>
Any help in where I've been going wrong would be greatly appreciated. Thanks Dave I've been hit with a problem that I think isn't possible, but I'm hoping that someone else here might be able to offer some sort of solution. It's a bit complicated to explain, so I'll try and give as much detail as I can. I have a menu system set up on a site, and it's styled correctly for the way that one section works. It's a standard unordered list. FIRST MENU: Code: <ul>
<li>
<a href="page1.html">Link 1</a>
<ul>
<li><a href="page1.1.html">Link 1.1</a></li>
<li><a href="page1.2.html">Link 1.2</a></li>
</ul>
</li>
<li>
<a href="page2.html">Link 2</a>
<ul>
<li><a href="page2.1.html">Link 2.1</a></li>
</ul>
</li>
</ul>
SECOND MENU: Code: <ul>
<li>
<a href="page1.html">Link 1</a>
</li>
<li>
<a href="page2.html">Link 2</a>
</li>
</ul>
My problem is that I also need to style another menu match this - but the second menu has to have it's first-level links look like the second-level links in the first menu. This wouldn't be a problem normally as I'd be able to use different selectors, ID's or something else, but with this system, the menu is output from a closed function that I can't change. There's no ID's on the lists, and the classes are all the same. I can't change this, and I can't change the system to add anything else around each list to give it a better identifier. This means that both menus use the same CSS. The only way that I can see that I can do this is to set up a CSS rule that styles the list item either only of it contains another<ul> item, or if it doesn't contain another <ul> item. As far as I know that's not possible to do. Does anyone out there have an idea of where I can start with this? I'm embedding menumatic into a joomla 1.6 based website. Menumatic is just a slick css suckerfish menu with some mootools effects. http://greengeckodesign.com/menumatic Anyway, I've edited the CSS to look ALMOST right. The only problem is that I cannot get the menu as a whole to center correctly on the page. Anybody have any ideas about how i can do this? (In addition to the 100's of things I've tried, I've tried putting it in another set of div's and centering that div, but it didn't work ) below is all the code. I left the JS out, since it also runs (a bit less prettily) on pure css. Also, I have verified the CSS at w3. There are four lines that are not standard, but they are to do with the rounded corner borders, not the spacing or alignment. Edit: A bit more playing around and I have think it is a conflict with floating the items left. They need to display:block in order to display correctly so they also need to float (left) since they would otherwise be on separate lines (I think). Anybody have an idea about how to get around this? I tried to justify the text (that would be fine for my purposes), but it didn't work either. CSS: Code:
#mainMenu{
background-color: #036;
padding: 0px;
font-size: medium;
text-align: center;
}
/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
* Dropdowns by Patrick Griffiths and Dan Webb.
* http://carroll.org.uk/sandbox/suckerfish/bones2.html
*/
/* ----[ LINKS ]----*/
/* all menu links */
.menuMain a, #subMenusContainer a{
text-decoration:none;
display:block;
padding:10px 20px;
background-color:#036 ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
.menuMain a{
margin:0;
float:left;
color:#fff;
}
/* Just sub menu links */
#subMenusContainer a, .menuMain li li a{
}
/* All menu links on hover or focus */
.menuMain a:hover, .menuMain a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, .menuMain a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#06c ;
color:#FFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
.menuMain a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
.menuMain li a:hover,
.menuMain li a:focus{
background-color:#06c ;
color:#FFF;
}
/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_right.gif) right center no-repeat;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_right_over.gif) right center no-repeat;
}
/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_down.gif) right center no-repeat;
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_down_over.gif) right center no-repeat;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
}
/* All ULs and OLs */
.menuMain, .menuMain ul, .menuMain ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin:0 20px 0 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
.menuMain ol, .menuMain ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#036;
left:0;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
.menuMain li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
margin:0 5px;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
}
/* main menu ul or ol elment */
.menuMain{
display:block;
list-style:none;
margin-top:0px;
margin-bottom:0px;
margin-left:40px;
margin-right:auto;
z-index:5;
text-align: center;
display:block;
}
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
.menuMain li li{ float:none; }
.menuMain li li a{ /* Just submenu links*/
position:relative;
float:none;
}
.menuMain li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
.menuMain li ul ul { margin: -1em 0 0 -1000em; }
.menuMain li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
.menuMain li:hover ul{ margin-left: 0; }
.menuMain li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
.menuMain li a:focus + ul { margin-left: 0; margin-top:2.2em; }
.menuMain li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
.menuMain li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
.menuMain li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
.menuMain li:hover a:focus{ margin-left: 0; }
.menuMain li li:hover a:focus + ul { margin-left: 10em; }
The menu html (an excerpt) Code: <html> <head> <link rel="stylesheet" href="MenuMatic.css" type="text/css" /> </head> <body> <div id="mainMenu" style="width:950px;"> <ul class="menuMain"> <li id="item-101" class="current active"><a href="/ottest/" >Home</a></li> <li id="item-102" class="deeper parent"><a href="/ottest/currentissuemenu" >Current Issue</a> <ul> <li id="item-133"><a href="/ottest/currentissuemenu/test-item-menu" >Test item menu</a></li> </ul> </li> <li id="item-103"><a href="/ottest/otblogmenu" >OT Blog</a></li> <li id="item-104"><a href="/ottest/previousissuesmenu" >Previous Issues</a></li> <li id="item-105"><a href="/ottest/classifiedsmenu" >Classifieds</a></li> <li id="item-124"><a href="/ottest/contact-us" >Contact Us</a></li> </ul> </div> </body> </html> 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. http://img55. imageshack .us/img55/6775/cssexamplesy8.png ^ please remove the space before and image shack to view the image I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this: Code:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>item 3</li>
</ul>
Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox. Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution. Cheers If you take at the link below I'm having trouble with the top menu. http://departments.brooklands.ac.uk/ifp/test/ I'm trying to use background images as buttons with normal xhtml text links. But I can't seem to get the text in the middle of the buttons. I think I may be going about this in the wrong way, so if anyone could take a look that would be great. Thanks Jemes Code:
#topbar{
padding-top:18px;
border: 0px solid #000000;
background-image:url(../images/top.gif);
background-repeat:no-repeat;
height:120px;
margin-left:16px;
}
#topmenu{
margin:32px 0px 0px 30px;
font-size: 10pt;
font-weight:bold;
height:30px;
}
#topmenu ul{
margin:0px;
padding:0px;
list-style-type: none;
}
#topmenu ul li{
padding-right:4px;
}
.home{
float:left;
display:inline;
background-image: url(../images/home.gif);
background-repeat: no-repeat;
height:33px;
width:45px;
}
.active{
float:left;
display:inline;
background-image: url(../images/top_active.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}
.norm{
float:left;
display:inline;
background-image: url(../images/top_norm.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}
#topmenu li a{
text-decoration: none;
color: #AC5BA0;
padding-right: 0.7em;
height:30px;
}
|
|||||||