|
CSS - Can't Remove Indent For Nested Ul Tags
Can anyone tell me how to remove the left indent for nested ul tags in IE?
Similar TutorialsI have set up a couple vertical boxes and filled them with 'column' boxes all nested within the parent vertical boxes. My problem is when, say, box #3 from the left has more content than the furthest left box, instead of stretching the parent to accommodate the content and push down the other parent horizontal box below, the content just flows behind the lower horizontal box. If the content in the furthest left box is the longest, this problem doesnt occur. The parent box is stretched to fit. Thx Joe ####################### html ######################### <html> <head> <meta http-equiv="Content-Type" charset=windows-1252> <link rel="stylesheet" href="test.css" type="text/css" media="screen,projection,print" title="Default" /> </head> <body id="savor-home"> <div id="main"> <div id="abovefold"> <div id="column-a"> <div id="type2"> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-b"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-c"> <div id="type2"> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-d"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> </div> </div> <div id="maincontent"> <div id="column-a"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> <div id="column-b"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-c"> <div id="type2"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> </div> </div> </div> </body> </html> ####################################### css ####################################### body { margin: 0px; background: #fff; } #main { width: 780px; min-height: 1500px; } #savor-home #abovefold { position: relative; top:0px; left:0px; width: 100%; width: 780px; clear: both; } #savor-home #abovefold #column-a { background: #eee; width: 185px; position: relative; top:10px; left:10px; display: inline; } #savor-home #abovefold #column-b { background: #ddd; width: 185px; position: absolute; top:10px; left: 205px; display: inline; } #savor-home #abovefold #column-c { background: #ccc; width: 185px; position: absolute; top:10px; left: 400px; display: inline; } #savor-home #abovefold #column-d { background: #bbb; width: 185px; position: absolute; top:10px; left: 595px; display: inline; } #savor-home #abovefold #type1 { background: url("/img/savor/featcontent1.jpg") no-repeat; width: 100%; /* hide from IEMac\*/ width: 185px; \width: 185px; w\idth: 165px; *width: 185px; /* end hiding */ padding: 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; } #savor-home #abovefold #type1 h2 { color: #000; } #savor-home #abovefold #type1 h4 { color: #B5390F; padding: 1px; } #savor-home #abovefold #type1 a:link, #savor-home #abovefold #type1 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #abovefold #type1 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #abovefold #type2 { background: url("/img/savor/featcontent2.jpg") no-repeat; width: 100%; /* hide from IEMac\*/ width: 185px; \width: 185px; w\idth: 165px; *width: 185px; /* end hiding */ padding: 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; } #savor-home #abovefold #type2 h2 { color: #000; } #savor-home #abovefold #type2 h4 { color: #B5390F; padding: 1px; } #savor-home #abovefold #type2 a:link, #savor-home #abovefold #type2 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #abovefold #type2 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent { position: relative; top:0px; left:10px; background: #0f0 url("/img/savor/maincontent.jpg") no-repeat; width: 770px; } #savor-home #maincontent #column-a { width: 256px; position: relative; top:10px; left:0px; } #savor-home #maincontent #column-b { width: 256px; position: absolute; top:0px; left: 256px; } #savor-home #maincontent #column-c { width: 256px; position: absolute; top:0px; left: 512px; } #savor-home #maincontent #type1 { width: 100%; /* hide from IEMac\*/ width: 256px; \width: 256px; w\idth: 236px; *width: 256px; /* end hiding */ padding: 0 10px 0 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; border-right: 1px dotted; } #savor-home #maincontent #type1 h2 { color: #000; } #savor-home #maincontent #type1 h4 { color: #B5390F; padding: 1px; } #savor-home #maincontent #type1 a:link, #maincontent #type1 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent #type1 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent #type2 { width: 100%; /* hide from IEMac\*/ width: 256px; \width: 256px; w\idth: 236px; *width: 256px; /* end hiding */ padding: 0 10px 0 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; } #savor-home #maincontent #type2 h2 { color: #000; } #savor-home #maincontent #type2 h4 { color: #B5390F; padding: 1px; } #savor-home #maincontent #type2 a:link, #savor-home #maincontent #type2 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent #type2 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } In the example below, why would there still be an indent on the ul li? Thanks for the help. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
a:link {
text-decoration: none;
color: #333333;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #999999;
}
a:active {
text-decoration: none;
color: #000000;
}
#wrapper{
width:760px;
background-image: url(http://www.itsjustjeff.com/CGStest/images/navback.jpg);
background-repeat: repeat-y;
background-position: 0px 0px;
float:left;
}
#navlist ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
#navlist li {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #666666;
line-height: 21px;
}
#navbox{
margin:0;
padding:0;
width:156px;
float:left;
}
body {
background-color: #CCCCCC;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="navbox">
<ul id="navlist">
<li>| <a href="index.php">information</a></li>
<li>| <a href="informacion.php">informacion</a></li>
<li>| <a href="locations.php">locations</a></li>
<li>| <a href="pininfo.php">PIN# information</a></li>
<li>| <a href="resources.php">resourcess</a></li>
</ul>
</div>
</div>
</body>
</html>
Anyone know a trick to get text-indent applied to a text input field working on the default value in IE? Code: <input type="text" name="name" value="Full Name" /> text-indent does not apply to that initial value in IE. Once you start typing text it does. I'm using a web application for an online survey system. The pages rendered are XHTML transitional ("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">")... but it doesn't validate (a big problem, I know). It looks like this initially... ...and I'm trying to indent the entire element below the header text like so... ...but the problem is that it applies the change not only the parent TABLE/DIV combo, but then the children as well (which is why the radio buttons ended up being shifted over too I believe). I can't change any of the code of the application, but the application references an external CSS file that I can edit only (so I can't change the fact that there aren't many/any classes assigned to the elements to use directly... but I can modify this one file and have the changes applied). What I've tried thus far is to use either of the following... Code: TABLE DIV {position: relative; left: 25px;}
TABLE DIV {padding-left: 25px;}
I found the tree using Firebug for Firefox. Is there a way to make the CSS code be applied to only the first/parent TABLE/DIV combo and not it's children? Maybe I could start with BODY TABLE DIV or something? I would really appreciate any assistance possible. I've read many forum replies to help getting rid of indents in li & ul items. None of the solutions are working for me. PLease help! I have a footer divided into 3 columns. The text inside each column is left-aligned with no padding/margin except for my twitter feed, which shows up with a ~41px indent. I've tried every combination of padding & negative margin in the CSS, nothing works. Currently: #twitter_update_list li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_update_list ul li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_div {padding:-41px 0 0 0; text-indent:0px; margin-left:0 0 0 0; overflow:hidden; display:inline; text-align:left;} My website is marinaporter.blogspot.com Thanks so much... I'm trying to construct a nav menu using <li>'s, with each <li> element indenting 5px more than the one above it. Is this possible using just one class for all the <li> elements? I'm using Wordpress and the use of the nav loop precludes me from being able to assign each <li> element it's own class (unless I hard code the navigation). Thanks in advance for any help. Hi I want to increase the indent size in my pre tag. How can this be done? Thanks, Jake I'm having this issue where 1st paragraph is not indented then all the rest are.... I don't want any indentation.... yet for some reason something is causing it to. How can i investigate what's causing this? Thanks. (btw there's no UL or LI involved in this only P I have a tag which pulls down from the .p tag. What I was looking to do is, just remove the top margin from my custom tag. The result is, the first line indents but does not for the rest of the paragraph. Any suggestions??? p { font-size: 11px; margin:10px 10px 10px 10px; line-height: 140%; color:#333333; } .table_content { font-size: 11px; margin-top: 0px; } I'm a bit confused why text in a relatively positioned div, following a floating div, would not align flush along the left edge of the div. My understanding was that the float would remove the div from the flow of the page, thus not affecting the relative div. But the mere presence of the floated div forces an indent of the text in the relative div. What gives? Example Hi, I'm trying to change the horizontal indent of my lists b/c I feel that the indent is too much. It's taking up too much space. Therefore, I looked around and came up with this: Code: ul, ol
{
list-style-position: inside;
margin-left: 0px;
padding-left: 0px;
}
It does work (you can change 'margin-left' to whatever you prefer), but the problem is sublist items are not indented further. They are forced to the same distance as the parent list. For instance, Code: <ul>
<li>item 1</li>
<li>item 2</li>
<ul>
<li>item 2.1</li>
<li>item 2.2</li>
</ul>
<li>item 3</li>
</ul>
will look like: Code: * item 1 * item 2 o item 2.1 o item 2.2 * item 3 in stead of: Code: * item 1 * item 2 o item 2.1 o item 2.2 * item 3 It does this in both FF and IE. Does anyone have any tips? Thanks, Matt Hey, I'm building a rather elaborate javascript popup menu, and I'm trying to get some distinction between some of the long-text menu items. I have no padding after the <p> tags because then I get an extra space at the bottom of my menu. So I'm trying get a hanging indent to work: my CSS styles: .question_indent { text-indent:-10px; padding-left: 10px; } .popupmenu p{ color: white; font-size: 0.80em; display: block; padding-left: 6px; padding-right: 6px; margin-top:0px; margin-bottom:0px; } Here's my problem: with my javascript highlight-on-hover function, the hightlight starts in the middle of the first letter of the menu item with a hanging indent. I can't figure out a way to get around it (e.g. can't find anything on google). function subhighlight(obj) { if (subhighlighted!=null) { //unhighlight last link subhighlighted.style.background = ""; subhighlighted.style.color = "#f7f7f7"; } subhighlighted=obj; if (subhighlighted!=null) { //highlight current link subhighlighted.style.background = "#f7f7f7"; subhighlighted.style.color = "#376092"; } } Here's some of my menu item code: sublinkset[0]= '<p class="question_indent">llooong text repeat llooong text repeat llooong text repeat llooong text repeat.</p>' sublinkset[0]+='<p class="question_indent"><a href="about_us.html" id="11">But that\'s just a summary. Click to read more.</a></p>' I actually am having two problems, the one I alluded to in the subject and one I posted previously but got no response. This time, I'm including a URL and a CSS link in the hopes that someone might be able to help me out. The problem I posted earlier is regarding my navigation column and footer being omitted about 80% of the time in IE5/Win. Obviously, that's a huge problem. Of the browsers I've tested, it only happens in IE5/Win. The second problem is a bizarre issue regarding list items and the copy of the website. For some reason, in both IE5/Win and IE6/Win, the copy in the main column is slightly indented when there are list items (i.e. my navigation links!). This doesn't happen in any other browser I've tested and let me tell you, it's really cramping my style, because it makes the copy look like crap. Anyway, here's the URL of a test page: I've removed the page link. And here's the CSS link: http://dev.homedecorbuyer.com/stylesheets/default.css * Note: about 8 lines of CSS are on a different stylesheet, but only have to do with color and the header graphic. Please help. Whenever I can lend a helping hand on this forum, I post; it's my way of paying it forward. Any assistance would be greatly appreciated. Hey gang, I'm trying to change the indent of an unordered list. I have made this mock up just using spaces to illustrate what I'm trying to accomplish: I mark it up as: <ul> <li>Perennials</li> <ol>Artemisia</ol> ... ... </ul> I cannot get the <ol> indent to decrease from its default. I have tried playing with the padding and margin, but I need it to go back, not forward. What is the CSS to decide how many px/em the ol is indented? I'm sure this is simple, but I can't figure it out! Any help would be great. Thanks. For my paragraph elements I want the text-indent: property to apply to every new line..... Instead of just the first line... How is this done? thank ye. Hi, I have a drop down menu using <UL> and <LI>. Is there a way i can reduce the left indent from where the bullet point would normally be? Many thanks How do I remove the indenting that happens on a UL with CSS? I want a vertical list but I don't want it to indent as it messes up my design. I've used bullet image for a list but it give more indent then i want to use. I've checked the padding and marging for the other DIV ID's and set all to zero but also there is more indent in the left side. How is it possible to reduce the left indent for the list? Code:
.test1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 15px;
color: #003366;
text-align: left;
list-style-image: url(bullet1.gif);
border: 1px solid #000099;
list-style-position: outside;
width: 150px;
margin: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
#test2{
width:215px;
background-image: url(1bg-menu-v-mid.gif);
background-repeat: repeat-y;
border: thin solid #000066;
float: left;
}
i want to add styles to the text area content such as bold, itallic, indent, color and size (like our fourms Post new Thread text area). how is it possible wating for ur reply bye Hi everyone. I've come pretty close to solving this problem but certain problems keep showing themselves. Here's the mockup menu I'm trying to recreate. Current CSS: Code:
.interior #sidebar ul{
padding:20px 0 5px 0px;
list-style:none;
}
.interior #sidebar ul.outerUL {border-bottom:1px solid white;}
.interior #sidebar ul.middleUL{border-top:1px solid white; margin:0; padding:5px 0 0 0;}
.interior #sidebar ul.innerUL{padding:5px 0;}
.interior #sidebar ul li a {padding:5px 0 5px 0; margin:0;}
.interior #sidebar ul li.outerLI a{
border-top:1px solid white;
padding:0 0 0 20px;
color:#003371;
width:100%;
}
.interior #sidebar ul li.middleLI a{
padding-left:25px;
color:#3f699d;
}
.interior #sidebar ul li.innerLI a{
padding:2px 0 2px 30px;
color:#0f8b53;
}
.interior #sidebar a {text-decoration:none;}
Current HTML: Code:
<div id="sidebar">
<ul class="outerUL">
<li class="outerLI"><a href="#">Our Misssion</a></li>
<ul class="middleUL">
<li class="middleLI"><a href="#">Quality</a></li>
<ul class="innerUL">
<li class="innerLI"><a href="#">Dedication</a></li>
<li class="innerLI"><a href="#">Perseverance</a></li>
</ul>
<li class="middleLI"><a href="#">Choice</a></li>
<li class="middleLI"><a href="#">Value</a></li>
</ul>
<li class="outerLI"><a href="#">Parkland Timeline</a></li>
<li class="outerLI"><a href="#">Management Bios</a></li>
</ul>
</div>
I've tried multiple different ways of acheiving the desired look, but each one has a certain problem with it. This is the best I can get while still keeping each link the correct color and font size. I'd be all set (I can deal with the padding later) if I could get the white bar above each of the top-level links to extend across the whole sidebar div. |
|||||||