Page 1 of 1

<li> text-alignement in Firefox vs. IE

Posted: Wed Jan 25, 2006 10:30 pm
by magicrobotmonkey
Hey everyone, I used to hang out on this forum a lot and then I got a real job and ran out of time. Well, I'm back! And I have a problem. This one's driving me nuts. I am trying to use CSS and unorder lists to build a tree. I know this has been done a hundred times for sideways trees, like file explorer, but I am trying to build a centered tree. I am so close to having it right, but firefox is screwing with me. What I have so far works in IE and Opera, but not in Firefox. Although it just barely misses in firefox. Here is the page:

http://abassett.sassiedev.com/loctree/loctreetest.html

The layout is just a bunch of nested unordered lists. here is the css:

Code: Select all

#entireTree ul{
  padding:1;
  margin:0;
  border:1px dotted green;
  display:inline;
  float:left;
}

#entireTree li{
	list-style-type:none;
	display:inline;
	padding:1;
	margin:1;
	border:1px dashed red;
	text-align:center;
	float:left;
	
}


#entireTree{                          
	width:auto;
	text-align:center;
   
}
It's pretty simple, although it took me some time to get it all straightened out. but here I am. I have the red and green dashes in place so I can see what's going on. In IE and Opera, everything looks right. Each node of the tree is centered above it's children. In firefox, however, something is amiss. The root of the tree, "Entire Company" is centered, but the rest of the nodes are all left aligned. The centering of the root comes from the outer div, when I take the center out of the entireTree class, it moves to the right. The rest of the nodes, however, refuse to budge no matter what I do. I put text-align:center in everywhere, but It didn't help.

Has anyone seen this before? Is it a bug in firefox? I have been searching all over for anyone who's had a similar problem, but I haven't been able to find anything remotely similar. I am relatively new to CSS so I'm hoping someone more experienced has some tricks up their sleeves.

Thanks, MRM

Posted: Thu Jan 26, 2006 6:24 am
by raghavan20

Code: Select all

li{ 
   list-style-type:none; 
   display:inline; 
   padding:1; 
   margin:1; 
   border:1px dashed red; 
   text-align:center; 
   float:left; 
    
}
You can see now that I have removed the #entireTree before li in CSS declaration,,,try it now..

Posted: Thu Jan 26, 2006 8:43 am
by magicrobotmonkey
Nope, didn't work. I know the style is applying to all the li's, as they all have the dashed red border, but for some reason the center won't stick.

Posted: Thu Jan 26, 2006 1:10 pm
by matthijs
I find your problem difficult to see. On my box I see no difference between IE (6.0), FF 1.5, and Moz 1.7.12
You could have a look at the recently written article http://24ways.org/advent/centered-tabs-with-css by Ethan Marcotte, or the listamatic articles at maxdesign. Maybe there's some solution there.

Posted: Thu Jan 26, 2006 4:52 pm
by magicrobotmonkey
Yea, I changed it to left align all the text. I think it looks better that way anyways. Especially with the borders on the top of the li's, it makes it pretty clear what is going on. Now if only IE supported :hover, I'd be all set.

Posted: Thu Jan 26, 2006 5:13 pm
by Roja
magicrobotmonkey wrote:Yea, I changed it to left align all the text. I think it looks better that way anyways. Especially with the borders on the top of the li's, it makes it pretty clear what is going on. Now if only IE supported :hover, I'd be all set.
Please change your topic to [SOLVED] at the end.

As to the pseudo class support, you can get it with Dean Edwards' IE7: http://dean.edwards.name/IE7/

(Its a collection of behaviors for IE that bring IE up to speed with standards).

Posted: Fri Jan 27, 2006 9:02 am
by magicrobotmonkey
Well, the original problem isn't really solved, I never could get the text in the LI's to center align.