|
CSS - Expanding List Problem
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> Similar TutorialsI have a <div> that contains a list. I would like to "dynamically" expand the number of items on the list when one particular item is "clicked". Is there a tutorial for this type of action? Hello, Is there a way to stop an expanding page at a certain width? But yet keep the expanding feature? Right now as you can see from the below website that I am working on the page contracts and the images of course stay at there minimum width but the rest of the page keeps contracting...I don't like it doing that. Any ideas? web.bpro.com/agagency/index.htm I have designed an expanding menu similiar to the one described he (URL address blocked: See forum rules)/cms/show/66.html. The problem I am having is that I have a lot of menu items, so when it expands, the list of items is greater than the height of the containing element. In Firefox, this is not a problem, because the containing element seems to resize to show all of the items. In IE however, it does not resize. As a result, many of my items have expanded beyond the viewing region of the screen, without me being able to scroll down. Is there any sort of way that I can to fix this, besides writing Javascript to manually change the height of the containing element every time a link is clicked? Hello, I started off trying to find a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide. This box worked great with the screen res but now I'm trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar. Any idea how I can make the box expand with my content? here is a link to my test page. http://www.gamerunion.com/test.html My css code. Code:
div#case {
position:absolute;
z-index:1;
top:200px;
left:50px;
bottom:50px;
right:50px;
background:url(/assets/images/tile.png) repeat;
}
div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
width:0;
height:0;
overflow:hidden;
display:block;
}
div#tlcorner {
position:absolute;
z-index:10;
top:0;
left:0;
background:url(/assets/images/corners.png) -369px 0 no-repeat;
width:123px;
height:123px;
}
div#trcorner {
position:absolute;
z-index:10;
top:0;
right:0;
background:url(/assets/images/corners.png) -246px 0 no-repeat;
width:123px;
height:123px;
}
div#blcorner {
position:absolute;
z-index:10;
bottom:0;
left:0;
background:url(/assets/images/corners.png) 0 0 no-repeat;
width:123px;
height:123px;
}
div#brcorner {
position:absolute;
z-index:10;
bottom:0;
right:0;
background:url(/assets/images/corners.png) -123px 0 no-repeat;
width:123px;
height:123px;
}
div#lftile {
position:absolute;
z-index:5;
top:0;
left:0;
bottom:0;
background:url(/assets/images/lr.png) -20px 0 repeat-y;
width:20px;
}
div#rttile {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
background:url(/assets/images/lr.png) 0 0 repeat-y;
width:20px;
}
div#tptile {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 0 repeat-x;
height:123px;
}
div#btmtile {
position:absolute;
z-index:5;
bottom:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 -123px repeat-x;
height:123px;
}
div#case div.content {
position:absolute;
z-index:10;
width:100%;
min-height:400px;
overflow:hidden;
}
div#case div.content h1 {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:16px;
color:#000000;
margin:5px 0;
padding:100px 0 0 100px;
text-align:left;
text-transform:capitalize;
}
div#case div.content p {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:14px;
color:#000000;
text-align:justify;
padding:0 100px;
}
HTML Code:
<body>
<div id="header">
<h1 class="small">GamerUnion</h1>
<h2 class="small">For Gaming Addicts by Gaming Addicts.</h2>
</div>
<div id="case">
<div id="tlcorner"><span>top left corner</span></div>
<div id="trcorner"><span>top right corner</span></div>
<div id="blcorner"><span>bottom left corner</span></div>
<div id="brcorner"><span>bottom right corner</span></div>
<div id="tptile"><span>top side tile</span></div>
<div id="lftile"><span>left side tile</span></div>
<div id="rttile"><span>right side tile</span></div>
<div id="btmtile"><span>bottom side tile</span></div>
<div class="content">
<div id="nav">
<ul>
<li><a href="/" class="current">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/forum/">Forum</a></li>
<li><a href="/resources.html">Resources</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<h1>Gamerunion</h1>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
</div>
</div>
</body>
Okay, 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. 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 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 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, 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 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 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. 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 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 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? 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, 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. 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>
|
|||||||