CSS - Nav List Problems
http://midnighttweaker.50megs.com/test.htm
Why is the list offset to the right by 40 pixels? I can't see anything in my stylesheet that would cause it. It should be right up against the left side. And why is the left column 245px wide instead of the 205px table column I specified? I know I shouldn't use tables for non-tabular data, but I need the left column to be the same height as the right so the background can continue all the way down, and I couldn't find any CSS to do that. One table shouldn't hurt. Similar TutorialsOk, i have this menu with links, but i have a few problems. 1) Don't know why, but i can't center the menu links. There is more space from left to the menu, than from the right to the end of the menu. 2) I'd like to change the properties of each link (using CSS) individually, so i can resize each one like i want. I've done it, but it nly worked in IE. here's the site PS: I still haven't converted pictures to .gif, so it takes a little bit to load all pictures (3). Hi all, and thanks for reading. The following code looks fine in Firefox, but has huge spaces between the images in IE 6. CSS: Code: #menu {float:left; width:157px; background-color:#FFFFFF;} #menu IMG {display:block; margin:0; padding:0;} #menu UL {list-style-type:none; margin:0; padding:0; background-color:#FFFFFF;} #menu UL LI {margin:0; padding:0;} HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ... <div id="menu"> <ul> <li><a href="../balloons/" title="Balloons"><img src="../images/menu-balloons.gif" alt="Balloons" width="157" height="37" border="0" /></a></li> <li><a href="../centerpieces/" title="Centerpieces"><img src="../images/menu-centerpieces.gif" alt="Centerpieces" width="157" height="37" border="0" /></a></li> <li><a href="../supplies/" title="Supplies"><img src="../images/menu-supplies.gif" alt="Suppliers" width="157" height="37" border="0" /></a></li> <li><a href="../contact/" title="Contact Us"><img src="../images/menu-contact.gif" alt="Contact Us" width="157" height="37" border="0" /></a></li> <li><a href="../" title="Home"><img src="../images/menu-home.gif" alt="Home" width="157" height="37" border="0" /></a></li> </ul> </div> Thanks in advance. -colin I am creating a website for a game (unnamed so far) the template is located at syckgamingleague(dot)com in Firefox this site looks perfect works extremely well. In Opera the navigation doesn't seem to be working like I want it. In IE it seems as if everything that should be vertically aligned to the middle doesn't appear to do that. I am just looking for a fix for the Opera navigation error currently but if you know the cause of the IE problems and would like to help that would be great. The website is located at the URI: syckgamingleague(dot)com I will include images for the display of each of the browsers mentioned above. Firefox at the above link in root folder Firefox_Polkamon.jpg Opera at the above link in root folder Opera_Polkamon.jpg IE at the above link in root folder InternetExplorer_Polkamon.jpg Sorry for no links but this forum would not allow it. Name for game isn't Polkamon it is more of a codename than anything currently game isn't named. On this page: http://www.prioritypie.f2s.com/tremaer/_location/location.htm I have a rollover menu (courtesy of Bon Rouge's tutorial) that nicely runs in a line when viewed in FF, but in IE it reverts to a vertical list. Is there a way to stop this? And why doesn't the background for the containing div show up in FF when it does in IE? I had hoped a glass of red wine would help.... its not so much of a problem because i have "thought" of a remedy (at the end of the post) but i was looking for perhaps a more css'esque solution? if you go here http://www.zahra-zahra.com/fullpage.html you will see menus in the middle somewhere and you will see when the lis go on the second line they are mismatched.. is there a way to match them up precisely? now the solution which i was thinking was is that to have four arrays and then put them in four divs and then place them side by side. btw: the menu will be stored in database Hi Everyone, I'm new to the forum and somewhat new to CSS. I am developing a simple webpage that has a horizontal unordered list serving as a navigation bar. Firefox adds what looks like about 20px of extra space above and below the entire list while internet explorer shows it aligned top left. Eventually I would like to center the unordered list top and bottom, but I can't seem to get any alignment formatting to work at all. Here is the problem code: Code: <div id="navbox"> <ul id="navbar"> <li><a href="index.html">HOME</a></li> <li><a href="http://showrooms.canadatrader.com/7010/7622">INVENTORY</a></li> <li><a href="formapp.html">APPLY NOW</a></li> <li><a href="mailto:rjtria@gmail.com">EMAIL ME</a></li> </ul> </div> And the corresponding CSS: Code: #navbox { background-color: #B1C5D0; height: 50px; width: 760px; overflow: visible; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #333; border-right-color: #333; border-bottom-color: #333; border-left-color: #333; color: #036; font-weight: bold; font-size: 130%; font-family: "Courier New", Courier, monospace; line-height: normal; } #navbar li { display: inline; list-style-type: none; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; padding-right: 10px; padding-left: 10px; margin: 0px; padding-top: 0px; padding-bottom: 0px; } I know it's not much.. but it's making me crazy. I have tried zeroing out all padding / margins to no avail... Any help would be greatly appreciated!! Thanks in advance! Celeste I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code: #cellid { margin: 0 0; padding: 0 0; } #cellid ul { margin: 10px 0 0 20px; padding: 0 0; } #cellid li { margin: 0 0; padding: 0 0; list-style-image: url(images/idxyellowlist.gif); } The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code: <ul id="nav"> <li class="level item-1 nav-clothes active parent"> <a href="/clothes.html"><span>Clothes</span></a> <ol class="level item-1"> <li class="level1 nav-clothes-shirts"> <a href="/clothes/shirts.html"><span>Shirts</span></a> </li> <li class="level1 nav-clothes-tanks"> <a href="/clothes/tanks.html"><span>Tanks</span></a> </li> <li class="level1 nav-clothes-raincoats"> <a href="/clothes/raincoats.html"><span>Raincoats</span></a> </li> <li class="level1 nav-clothes-dresses"> <a href="/clothes/dresses.html"><span>Dresses</span></a> </li> <li class="level1 nav-clothes-swimsuits"> <a href="/clothes/swimsuits.html"><span>Swimsuits</span></a> </li> <li class="level1 nav-clothes-outerwear last"> <a href="/outerwear.html"><span>Outerwear</span></a> </li> </ol></li> <li class="level item-2 nav-beds parent"> <a href="/beds.html"><span>Beds</span></a> here is my all related css, external css file, Code: #nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;} /* All Levels */ #nav li { text-align:left; } #nav li.over { z-index:999; } #nav a, #nav a:hover { display:block; line-height:1.3em; text-decoration:none; } #nav span { display:block; cursor:pointer; white-space:nowrap; } #nav li ul span {white-space:normal; } #nav li li.parent {} /* 0 Level */ #nav li { clear:both; position:relative; display:block; } #nav li.active a { color:#000; text-decoration:underline; } #nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; } #nav li.over a, #nav a:hover { color:#000; text-decoration:underline; } #nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;} #nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;} #nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;} #nav ul li a { padding:0 0 0 0;} #nav ul li a:hover { padding:0 0 0 0; text-decoration:none;} /* 1st Level */ #nav ul li, #nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; } #nav ul li.over {} #nav ul li.last { background:#FFFFFF; padding-bottom:15px; } #nav ul a, #nav ul a:hover { float:none; padding:0;} #nav ul li a { font-weight:normal !important; } /* 2nd level */ #nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; } /* 3rd+ Level */ #nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; } /* Show Menu */ #nav li.over > ul { left:0; } #nav li.over > ul li.over > ul { left:100px; } #nav li.over ul ul { left:-10000px; } #nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; } #nav ul li a:hover { color:#1A1616 !important; } #nav ul span, #nav ul li.last li span { padding:3px 15px 4px 15px; } #nav li ul { display:none; } #nav li:hover ul{display: block; } #nav ol { margin-left:5px; margin-bottom:10px; } #nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; } #nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); } inline css code to overwrite the default behavior for target page Code: ul#nav {margin : 0 10px; margin-bottom:0px;} ul#nav li {height : 14px; margin-top : 5px;} ul#nav li a, ul#nav li a:hover {} ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; } ul#nav ul li {height : auto; margin-top : auto;} ul#nav ol li a { padding:0px; } ul#nav ol li { margin:0px; padding:5px 0 5px 15px; } ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; } I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba Hi, I have an OL list (the numbered one) and the horz gap between the list item number (as automatically generated by OL) and the text of the LI is too big (according to client). Looks fine in FF but is bigger alright on IE (ahem naturally .....) I've played with the CSS for both the OL & LI styles even setting all margins and paddings to 0 but without effect on the gap. Is there any way to style that gap? Code below. Kevin <ol class="most_read"> <li class="most_read_li">Apples</li> <li class="most_read_li">Oranges</li> </ol> .most_read { text-align:left; color:#808080; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal; margin-left:30px; padding:0px; margin-top:5px; } .most_read_li { margin-bottom:7px; margin-right:7px; } Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer { width: 200px; margin-top:150px; } #navcontainer ul#navlist { width:200px; clear:left; text-align:left; margin-left:0; padding-left:0; list-style:none; font-size: 12px; font-weight:bold; line-height: 14px; } #navcontainer ul#navlist li { margin-left:0; padding: 0px; display: block; list-style:none; border-bottom: 1px solid gray; } #navcontainer ul#navlist li.last { border-right: 0; background:none; } a.linkText { padding: 10px; display: block; color : #444444; font-family : arial; font-size : 11px; font-weight : bold; text-decoration : none; height:25px; } a.linkText:link { color : Aqua; /* you can define other styles if necessary */ } a.linkText:visited { color : Maroon; /* you can define other styles if necessary */ } a.linkText:hover { color : Blue; } </style> </head> <body> <div id="navcontainer"> <ul id="navlist"> <li><a class="linkText" href="#">Item One</a></li> <li><a class="linkText" href="#">Item two</a></li> <li><a class="linkText" href="#">Item three</a></li> <li><a class="linkText" href="#">Item four</a></li> <li><a class="linkText" href="#">Item five</a></li> </ul> </div> The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body { width:800px; font:0.83em/1.4em Tahoma, Geneva, sans-serif; color:#CBD4E3; background:#000 url(images/body_bg.gif) repeat-y top center; letter-spacing:1px; margin:0 auto; } h1,h2,h3,h4,h5,h6 { font-family:"Times New Roman", Times, serif; font-style:italic; font-weight:bold; color:#e9df55; background-color:#000; } h2 { font-size:2em; } h3 { font-size:1.5em; } h4 { font-size:1.25em; } a:link { color:#8090AC; text-decoration:none; } a:visited { color:#B17F6C; text-decoration:none; } a:hover { color:#E9DF55; text-decoration:underline; } a:active { color:#E9DF55; text-decoration:none; } #container { width:760px; margin:0 auto; } #header { height:200px; width:760px; margin:0; padding:0; } #banner { height:100%; width:100%; color:#cbd4e3; background:#000 url(images/header_bg.jpg) no-repeat top left; margin:0 auto; padding:0; } #banner h1 { font-size:400%; color:#CBD4E3; background-color:transparent; float:left; display:inline; margin:0; padding:70px 0 70px 280px; } #banner h2 { font-size: 12pt; color: #e9df55; background-color:transparent; text-indent: 200pt; vertical-align: text-bottom; } navigate{ color : #105BAC; background-color : transparent; height : 20px; font-size: 100%; border-top : 1px solid #999999; } #navigate ul { list-style-type: none; margin-top: 0px; margin-bottom: 0px; margin-left: 150px; margin-right: 0px; padding: 2px 0 0 0; } #navigate ul li { display: inline; } td { font-family: Arial, Helvetica, sans-serif; } th { font-family: Arial, Helvetica, sans-serif; } p { font-size: 14px; color: #FFFFFF; left: 50px; right: 50px; } #main { width: 660px; padding-right: 50px; padding-left: 50px; } #footer { font-family: "Times New Roman", Times, serif; font-size: 9px; color: #666666; height: 100px; width: 760px; vertical-align: text-bottom; text-align: center; } #SplashImage { float: left; } .image-left { clear: none; margin-bottom: 10px; float: left; margin-right: 20px; margin-left: 10px; } .image-right { clear: none; margin-bottom: 10px; margin-left: 10px; float: right; } Please help me style lists. This is the on area I am having a really hard time understanding. I have a menu list in my side bar and a standard list in the content section. I keep having problems because the styles seem to be conflicting with each other. My site is http://www.myslavelake.com/dir/budget-2009/ Code for the menu Code: <ul id="navlist"> <li><a href="#">Arctic Ice Centre </a></li> <li><a href="#">Water Conservation </a></li> <li><a href="#">Capital Priorities</a></li> </ul> Code: #sidebar ol, ul, li { font-size: 1.0em; font-weight: 600; text-decoration: none; list-style-image:none; list-style-position:outside; list-style-type:none; } #navlist ol, ul { padding: 5px 0px 0px 0px; } The main list code Code: #content ul { margin-left: 0; list-style-type: square; /*text-indent: -1em;*/ } #content ul li { font-weight: normal; list-style-type: square; font-weight: normal; /*text-indent: -1em;*/ } I am happy with the menu but would like normal list for the content section. Right know bullets are not showing up in the content section. Im having trouble putting together a subnavigation list on my website, I am trying to create four sections each of which has a different color to it, and i can get almost everything to work except the subnavigation background color. I have tried white and transparent, but i think the parent element is somehow interfering with the css. any help would be appreciated. Here is my code 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"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <style type="text/css"> ul.nav {margin:0; padding:0; display:block; width:100px; list-style-type:none;} ul.nav li, ul.nav li a, ul.nav li a:active, ul.nav li a:visited, ul.nav li a:hover, ul.nav li.home a:hover, ul.nav li.work a:hover, ul.nav li.for_clients a:hover, ul.nav li.contact a:hover {font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#CCCCCC; color:#666666; line-height:30px; width:100px; list-style-type:none; text-decoration:none; font-size:10px; font-weight:bold; padding-left:10px;} ul.nav li.home_over, ul.nav li.home a:hover {color:#ffffff; background-color:#018E9F;} ul.nav li.work_over, ul.nav li.work a:hover {color:#ffffff; background-color:#6F0141;} ul.nav li.for_clients_over, ul.nav li.for_clients a:hover {color:#ffffff; background-color:#FF850D;} ul.nav li.contact_over, ul.nav li.contact a:hover {color:#ffffff; background-color:#CCE82E;} ul.subnav_home {position:absolute; top:8px; left:118px; margin:0; padding:0; display:block; width:100px; list-style-type:none; background-color:#FFFFFF;} ul.subnav_home li a, ul.subnav_home li a:active, ul.subnav_home li a:visited, ul.subnav_home li a:hover {font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#fffffff; color:#aaaaaa; line-height:30px; width:100px; list-style-type:none; text-decoration:none; font-size:10px; font-weight:bold; padding-left:0px;} ul.subnav_home li a:hover, ul.subnav_home li.subnav_home_over {color:#018e9f;} </style> <body> <ul class="nav"> <li class="home_over">home</a></li> <ul class="subnav_home"> <li class="subnav_home_over">philosophy</li> <li><a href="process.htm">process</a></li> <li><a href="resume.htm">resume</a></li> </ul> <li class="work"><a href="index.htm">work</a></li> <li class="for_clients"><a href="index.htm">for_clients</a></li> <li class="contact"><a href="index.htm">contact</a></li> </ul> </body> </html> Hi, I am currently using an unordered list to output images in a photo gallery im making however i want to also add text underneath each of these. If i use <br> after the image it messes up the UL as the next LI appears underneath the previous one. This is not the desired effect as i am creating a horizontal list. How can i add text underneath the image without distroying the layout? Hi! Another new-to-CSS dabbler here. Not entirely sure what I'm doing, but I get by. I'm working on a site for a paper (making the switch from tables to proper CSS so bear with me) and I can't get the nav bar to cooperate. i31.tinypic.com/wbvzoh . png One of these things is not like the others... And I can't for the life of me figure out why or what would be causing it bar some well-known CSS issue with nav bars that I am not yet privy to. Code for the bar is as follows: CSS Code: #navcontainer ul { text-align: center; padding-bottom: 5px; padding-top: 5px; padding-left: 0; margin-top: 0; /* cancels gap caused by top padding in Opera 7.54 */ margin-left: 0; background-color: #e0edc9; color: #25733e; width: 780px; font-family: Arial,Helvetica,sans-serif; line-height: 18px; /* fixes Firefox 0.9.3 */ } #navcontainer ul li { display: inline; padding-left: 0; padding-right: 0; padding-bottom: 0px; /* matches link padding except for left and right */ padding-top: 0px; } #navcontainer ul li a { padding-left: 10px; padding-right: 10px; padding-bottom: 5px; padding-top: 5px; color: #25733e; text-decoration: none; border-right: 1px solid #fff; } #navcontainer ul li a:hover { background-color: #adc38a; color: white; } #navcontainer #active { border-left: 1px solid #fff; } HTML Code: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">HOME</a></li> <li><a href="#">RECENT</a></li> <li><a href="#">AD INFO</a></li> <li><a href="#">ARCHIVES</a></li> <li><a href="#">PAY A BILL</a></li> <lj><a href="#">CONTACT</a></li> </ul> </div> Any ideas? I have a list in IE that works fine, but I have to make it work in NN4 as well. The problem is the big space left between the item and the left side of the body. I looked several sites, but couldn't find any answers. You can view the actual htm at http://www.nald.ca/test/fora/test.htm Main CSS: http://www.nald.ca/test/fora/test.css CSS for NN4: http://www.nald.ca/test/fora/test.css If anyone could just give me some kind of idea where I am going wrong, it would be really awesome. Thanks Please look at the location list on the right side of this page - http://certified.tmhdesign.com My designer sent me a layout that has each location in a list and seperated by dots that DO NOT go the whole distance of the ul/li. As you can see I am close but they are not laying out the same in IE and Firefox. IE is closer to what I am after but without the big gap |