|
CSS - Vertical Menu Position Error - Mozilla Only
I have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item.
I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla. I am thinking that it may be something to do with the link visited properties but am not sure what. I have validated the css via the W3C website but there were no errors reported. The css segment is as follows: #subnavcontainer { position: absolute; left: 10px; top: 0px; margin-top:0px; padding-top: 0px; height: 700px; width: 160px; background: url("../images/bg_vert.gif") no-repeat; } #subnavcontainer ul { list-style-type: none; color: #000; margin-top: 0px; margin-left: 0px; padding-left: 0px; padding-top: 0px; font-family: Arial, Helvetica, sans-serif; display: block; width: 200px; background-color: #D7D7D7; } #subnavcontainer li { padding-left: 0px; margin-top: 1px; } #subnavcontainer ul li { margin: 0 0 1px 0; padding-left: 0px; } #subnavcontainer ul a { display: block; padding: 0px 2px 2px 5px; width: 160px; color: #000; background-color: #F0EFEE; text-decoration: none; border-left: 4px solid #B09292; } #subnavcontainer ul a:hover { color: #000; background-color: #fff; text-decoration: none; border-left: 4px solid #FF0000; } The html segment is as follows: <div id="subnavcontainer"> <ul> <li> <a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a> </li> <li> <a href="../content/company/se_company_location.htm" target="mainFrame">Location</a> </li> <li> <a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a> </li> </ul> </div> Similar Tutorialsi was looking for way how to display vertical text with css and found a solution: #vertical { writing-mode: tb-rl; filter: flipH flipV; } <div id="vertical">display vertical text</div> however, this works fine with IE 6.0, but is comletely ignored with Mozilla 1.4! is it that Mozilla just doesn't support this or is there a way how to work it around(write it in a way both IE and Mozilla could understand it)? i'll aprecciate your help very much.. Hi: After entering data into a database from a form (HTML) using php, I now have to retrieve the data, place it in a form style and print. Everything works fine when I do the print except for one thing. Description of Problem: When I print using IE 6.0, all vertical and horizontal lines which separate data from each other (cells) print. When I do the print in Mozilla, only the horizontal lines appear. How can I fix this, or, what makes it do this in Mozilla and not in IE? There is one thing I'm not doing, I'm not using CSS to format the form. Could this fix the problem? Any suggestions will be greatly appreciated! Thanks! I have done alot of changing around settings, sizing from absolute to relative, margins to widths, and i still cant figure out what is urking my page when loaded from mozilla-firefox and netscape. The page works fine when used with Internet Explorer. Does anyone have a chance to take a look at it here at <a href> www.wolfdogg.soldierlink.com/html using Firefox and IE? style sheet is at <a href> http://www.wolfdogg.soldierlink.com/main-reworked.css or would you prefer i post the code is there actually a website that i can go to that will have a list of the extra styles that firefox and netscape needs that are automatic and uneccesary on internet explorer? Thanks a bunch, WolfDogg I've seen a fix for this online before, but I can't seem to find it now. Basically I've got the following layer declartion: HTML Code _NOT_ php PHP Code: <div style=" color: black; font-size: 10pt; font-family: arial; text-align: center; visibility: hidden; display: block; position: absolute; z-index: 3; top: 115px" id="default"> When I make this layer visible it shows up in the exact position I want it to in most browsers, but in Mozilla it is 10 pixels to low. How can I get this layer to show up on Mozilla in the same pos as IE? Should I use javascript to adjust that "top" to 125 if its Mozilla? Or is there a CSS way to resolve this. I have an image 425px x 260px which is floated left of an unordered list. The unordered list, of course, is at the same height as the top edge of the image. Any way to vertically position the ul so it is vertically centered to the image? Hi, The following example is positioned as I want. Code: <div><label id="day">Day:</label><span> <input type="checkbox" name="day" value="1" />Sat <input type="checkbox" name="day" value="2" />Sun </span> </div> How do I make in next example <table> vertically aligned with <label> element? Right now <table> element is positioned next to it but way below <label> element. Code: <div><label id="lang_lbl">What languages do you speak?:</label> <span> <table><tr><td><input type="checkbox" name="lang" value="1" />English </td> <td><input type="checkbox" name="langs" value="2" />Spanish</td> </tr> </table> </span> </div> Thank you. Hi guys, I've tried for days but can't solve the problem. I wanna position a text field and button in the middle of a div or table. FF displays well, IE of course not (always on top). Vertical alignment etc doesn't work! Any suggestions? Hello everyone! I'm creating this thread to make a question about something that is happening with my website... Actually I'm not a professional in CSS Coding... I only know some basics and with the help of some friends I've created it (which sadly they doesn't know how to help in this problem as well). I know more HTML than CSS, but to center the website horizontally and vertically I had to change it to CSS Coding. At first, since I use Firefox as the principal browser, I thought it was going right and well centered, but when I opened it in another browsers as Internet Explorer and Opera, the various parts of texts I have included are not well positioned like in Firefox, Google Chrome and Safari, by which looks pretty decent and in the same position in all of them. Unfortunately, since I'm a new member, I can't post links, so I placed some spaces in between at the beginning to be possible: Website: ht tp://w ww.freewebs.com/innocentia/Doc1.htm Errors Preview: ht tp://img651.imageshack.us/img651/1601/errorspreview.jpg Horizontally looks great in any browser and the Menu Bar as well, but not the right text parts...by which vertically looks different to me in IE and Opera only and in the other browsers as well if the monitor sizes are bigger or smaller than mine, which has the size of 1440x990. The CSS Code of the texts parts that can't get vertically fixed is: Code: #header {
height : 60px;
left : 300px;
overflow : auto;
padding : 10px;
position : relative;
top : -100px;
width : 700px;
}
#header p {
margin : 0;
}
#header_wrapper {
width : 700px;
margin-left : auto;
margin-right : auto;
margin-top : 25px;
}
#h3 {
height : 130px;
left : 290px;
overflow : auto;
padding : 20px 10px;
position : relative;
top : -25px;
width : 710px;
}
#h3 ul {
margin : 0;
}
#h3 ul li {
margin : 0 0 3px 0;
}
#h4 {
height : 255px;
left : 250px;
overflow : auto;
padding : 0 10px;
position : relative;
top : -85px;
width : 748px;
}
#h4 ul {
margin : 0;
}
#site_wrapper {
width : 1100px;
margin-left : auto;
margin-right : auto;
background : #eaf0f2 url(link) no-repeat top center;
}
The HTML Code is: Code: <body>
<div id="site_wrapper">
<div id="header">Text</div>
<div id="h3">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">Avatar Picture</td>
<td valign="top">
<ul><li><b><font color="#0166AC">Text</ul></td></tr>
</table></div>
<div id="h4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">
<ul><p><font color="#000000"><b>Text</font></b></a></center></ul></td></tr>
</table></div>
I really don't understand what's happening or what I'm missing due to the fact that the menu has the same type of coding like the headers and works completely fine...so I'm somehow lost... My intention was to make it look correct horizontally and vertically like it's shown in Firefox, Google Chrome and Safari in the preview picture, in the other browsers and any different monitor sizes. Also, I already validated my CSS coding! I also searched for many threads to see if I could find solutions but hadn't found any that could actually help... Thank you for the attention and for reading! ^^ EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page How do I align menu elements of my menu? In Mozilla the elements are leaning conpletely to the left of the screen and doing somewhat what they're supposed to do in internet explorer. To put it simply I'd just like to have the same style class used to center the menu items in both Mozilla and Internet explorer. Heres the html page : Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="thisstyle CSS"></head><body>
<style>
body
{
background-color: limegreen;
<font FACE="Lucida Console">
}
</style>
</head>
<body>
<div id="menu">
<ul align="center">
<li><a href="users/register.php">Join</a></li>
<li><a href="users/Log_in.php">Login</a></li>
<li><a href="users/help/tour.html" >Tour</a></li>
<li><a href="users/contact.php">Contact</a></li>
</ul>
</div>
</body></html>
Heres the css style sheet : Code:
#menu {
clear: both;
margin: 30; padding: 0 40px 0 0;
background: url(menu.jpg) repeat-y center top;
font: bold 12px/26px Lucida Console;
height: 26px;
background: #006633;
}
#menu ul {
float: left;
list-style: none;
margin-top:0; padding: 0;
margin-right:0; padding: 0;
margin-bottom:0; padding: 0;
margin-left:90; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: inline;
float: left;
padding-top: 0px;
padding-right: 28px;
padding-bottom: 0px;
padding-left:8px;
color: gold;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #ffff33;
color: #006633;
}
#menu ul li#current a {
background-color: #eee;
color: #333;
}
Thanks i am trying to use the suckerfish dropdown menu. starting from the pretty example, i got it going in IE6 but it looked pretty off in mozilla. i tinkered around further the the IE code which changed things a bit there and made things look a bit better in mozilla but not much! my code is at http://www.fizzycherry.com/menutest.html - i would *really* appeciate any ideas. the main things really bugging me a how can i get the menu bar to fill the width of the screen in mozilla? my navbar div did this before i inserted the sub menus! once i tinkered with my css, placing padding on the links rather than the li elements, huge vertical gaps started appearing in the submenus in both IE and Mozilla, even with no margins padding and borders. i need to *add* a bottom border (same colour as background) to remove these gaps! why?? ideally i would like the submenus to look somethign like they do in ie6 but even if someone could just tell me how to make the bar fill the screen i'd be chuffed! If you look at Lakelandedc.com you notice the menu is very weird when trying to go from each link to the other links... how can i fix the menu so it is easier to navigate? Code: /* CSS Document */
#menu
{
text-align:left;
width:155px;
background-color:#084D9C;
margin:0;
padding:0;
}
#menu ul
{
list-style:none;
margin:0;
padding:0;
}
#menu a, #menu h2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display:block;
border-width:1px;
border-style:solid;
border-top:solid 2px;
border-color:#ccc #888 #555 #bbb;
margin:0;
padding:2px 3px;
}
#menu h2
{
color:#fff;
background:#BA5D92;
text-transform:uppercase;
}
#menu a
{
color:#FFF;
text-decoration:none;
}
#menu ul a:hover
{
color:#fff;
background-color:#091F51;
text-decoration:none;
}
#menu ul
{
position:relative;
}
#menu ul ul
{
position:relative;
top:0;
left:10%;
width:100%;
}
s#menu a:hover {
}
.submenu
{
background-color:#9A1F61;
color:#fff;
}
div#menu ul ul,
div#menu ul ul li:hover ul ul
{
display:none;
}
div#menu ul:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
I have a vertical menu with a sub menu. To clarify the sub menu, there is a red vertical bar. It has a problem with IE 7 - when hovering over the links, the bar goes away and comes back. This is pretty hard to explain, so here is one of the webpages with this problem: http://030c1db.netsolvps.com/business-solutions.php (we are using a temp hosting server until it is finished - thus the odd domain name). If you look on the left, under the "In this section" you will see the vertical red bar. (the problem is only in IE7). Here is my css and code: CSS: Code:
.redbar {
background-image: url(/images/NavSubBar.jpg);
background-repeat: repeat-y;
background-position: 26px;
}
#wrapper #container #content #content_inner #leftnav_i ul #leftnav_i_sub a {
background:none;
display: block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 11px;
margin-left:25px;
margin-top:-6px;
}
Code: <ul> <div class="redbar"> <!--........Main Links...... --> <li div id="leftnav_i_sub"><a href="#">Main Menu 1</a></li> <li div id="leftnav_i_sub"><a href="#">Main Menu 2</a></li> </div> </ul> <div class="clear"></div> <!--........Sub links...... --> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <!--........Main Links Continued...... --> <li div id="leftnav_i_sub"><a href="#">Main Menu 3</a></li> <li div id="leftnav_i_sub"><a href="#">Main Menu 4</a></li> </ul> Hi, i'm tryin to make a vertical drop down menu for the left side of the menu shown here i was using the 'Suckerfish' tutorial as seen here, but i'm not exactly sure what is needed to make it a vertical style as opposed to a horizontal. I had the horizontal one functioning properly, but that's it. i was originally gonna go with the dhtml style drop down, but it seemed awful chunky. thanks Hi... I have a big problem with FireFox, and especially Safari... http://www.laventanaband.com/Music%20Samples.htm When you roll over a pop out menu item (like "music and pics") these problems occur: In FireFox... if you roll past the edge of the frame, the menu item disappears. In Safari... the pop up menu section disappears below the content menu (!). I this doesn't happen on the main page because the content area does not use overflow:auto; .... it uses overflow:hidden; Somehow the use of that cause those problems... Here is my css doc. Any ideas? Thanks in advance! Regards, -Max Dykstra html code: Code: <div id="sidebar"> <h2>South Winds Park Info</h2> <ul> <li><a href="park-info/contact-info" title="Contact Info">Contact Info</a></li> <li><a href="park-info/homes-for-rent" title="Homes for Rent">Homes for Rent</a></li> <li><a href="park-info/homes-for-sale" title="Homes for Sale">Homes for Sale</a></li> <li><a href="park-info/office-services" title="Office & Services">Office & Services</a></li> <li><a href="park-info/meet-the-staff" title="Meet the Staff">Meet the Staff</a></li> </ul> <h2>South Winds Resources</h2> <ul> <li><a href="calendar" title="Calendar">Calendar</a></li> <li><a href="resources/forms-and-documents" title="Forms and Documents">Forms and Documents</a> <ul> <li><a href="resources/forms-and-documents/by-laws" title="By Laws">By Laws</a></li> <li><a href="resources/forms-and-documents/prospectus" title="Prospectus">Prospectus</a></li> <li><a href="resources/forms-and-documents/rules-regulations" title="Rules & Regulations">Rules & Regulations</a></li> </ul> </li> <li><a href="resources/special-events" title="Special Events">Special Events</a></li> <li><a href="resources/maintenance" title="Maintenance">Maintenance</a> <ul> <li><a href="resources/maintenance/fees" title="Fees">Fees</a></li> <li><a href="resources/maintenance/trash" title="Trash">Trash</a></li> </ul> </li> <li><a href="resources/faq" title="FAQ">FAQ</a></li> </ul> </div> CSS Code: Code: #sidebar ul{
margin:10px 0 30px 0; padding: 0;
text-align:right;
}
#sidebar li a, #nav li {
display:block;
}
#sidebar li {
list-style: none;
position: relative;
}
#sidebar li a {
padding: 1em 2em;
text-decoration: none;
color: white;
background:url(images/design/listBottomLine.png) bottom right no-repeat;
}
#sidebar li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#sidebar li ul {
display: none;
position: absolute;
left: 100%;
top: 0px;
padding: 0; margin: 0;
z-index:100;
}
#sidebar li:hover > ul {
display: block;
}
#sidebar li ul li, #nav li ul li a {
float: none;
z-index:1000;
}
#sidebar li ul li {
_display: inline; /* for IE6 */
}
#sidebar li ul li a {
width: 150px;
display: block;
background-color:#2c9091;
}
This is a vertical menu (in the sidebar of a wordpress site). It works everywhere, except IE7. I have jquery that overcomes the hover issue for IE (I know it works because I got it from http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/ I have searched the internet for a solution: using csshover.htc (doesn't work) The one issue I think it might be is because I'm using an ancher tag, but using hover on the li element. (the ancher is child of li) I have read tutorials on this, so my anchor is display block, it has the width and height fixed. The other is I'm using z-index to pull the elements in front. I don't know if IE7 has issues with z-index. I'm sorry I cannot show a working (broken) example, it's a wordpress site on my local machine. I even used the exact css code from the tutorial linked above (slightly modified to be vertical not horizontal) which he says it works in every browser. What else could it be? Since the code should work. What else around this menu could be my problem? Thank you so much for your help (ready to pull my hair out) I've followed a tutorial before in a book called Stylin' with CSS to create a CSS based horizontal drop down menu. Although not in the book, the code to create the equivalent vertical version was supplied. I've altered it to make it more like my horizontal version and it works in Firefox perfectly. In IE 7 and 6 however it does not. On the second level, a transparent 'top padding' appears, but it's not padding, or a margin. The code for the whole page is: (by the way this is my first post so I'm sorry if I used the wrong tool!) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {font:1em verdana, arial, sans-serif; behavior:url(csshover.htc);}
* {margin:0; padding:0;}
div#listmenu {float:left; font-size:.8em; background: #777; margin:20px;}
div#listmenu ul {margin:0; width:10em;}
div#listmenu ul li {position:relative; list-style-type:none; background: #AAA; border:1px solid #333; border-
top:none; font-weight:bold;}
div#listmenu ul li:first-child {border-top:1px solid #333;}
div#listmenu ul li:hover {background: #555;}
div#listmenu a {display:block; padding-left:6px; text-decoration:none; color:#666;}
div#listmenu a:hover {color:#EEE;}
* html div#listmenu ul {float:left; border-top:1px solid #333;}
div#listmenu ul li ul {margin:0 0 0 10em; position:absolute; width:13em; left:-2px; display:none; top:-1px;}
div#listmenu ul li ul li {width:100%; border:1px solid #333; border-top:none; background:#BBB; font-weight:normal;}
div#listmenu ul li ul li:first-child {border-top:1px solid #333;}
div#listmenu ul li ul li:hover {background:#999;}
div#listmenu ul li:hover ul, div#listmenu ul li ul:hover {display:block;}
div#listmenu ul li ul li ul {visibility:hidden; top:-1px; left:3em;}
div#listmenu ul li ul li:hover ul {visibility:visible;}
</style>
</head>
<body>
<div id="listmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">What's On</a></li>
<li><a href="#">The DYJA</a>
<ul>
<li><a href="#">About DYJA</a></li>
<li><a href="#">The Jazz Centre</a></li>
<li><a href="#">The Ensembles</a>
<ul>
<li><a href="#">Youth Stageband</a></li>
<li><a href="#">Youth Swing Orchestra</a></li>
<li><a href="#">Youth Jazz Orchestra</a></li>
<li><a href="#">Jazz Orchestra</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Exchanges</a>
<ul>
<li><a href="#">Herten (Germany)</a></li>
<li><a href="#">Limonest (France)</a></li>
</ul>
</li>
<li><a href="#">Recordings</a>
<ul>
<li><a href="#">Discography</a></li>
<li><a href="#">Ordering Information</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I can't understand why the code works in Firefox, but then the spaces appear in IE. I've uploaded it to my site as well at http://www.wattersisere.co.uk/devshed_vertical.html Thanks in advance for any help. Long time reader, first time poster. I have an issue with a css vertical menu I've made but first things first. My target browser is IE7, this is a corporate intranet so I have some control over this. However, we do run alot of pcs with Firefox but, of course, the problem doesn't exist with this browser. Here's the issue: The div#leftbox contains the menu but when the list elements extend into the center div (div#middlebox) you can see the anchors and finger them but if you try to move to the next list item the submenu disapears? It's like it recognizes the display: block on the list element but not on the anchor? Another weird thing is that if I extend the div#leftbox width to accommodate the size of the menu and the submenu it works fine but only if i have a background-color applied to the #leftbox. If I leave it transparent it behaves as before. Here's the markup and css... index.asp Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<title>Intranet</title>
<link href="/styles/<%Response.Write(Session("session_theme"))%>/screen.css" type="text/css" media="screen" rel="stylesheet" />
<link href="/styles/print.css" type="text/css" media="print" rel="stylesheet" />
<style type="text/css">@import url(/styles/<%Response.Write(Session("session_theme"))%>/calendar-win2k-1.css);</style>
<script type="text/javascript" src="/calendar/calendar.js"></script>
<script type="text/javascript" src="/calendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="/calendar/calendar-setup.js"></script>
<link rel="SHORTCUT ICON" href="/favicon.ico" />
</head>
<body>
<div id="topbar">
<!--#include virtual="/inc/toolbar.asp" -->
</div>
<div id="leftbox">
<!--#include virtual="/inc/menu.asp" -->
</div>
<div id="rightbox">
<!--#include virtual="/inc/rightbox.asp" -->
</div>
<div id="middlebox">
<h1> Welcome to the IntraNET</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac pede. Cras tristique, ipsum in scelerisque lobortis, diam nisl lobortis ipsum, eu ultricies orci justo a purus. Integer pellentesque, dui ut ullamcorper pellentesque, diam sapien venenatis augue, id rutrum lorem nibh non ligula. Nullam mattis. Donec eget pede. Donec blandit rhoncus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis cursus augue. Maecenas elit. Nullam viverra justo sed mi. Cras porta tellus non justo. Fusce adipiscing molestie elit. Nullam vulputate felis sed mi. Curabitur velit sem, bibendum ut, tempus sed, sodales vitae, libero. Aliquam nisl. Pellentesque tellus dolor, elementum sed, semper suscipit, pretium vitae, mauris. Vivamus sem.
</p>
</div>
</body>
</html>
Here's the menu.asp include... Code: <ul id="nav"> <li><a href='/departments/reports/index.asp'>Reports</a> <ul> <li><a href=''>EOD<span>End of Day Reports</span></a></li> <li><a href=''>EOM<span>End of Month</span></a></li> <li><a href=''>On Demand Reports<span>Reports sent to the web queue</span></a></li> <li><a href=''>Office Reports<span>A collection of front office and customer service reports</span></a></li> <li><a href=''>Warehouse Reports<span>A collection reports for warehouse operations</span></a></li> <li><a href=''>Merchandising Reports<span>EIS and vendor reports for merchandising</span></a></li> <li><a href=''>Accounting Reports<span>A collection of account reports</span></a></li> </ul> </li> <li> <a href='/index.asp'>Home</a> </li> </ul> and here's the css Code:
body {background: #fff; font-size: 62.5%; color: #033; font-family: Verdana, Arial, san-serif;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
p { font-size: 1.2em; line-height: 1.5em; }
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #099;
z-index: 1;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #006;
background: #ccc;
padding: 5px;
border: 1px solid #006;
border-bottom: 0;
}
ul li a:hover { color: #600; background: #fff; display: block;} /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/* Begin Tool Tip Span */
span {
display: none;
}
a:hover span {
z-index: 1;
position: absolute;
top: 1px;
left: 200px;
width: 220px;
display: block;
background: #fff;
border: 2px solid #006;
padding: 10px 10px 10px 5px;
}
/* End Tool Tip Span */
/*******************************************************************************
Positioning rules
*******************************************************************************/
div#leftbox {
position: absolute;
left: 10px;
width: 150px;
color: #333;
padding-top: 10px;
background-color: #fff;
z-index: 1;}
#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
padding: 10px;
background-color: #efefef;
}
div#rightbox {
position: absolute;
right: 25px;
width: 30%;
color: #666;
padding-top: 10px;
background-color: transparent;}
div#topbar {
margin: 0;
padding: 0;
width: 100%;
background-image: url('/images/default-topbar-bg.jpg');
background-repeat: repeat-x;
}
div#search {
color: #ffc;
font-size: 1.1em;
letter-spacing: .75em;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
left: 20px;
word-spacing: 1em;
}
Your help and advice is most welcome and appreciated. Mark We are redesigning and I have a CSS menu I like that runs vertically. I need a version that would also work running horizontal, with the drop downs underneath. Is this possible by tweaking my existing code? I got the code I am using from alistapart and I am not really too familiar with it. You can see it here http://www.caribbean-on-line.com/tables.html Thanks - Anthony |
|||||||