CSS Padding changes width

Using MSIE.  I have a nested UL tree.

<ul>
  <li><a href="#">Products</a></li>  
        <ul>
        <li><a href="#">Financial Software</a></li>
              <ul>
              <li>Simple Start</li>
                    <ul>
                    <li>Overview  </li>
                  </ul>
             
              <li>Pro 2006</li>
            </ul>
        </ul>
</ul>

My CSS is:
ul {  margin: 0px; padding: 0px;width: 181px;font: 10px verdana; font: 11px arial}
li { list-style: none; }
li a {width: 181px;;float:left; text-decoration:none; color: #000000}

ul a{ background: #A3A3A3;  font: bold 12px arial; padding: 10px 0px 10px 0px }
ul ul a {background: #D0D0D0; font: 11px arial;  padding: 5px 0px 5px 0px }

DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

QUESTION:
When I change the padding on the nested A to indent it (Padding-left: 10px) then it widens the entire area past 181px.  How can I avoid this?
LVL 4
KokoglenAsked:
Who is Participating?
 
GrandSchtroumpfConnect With a Mentor Commented:
if you want your list to be 181px, just don't specify any width on the <a>.
and if you need the <a>'s to fill the entire width, don't float them and use: a { display: block;}
specifying too many width is a common mistake.
0
 
GrandSchtroumpfCommented:
First, your code is not valid.  UL element can only contain LI elements, not other UL elements.
You need to have your nested UL inside a LI.
Something like this:

<ul>
  <li><a href="#">Products</a>  
       <ul>
       <li><a href="#">Financial Software</a>
            <ul>
            <li>Simple Start
                 <ul>
                 <li>Overview  </li>
               </ul></li>
           
            <li>Pro 2006</li>
          </ul></li>
       </ul></li>
</ul>
0
 
KokoglenAuthor Commented:
Ok, I fixed the validity.  It still is doing the same thing.  When I add padding, the entire width increases.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
GrandSchtroumpfCommented:
Total width = width + padding + borders.

If you have this:
li a { width: 181px; padding-left: 10px; }
The total width will be 191px.

If you want the total width to be 181px, just reduce the width:
li a { width: 171px; padding-left: 10px; }
0
 
KokoglenAuthor Commented:
That doesn't help me because I am making a tree structure and can't give each level different widths.  Text-indent gives me the padding I need, but is that supported across browsers?
0
 
GrandSchtroumpfCommented:
check out this site for examples:
http://css.maxdesign.com.au/listamatic2/index.htm
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.