CSS - Indent Parent Only

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 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

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'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

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'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

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 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;
}

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.

Can anyone tell me how to remove the left indent for nested ul tags in IE?

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.

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

Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ......

Code:

<div style="margin:0px;padding:25px 30px;text-align:left;">
 <img style="text-align:center;" src="...">
</div>

Please look at this page -
http://hometown.tmhdesign.com/ask.asp?faq=9

See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7

I just noticed it does it also on this page

http://hometown.tmhdesign.com/staff.asp