|
CSS - <ul> Lists With Padding
Question? Okay I know IE for some reason defaults with a left-padding or something for an unordered list. so when I set padding:0 for my unordered list everything is great in firefox. But when I look at it in IE the list-style elements are pulled off of the list object. How can I place no padding on the list and still use the list-symbols in IE?
The thought of placing my own list object in the background, but it would be silly if I could just use the disc built into windows ie. thanks! Similar TutorialsHello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? I want to have a list that each listed item has a different image, how can i do this. Thanks http://jordanmeeter.com/?page=resources Okay... WTF is that about? I added another article to the "Articles" list... And it moved the section below it down. My CSS for #noindent : Code: .noindent {
float: left;
width: 200px;
margin-left: 0px;
margin-top: 5px;
padding-left: 0px;
list-style-type: none;
}
Does anyone know how I can fix the gaps on this block level lists? It looks fine on firefox and other browsers but ie6 and ie7 add gaps in between the lists. http://section31.us/study/html/temp...lists_on_ie.php Hi... How do I break a single list into multiple columns? The page I'm talking about is http://jordanmeeter.com/?page=links. I'd like to bring the "Other" category up over to the right, next to the rest of the categories. I tried Code: float: left;
width: 200px;
And that kind of did what I want... Not really, though. Hello! I've got a funky IE issue. I'm using IE9 with the compatibility view turned on for this one website. I've got a <ul> lists with hover states. It's acting odd. If I drag my mouse down from the top of the link, the hover state triggers. If I come from the bottom of the link, it doesn't. Do you think this has to do with a transparent PNG? Really appreciate any words of wisdom on this subject. Hi, I have a list item that extends onto a second line. How do I keep the second line the indented more than the first line? thanks -S On the site I am starting, I am following the suckerfish style of using a ul/li menu. That works fine. A little position difference I have to figure out between IE and the real browsers but it does work. Problem I run into is when one of my pages includes a ul in the content. Using the css as is, that ul in content is displaying incorrectly. It should just go down the page but instead goes across the page. In the stylesheet, I tried making two li's, li.menu and li.info. That broke the menu but the content list worked. I tried adding .menu to various other components in the css but couldn't get both to work. I use php to include the code for the menu so I don't have to go to each page if I want to make a change. Could someone give me a hand on making two the two li's work from a style sheet so that both the menu and the content work on that page. Here are the pages. The web page: http://www.cacct.com/new/faq.php The stylesheet: http://www.cacct.com/new/css/sitestyle.css The menu code: http://www.cacct.com/new/php/menu.html This is the first page I built using other methods before changing to stylesheets: You can see what the content should look like. http://www.cacct.com/new/faq.html Thanks tk Hey guys I just coded this list which has sub entries in it as well. It looks fine and works great in FireFox. However, when viewed in IE7 something is different. I am not sure if it isn't the normality, I just know it isn't what I want. I've attached and image of what the problem is, left side is IE and right side is FF. The code I'm using is simply Code: <ul>
<li>Main</li>
<ul>
<li>Sub</li>
</ul>
</ul>
Thanks Hi: The return key works fine in HTML lists (for example those in Outlook editor). However, in normal HTML, the return key double spaces inappropriately outside of lists (and between lists, too). Outside of lists, Outlook replaces <p> with <br> to get wordprocessor-like action from the return key, but this doesn't isolate the "new" line/paragragh from the preceeding text, like <p> does. So, attempts to format the "new" paragraph affects the "previous" paragraph. Is there any way to have <p> behave differently inside and outside of lists (maybe making the double-spaced lines half the usual height, or some other approach? Thanks, Terry i am trying to get the list to show over two lines like so (using _ as multiple spaces get turned on to one) how do i get both centered. _____item1____item2____item3 item4____item5____item6____item7 Code: <div class="homebodytext"> <ul> <li class="homebodylifloat">item1</li> <li class="homebodylifloat">item2</li> <li class="homebodylifloat">item3</li><br style="clear: both;"><br> <li class="homebodylifloat">item4</li> <li class="homebodylifloat">item5</li> <li class="homebodylifloat">item6</li> <li class="homebodylifloat">item7</li><br style="clear: both;"> </ul> </div> Code:
.homebodytext { border: 0px solid #0000;
text-align: center;
width: 900px;
padding-left: 20px;
font-weight:bold;
}
.homebodylifloat {
float: left;
width: 220px;
}
Hey i am trying to create a navigation bar that uses hover lists so that there are a number of links and when these are hovered over, the provide links which are under this section. I have sourced code and used this and it all works apart from that the hovered options are about 0.8cm apart and the first is over the top of the original list, which still needs to be seen. The code for the CSS is below; #navmenu{ width: 100%; float: left; background: #900; height: 100%; } #navmenu ul{ list-style: none; margin: 0; padding: 0; width: 120px; float: left; } #navmenu li{ margin: 3px 0px 3px 0px; padding: 3px 0px 3px 0px; display: inline } #navmenu a{ font: bold 15px Calibri; display: block; border-width:1px; border-style:solid; border-color:#F90; margin: 0; padding: 2px 3px; color: #FC0; background: #900; text-decoration:none; } #navmenu a:hover{ color:#FFF; background:#C30; } #navmenu li { position:relative; } #navmenu ul ul { position:absolute; top: 0; left: 100%; } div#navmenu ul ul{ display: none; } div#navmenu ul li:hover ul {display: block;} div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} body { behavior: url(csshover.htc); } [if IE]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li {float: left; width: 100%;} #menu ul li a {height: 1%;} #menu a { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif] and the code for the section of the webpage (btw it is linked in the header) <div id="navmenu"> <ul> <li><a href="index.html" title="Home">Home</a></li> </ul> <ul> <li><a href="products.html" title="Products">Products</a> <ul> <li><a href="rubber.html" title="Rubber">Rubber</a></li> <li><a href="struts.html" title="Struts">Struts</a></li> <li><a href="hardware.html" title="Hardware">Hardware</a></li> </ul> </li> </ul> </div> Thanks help would be appreciated. Okay, my problem deals with FireFox and Internet Explorer. If you view my links page (http://jordanmeeter.com/?page=links) in Internet Explorer, everything displays correctly. However, if you look at it in FireFox, none of the CSS works. In my CSS, I put: Code: .noindent {
margin-left: 0px;
list-style-type: none;
}
Why doesn't that work in FireFox? Thanks in advance. =) Hi, can anyone give me a hand with customizing my lists? I am trying to do something like here, http://www.microsoft.com/, but with a semi-transparent background in the nav bar. It works if I have borders around the links, which is fine if I had a solid bg as I can hide them, but being semi-transparent I have a problem, and when I remove them it causes a shift when moving over a link. Any ideas?? Hi everyone. I'm looking for some help rendering a list using css. Basically I have a list in this format: Code: <ul>
<li>shirts</li>
<li>jackets
<ul>
<li>casual jackets</li>
<li>formal jackets</li>
</ul>
</li>
<li>suits</li>
</ul>
And I would like to render it something like: Code: shirts jackets > casual jackets formal jackets suits All the text needs to be floated left so it will wrap to the next line. I'm able to float the top level list items correctly i.e. "shirts jackets suits" using: Code: <ul id="menu">
<li>shirts</li>
<li>jackets</li>
<li>suits</li>
</ul>
#menu, #menu ul {
list-style:none;
}
#menu li {
float: left;
width:5em;
}
the problem I have is getting the nested lists to appear alongside the parent items instead of below. When I add the nested lists I see something like: Code: shirts jackets suits
casual jackets
formal jackets
Maybe this just isn't possible but if anyone could help me I'd sure appreciate it! Thanks! Toby http://jordanmeeter.com/new/links.php If you view that page in Firefox, it displays how it is supposed to. But if you view the page in Internet Explorer, you can see that it is severely ****ed up! Any suggestions? Thanks, Jordan Hi, I have a simple question. Is it possible to display and hide a list if i click on a link using CSS? I'm not looking to change pages or anything. I know it can be done using Javascript but I would rather not use it. I've done a few searches for hiding lists in CSS but to no avail. Thanks, To make this easier on everyone, I've turned my idea into an image, so please see the image I attached. I'm absolutely horrible with CSS, so I just need some help with converting that image into CSS/HTML. I'm hoping to have each box an unordered list, so they are still organized nicely even if someone has CSS disabled. Thanks. |
|||||||