|
CSS - List Problem. Please, Help Me With This.
Hello,
I created a form which is built mostly with ordered lists: http://www.27lamps.com/public/Beta.htm I am having a few problems. All of them inside a DIV to which I am applying the class "ListBox" 1. ListBox is not being applied to the child tags of that DIV, i.e., OL and LI. They have the styles defined by parent class. How can I solve this? 2. My second problem is how to clear floats on my ol. I applied the overflow approach to my OL tag but this does not seem to work. Note that I am trying to display 3 LI per row simulating a table. Could someone, please, help me out? And I am open to any suggestion which might improve my CSS on this form. I have been working on this for quite a while but I know I can still improve it. Thank You, Miguel Similar TutorialsOkay, I have played and stared at this problem/code for a few days now actually. Nothing is slapping me in the face and pointing to a problem, I seriously see nothing that could cause this. www.carbenco.com is the website, and if you look at the navigation, it sticks out the side.. the hover messes up, it almost seems as if the links are fine, then on hover its 5 pixels off or something. The reference for exactly how I want the nav to look is he www.carbenco.com/sample5.jpg I will put the index and css, incase the error is found somewhere in either. Thanks in advance! index Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Carbenco - Personal Portfolio</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" title="default" /> </head> <body> <div id="container"> <div id="white"></div> <div id="content"> <div id="left"><img src="top.jpg" alt="top.jpg" /> Content waaaaaa</div> <div id="right"><img src="clients.jpg" alt="clients.jpg" /> <div id="navi"> <ul> <li><a href="">Uniquely Yours</a></li> <li><a href="">Uniquely Yours</a></li> <li><a href="">Uniquely Yours</a></li> <li><a href="">Uniquely Yours</a></li> </ul> </div> </div> </div> <div id="bottom"><img src="logo.jpg" alt="logo.jpg" /><div id="botright"> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://carbenco.com/stylesheet.css"><img src="css.jpg" alt="css.jpg" /></a> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fcarbenco.com%2F"><img src="xhtml.jpg" alt="xhtml.jpg" /></a> <br /> <img src="copy.jpg" alt="copy.jpg" /> </div></div> </div> </body> </html> stylesheet Code: body {
margin: 0px;
padding: 0px;
text-align:center;
background-image: url(bg.jpg);
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#container {
position: relative; top: 50px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 524px;
height: 718px;
}
#white {
position: absolute;
left: 29px;
top: 0px;
width: 234px;
height: 12px;
background-color: #ffffff;
}
#content {
position: absolute;
left: 0px;
top: 12px;
width: 718px;
height: 416px;
background-image: url(back.jpg);
}
#left {
position: absolute;
left: 0px;
top: 0px;
width: 566px;
height: 416px;
}
#right {
position: absolute;
left: 565px;
top: 6px;
width: 152px;
height: 410px;
background-color: #ffffff;
border-left: solid #bdd180 1px;
}
#bottom {
position: absolute;
left: 0px;
top: 428px;
width: 718px;
height: 96px;
background-image: url(back2.jpg);
}
#botright {
position: absolute; right: 0px; bottom: 0px;
text-align: right;
}
#navi {
letter-spacing: 3px;
position: relative;
left: 0px; top: 0px;
width: 151px;
}
#navi ul {
width: 151px;
margin-left: 0;
padding-left: 0;
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
#navi li a {
width: 151px;
display: block;
padding: 0px;
background-color: #ffffff;
color: #000;
text-decoration: none;
width: 100%;
}
#navi li a:hover {
width: 151px;
display: block;
padding: 0px;
background-color: #bdd180;
color: #000;
text-decoration: none;
width: 100%;
}
#bottom img {
border: 0px;
}
ps: everything is validated, you can check the links on the actual site on bottom right for the validation of everything. I am having a problem displaying this vertical list in IE6. Here is the HTML: Code:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Dashboard Quick Link</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Artifacts</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Contact</a></li>
</ul>
The list is in a div called menu which is at the top of a div called sidebar. Here is the CSS: Code:
#sidebar {
margin:0px;
padding:0px;
width:220px;
float:left;
background:url(_images/team/bg_nav.jpg) repeat-y left;
position:relative;
}
#sidebar #menu {
margin:0px;
padding:0px;
border:solid 1px #000;
}
#sidebar #menu ul {
margin:0px;
padding:0px;
list-style:none;
}
#sidebar #menu li a:link, #sidebar #menu li a:visited {
display:block;
margin:0px;
background:#2175BC;
border-left:#1958B7;
border-bottom:#90BADE;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFF;
padding:5px 0px 5px 10px;
}
#sidebar #menu li a:hover, #sidebar #menu li a:active {
background:#205268;
border-left:#1C64D1;
}
I cannot see the background color for the links in IE6. There are also vertical spacing issues and although I've read up on Holly's Hack, I don't really understand how to implement it. Any help would be greatly appreciated. Thanks a lot, Brian Hi all, I really need some help figuring out this CSS issue. I've got a client that wants to show their product list using an expanding list. This data is drawn from the database using a tool that returns an HTML table structure that I have little control over. To over come this, I used a stored procedure to format each data element returned as a span with unique name that indicates it's level and location in the product hierarchy. The lowest level of the tree are links to the actual products. There is some javascript that toggles the display property of spans that are children of the item clicked, making them expand and collapse. This all works fine, with one little issue. In IE 6, when the child items are all hidden (collapsed), there is some extra space (from the TD containing the links to the products I think) that creates extra space between the categories. This space varies depending on how many products are at the bottom level of the hierarchy. I've tried everything I can to remove the space - margins, padding, borders set to 0px, etc. But I can't figure this one out. Can anybody give a hand? Thanks! This has been driving me nuts! GregC PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <title>Untitled</title> <script type="text/javascript"> function toggle(id, level){ allElements = document.getElementsByName(id); for (var i=0; i < allElements.length; i++) { if(allElements[i].style.display == "") { allElements[i].style.display = "none"; if (level == 1) { //hide all things with the same id allElements = document.getElementsByTagName("SPAN"); for (var i=0; i < allElements.length; i++) { var eName = allElements[i].id; if (eName) { if (eName.substring(0, id.length) == id) { allElements[i].style.display = "none"; } } } } } else { allElements[i].style.display = ""; } } } </script> <style type="text/css"> /* --- products expanding list --- */ .products_table { border: 0px hidden #ffffff; border-spacing : 0px; border-collapse: collapse; } .products_table tr{ border: 0px hidden #ffffff; background-color: #0000ff; color: #000000; padding: 0px; } .products_table td { border: 0px hidden #ffffff; background-color: #00ff00; color: #000000; padding: 0px; margin: 0px; } .products_table td span { background-color: #ff0000; } .hide_header { display: none; } .cat, .sub, .prod-none a, .prod a { display: block; background-color: #ffcccc; color: #000000; border: 0px hidden #ffffff; } .cat { font-weight: bold; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px; } .sub { font-weight: normal; margin-left: 20px; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px; } .prod a { padding-bottom: 0px; margin-left: 40px; font-style: italic; font-weight: bold; } </style> </head> <body> <table class="products_table"> <tr><td><span class="cat" onclick="toggle('sub1', 1 )" >Actuators</span> </td></tr><tr><td><span class="sub" onclick="toggle('sub1-1', 2 )" name="sub1" id="sub1" style="display:none">Electric</span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">AUMATIC Electric Actuators</a></span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">Triple Play Matic Electric Actuators </a></span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">Foo1 </a></span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">Foo2 </a></span> </td></tr><tr><td><span class="prod" name="sub1-1" id="sub1-1" style="display:none"> <a href="foo">foo3 </a></span> </td></tr><tr><td><span class="sub" onclick="toggle('sub1-2', 2 )" name="sub1" id="sub1" style="display:none">Equipment Monitoring</span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 1</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 2</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 3</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 4</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 5</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 6</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 7</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 8</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 9</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 10</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 11</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 12</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 13</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 14</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 15</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 16</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 17</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 18</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 19</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 20</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 21</a></span> </td></tr><tr><td><span class="prod" name="sub1-2" id="sub1-2" style="display:none"> <a href="foo">DeviceNet Product 22</a></span> </td></tr><tr><td><span class="cat" onclick="toggle('sub2', 1 )" >Controllers</span> </td></tr><tr><td><span class="sub" onclick="toggle('sub2-1', 2 )" name="sub2" id="sub2" style="display:none">Tension</span> </td></tr><tr><td><span class="prod" name="sub2-1" id="sub2-1" style="display:none"> <a href="foo">Tension Controller </a></span> </td></tr><tr><td><span class="cat" onclick="toggle('sub3', 1 )" >More Controllers</span> </td></tr><tr><td><span class="sub" onclick="toggle('sub3-1', 3 )" name="sub3" id="sub3" style="display:none">Anoter Item</span> </td></tr><tr><td><span class="prod" name="sub3-1" id="sub3-1" style="display:none"> <a href="foo">More Tension Controller </a></span> </td></tr></table> </ul> </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 I have put together a page with a left floating text box that text wraps around the top, right and bottom. It was going pretty well, thanks to some help I have already received, but I am having a problem with a bulleted list alignment. Please take a look at the test page below. TEST PAGE The relevant style code follows: Code:
.textboxleft
{
background: #3E5C92;
font: normal 0.8em/140% arial, helvetica, sans-serif;
margin: 10px;
width: 160px;
border: 1px solid #E4E7F5;
float: left;
overflow: hidden;
padding: 0.5em;
}
.textboxleft p
{
color: #000000;
}
ul li
{
color: #E0E0F6;
font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}
Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information. If there is something I can alter in the CSS or HTML to prevent the list bullets from bumping into the text box, please let me know. I am very new at this and have only gotten this far with the help of people like you. Thank you, Grump PS: you will also notice another thread concerning the width of the text box. It does not render at 160px in Firefox, but does in IE. I dont get what is my list styles for the footer content section. listed items dont appear listed and I could not vertically center the div. Footer content section is right above the copyright notice. http://www.aslanyurek.com/rtt/ Code:
/* content footer.css */
#fcontent{
height:80px;
width:790px;
background-color:#999999;
}
#fcontent .help{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
background-color:#FFFFCC;
}
#fcontent .catalog{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
margin-left:10px;
background-color:#F0FFCC;
}
#fcontent li {
float:left;
list-style-type:square inside;
margin-left:25px;
}
#fcontent li a {
display:block;
}
Hi there, I'm having a problem floating an unordered list to the right with IE6. With Firefox it works without problems as usual. I have uploaded on www.emotiona.com/test the failing code. I got it properly displayed when doing the following: - Set the ul tag to float: right; - Set the li and a tags to float: left; Someone knows a rational explanation to the way IE6 behaves? There's a better way to achieve the same result? Besides with the tabs turn from blue to orange in firefox without problems, but with IE6 only the background defined for the tag "a" changes when the mouse is over. I haven't solved this issue yet. Thanks, Caste I am trying to use ul list to organize my images. Here is how it should look like. IMAGE IMAGE IMAGE text text text But instead, I get IMAGEtext IMAGEtext IMAGEtext Code:
<style>
/**************************************************************
Thumbnail Lists
**************************************************************/
ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}
ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}
ul.thumbs li.pagination {
margin: 10px;
padding: 0px;
list-style: none;
display:block;
}
a.thumb img {
border: 5px solid #ccc;
}
a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #000;
}
a:hover.thumb {
background: none;
}
a.thumb span {
width: 100%;
display: block;
margin-top: -5px !important;
margin-top: -2px;
}
</style>
<ul class="thumbs">
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/8P5B7K8M_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=13" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/7K4V6F7H_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=12" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/0C7O9X0A_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=11" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/1Q8B0L1N_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=10" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li class="pagination">1. </li>
</ul>
Hi, I'm using a list for a navigation bar where I have all the links with background images to give a rollover effect with images. However I want all the links to be inline and not on separate lines. Here is the problem page: http://www.mckr.ie/test.html (the blue navigation bar) Here is the HTML code on the page: Code: <div id="topnavdiv"> <ul> <li><a href="/" id="buttonhome"><b>Home</b></a></li> <li><a href="../about.html" id="buttonabout"><b>About Us</b></a></li> <li><a href="../location.html" id="buttonlocation"><b>Location</b></a></li> <li><a href="../contact.html" id="buttoncontact"><b>Contact Us</b></a></li> <li><a href="../news.html" id="buttonnews"><b>News</b></a></li> <li><a href="../people.html" id="buttonpeople"><b>People</b></a></li> <li><a href="../recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li> </ul> </div> Here is my CSS code for the nav bar and the first 2 links: Code:
#topnavdiv { position:absolute; left:0px; top:120px; width:100%; z-index:3; background-color: #3366CC; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-color: #f8c015; border-bottom-color: #f8c015; border-right-color: #f8c015; border-left-color: #f8c015; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; }
#topnavdiv ul { margin: 0px; padding: 0px; list-style-type: none; }
#topnavdiv li { margin: 0px; padding: 0px; list-style-type: none; display: inline; }
#topnavdiv b { display: none; }
a#buttonhome { background-color: #3366CC; background-image: url(images/nav.home.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonhome:hover { background-color: #3366CC; background-image: url(images/nav.home.on.gif); height: 24px; width: 65px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout { background-color: #3366CC; background-image: url(images/nav.about.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
a#buttonabout:hover { background-color: #3366CC; background-image: url(images/nav.about.on.gif); height: 24px; width: 85px; display: block; background-repeat: no-repeat; cursor: hand; }
Please can someone help me get them inline? Thanks in advance Hi guys, I have a small list positioning problem in IE 6/7 which I was hoping someone might be able to advise me on! List Positioning is fine in Firefox, but for some reason is adding about 50px on the left margin in IE... I know my page isn't quite valid because of the sIFR bits I have on it, but I'm working on this too! The page in question is here Here's my list css code; #services_home_container { width: 265px; height: 274px; padding: 0px 0px 0px 0px; float: left; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; line-height: 130%; } #services_home ul { list-style-type: none; width: 235px; padding: 0px 0px 0px 0px; } #services_home li { margin: 10px 0px 0px 0px; } #services_home li a { color: #4f2f9c; display: block; font: bold 120% Arial, Helvetica, sans-serif; padding: 0px 0px 0px 0px; text-decoration: none; } * html #services_home li a { /* make hover effect work in IE */ width: 235px; } #services_home li a:hover { background: #bcfbc6; } #services_home a em { color: #666666; display: block; font: normal 85% Verdana, Helvetica, sans-serif; line-height: 125%; width: 235px; padding: 5px 0px 5px 0px; } #services_home a span { color: #125F15; font: normal 70% Verdana, Helvetica, sans-serif; line-height: 150%; } #services_home img { float: left; padding:2px 0px 2px 0px; margin: 0px 5px 0px 2px; border: none; } If anyone has a moment to take a look and help me, it would be very much appreciated! Best regards Jon 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. Hello My problem is maybe a easy to solve one, but I realy don't know how to get it right. I have a list of links and want them equaly vertical spaced between all the line of links. link1 (space) link2 (space) link3 What I got doesn't look right in IE and Netscape at the same time. Is there a css tactic to get it right in both browsers? Please can someone help me? Here is some code below. How do I write it, that only the title is bold and not the description? Code: <html>
<head>
<style type="text/css">
.selected {font-weight: bold; }
</style>
</head>
<body>
<ul>
<li class="selected">Title</li>
<ul>
<li>description 1</li>
<li>description 2</li>
<li>description 3</li>
</ul>
</ul>
</body>
</html>
Hi, I have been developing my own website for some time now, and have asked a lot of questions, and checked other CSS resources to do a horizontal list. I have managed to create a horizontal list and it looks very good in my website. However I wish to improve this. At the moment I have to give a width for each element in my list. This means that if I have 5 elements in my list then I set the following CSS property in the ul li as follows: Code: div#header ul li {
width: 20%;
padding: 0px;
}
If the elements become four then I would set the width equals to 25% and so on. I would like to change this so that the list will still appear the same without me having to set the width. This would mean I do not need to change the CSS file each time I add a new element in my list. My list is inside a div tag. I would like to have the elements inside that list extend through the whole space of the div. I have checked other websites to see the examples they give, however they all seem to only provide an example with a width. Is this possible? Or I have to always set the width of the li element? I am sorry if I am not clear enough. Thanks for any suggestions. Regards, Sim085 Hi, I'm having a problem with some padding showing up oin both IE and Firefox with list items on my navbar. Please see: http://81.17.252.110/~wallis1/new/ I want the nav items to come to the edges of the <ul> tag (want to make the white borders on the navigation items come to the edge) but there is this padding there for some unknown reason between the <ul> and the <li> items. Please can you help as I'm tearing my hair out now, Thanks in advance, Newb Disclaimer: I know a little about CSS, but I'm just now making the conversion over from tables. The answer may be obvious, but I still can't see it. I have a list that I'm trying to get to render correctly between browsers. I keep running into the same problem. First of all, the link is: frontlinescreative.com/aljc2/indexCSS.html In the top right column I've got a list of three menu items, with subnavigation underneath. When you hover over the list item, the colors change, and all is well with the world. This works cross-browser. My problem is positioning. In Firefox and IE the list is flush against the blue box at left. In Safari and Opera it's about 30 some-odd pixels shifted to the right. Any ideas on where I've gone wrong? 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 |
|||||||