16 replies [Last post]
RSL
Offline
Regular
Atlanta, GA
Last seen: 15 years 29 weeks ago
Atlanta, GA
Timezone: GMT-5
Joined: 2005-03-31
Posts: 15
Points: 0

I've run into a problem that I can't figure out for the life of me. I've been Googling for anyone else who's had this issue, but it seems I might just be alone.

I've got perfectly valid, correctly nested [and closed] ul and li elements. I've stipulated a negative text-indent [-10] on the li. It views exactly as expected in every browser I've tested except [you guessed it] Internet Explorer 6. [Though I assume it does the same thing in other versions of IE as well.]

Here's the URL so you can see [in IE] what I'm talking about.
http://swimcommunity.org/blog/links/

Hopefully someone else will understand what's causing this problem. Thanks in advance.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 19 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Question about text-indent problem

IE seems to be repeating the -10px indent.

Have you tried applying it to the li directly, as opposed to the surrounding ul?

Verschwindende wrote:
  • CSS doesn't make pies

RSL
Offline
Regular
Atlanta, GA
Last seen: 15 years 29 weeks ago
Atlanta, GA
Timezone: GMT-5
Joined: 2005-03-31
Posts: 15
Points: 0

Question about text-indent problem

Yeah, it's the li that has the text-indent. I thought about moving it to the ul, but that would only indent that first line. :/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Question about text-indent problem

List indents are handled by padding and margin on the ul/ol sadly browsers have different takes on which is the best method as either is valid.
FF handles the indenting using left padding and IE chooses left margins.

The best perceived wisdom on the subject says that it is easiest, in order to gain control and level things across browsers, to set the preferred indentation method ones self in effect removing the default values and the best way of achieving this is to ultimately zero all margins/padding using the 'universal selector' and then re-set them for a grouped set of elements using your own values.

On the ul/ol itself; to use the Mozi model you would zero the left margin (to clear IE) and set left padding to 2.5em or whatever required and if you wished to go with IE use of margins to indent, then reverse the process. Of course if you wanted no indentation then set both to zero.

So controlling ul/ol indents is really down to margin/padding rather than the use of the text-indent property and you may have more luck if you work with these properties.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 12 years 5 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Question about text-indent problem

I was wondering if it was common to set all margins/padding to zero with the universal selector, and then redefine them throughout your css?

I haven't noticed it much before.

would it be more common, to set specific areas (such as <ul>) to zero, as in RSLs case?

thanks

larmyia

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Question about text-indent problem

I've seen a lot of mention of clearing the deck, but I can't imagine having to reset values for every affected element. But then I'm not all that concerned about having cross-browser pixel perfect clonage. The small variances in margins or padding seldom break a page, and if they do I can fix it. There is no sane reason to re-invent the margin/padding wheel in every stylesheet.

Are there differences? Of course. There is also no way in you know where that a web author has final say in the final rendering. A few pixels difference does not matter (assuming no breakage) to the visitor. He doesn't even know there is a difference.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

RSL
Offline
Regular
Atlanta, GA
Last seen: 15 years 29 weeks ago
Atlanta, GA
Timezone: GMT-5
Joined: 2005-03-31
Posts: 15
Points: 0

Question about text-indent problem

Hugo, I like your idea about the padding and margin but can you explain it again, just to make sure I understand. Right now, I'm thinking what all that meant is it's not going to work on both browsers. But I don't think that's what you said. I'm just not following. My bad. :/

Thanks in advance [again].

larmyia
Offline
Elder
London
Last seen: 12 years 5 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Question about text-indent problem

kk5st wrote:
There is no sane reason to re-invent the margin/padding wheel in every stylesheet.

thanks gary. I feel that's clarified a few things in my mind.

larmyia

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Question about text-indent problem

Sorry I'm probably not explaining very well.

The problem is that with ul/ol lists the formatting of them is predetermined using default values on the ul/ol to indent the li element of the structure, that is they have these values hardcoded into the specification of their layout, which is great but for one problem the spec say that using either padding or margins to achieve this is fine and proper, no preference either way.

Of course we then get the situation where one browser decides on using margins to achieve the indentation and the other thinks padding is better, neither is wrong but it leaves us in an awkward position as when we start to use both these properties we can get conflicting results.

What is proposed is that to gain some control we say 'no I don't want either of your default values thank you very much I would rather use my own'

To this end what one does is on the ul/ol we clear away those defaults by using padding-left: 0; and margin-left:0; and padding:0; / margin:0; on the list element


Now we have cleared away those nasty conflicting defaults and are free to either have it left as a plain unindented list or if we actually want to use them as intended to put the indent back, but this where we control things having set them to zero we can now choose how we want the indenting to be handled either with padding (FF/Mozi) or margin(IE) the point is that you do not need both!

If you wanted to follow the Mozi model using padding then you would leave margin-left at zero and set padding-left to 2.5em (browser default value) if you preferred to set the indent using margin then you would leave the padding to zero and the margin would gain 2.5em. the point being that you now say which property is used by all browsers rather than having a conflict occurring.

So as you can see it's not a case of not working across browser but one that will work as you have explicitly stated the property to be used.

The other method talked of and that I tend to agree with is the use of the universal selector '*' to globally zero all margins and padding
and here unusually I tend to disagree with Gary's point of view on it's use,

Given that this problem occurs it makes sense to say ok I don't want any default values lurking around so I will select every element and remove the margins and paddings completely, adding them back as I need them. Now I do agree with Gary that it could be tedious then to have to add these values back every time they were needed but I would also point out that more often than not we probably tend to use zero margins; take for instance a header div with a nav bar under it, we often would want them tight together no margins and when we do want them, tend to want our own value so inevitably end up setting it ourselves anyway.

There is another technique though to the universal zeroing which is to immediately reset the margins for selected grouped elements this way you re-establish your own default margins for the major elements such as h1, h2, p and if you wish ul /ol. This way you would not have to keep adding the property as you have now set a new default, I am currently trying this method using margin:1em 6%; on the major elements and it seems to work and make sense so far although I'm happy to hear any views on the veracity of this method as I haven't quite decided whether I like it but I am hooked on globally zeroing margin/padding.
I do agree with Gary about the nonsense that surrounds the pixel perfect notion it's an absolute absurdity to chase this when clearly we are the only ones that ever compare pages in this sort of detail between browsers, it's a lot of wasted time and energy on something that is a browser fault not ours and really doesn't effect the layout.

Having said that I do feel safer in the knowledge that I have cleared away one more possible area of confusion. lists can play tricks if your not prepared and are using bullets and don't understand how they are configured to render.

One thing I do advocate is to set up a simple page with a ul list and an ol list set a border on the ul/ol and a background on the li elements and then play around with the padding/margin values whilst checking the difference in IE and FF it's the only way to see how they actually work, it's seldom that you see the interaction between the ul/li, the border and background really help show how they are set up and make it far easier to understand.

Sorry if I've rambled along in a slightly simplistic fashion, hope it's slightly clearer, I still feel that the trying to use text-indent is the wrong way for lists but someone may put me right.

Larmyia, it doesn't seem to be a commonly known device using a global reset of margins/padding and I guess it would be more common to just set values directly on the element in question yet the more I think about it the more I favour the idea of a clean sweep along with my own values set on the next rule set for my major elements.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 12 years 5 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Question about text-indent problem

well Hugo, that post was very insightful and I finally get the whole ul/ol margin/padding thing.

it seems as though the universal selector is a personal decision. when I did it none of my <p> had spaces and I couldn't understand why! dope! I think I originally thought it only applied to margin-left for reasons only known to my my mind. obviously as "margin" is used it applies to -top -right -bottom as well.

one question. you did mention that when resetting margins for ul/ol you said:

Quote:
To this end what one does is on the ul/ol we clear away those defaults by using padding-left: 0; and margin-left:0; and padding:0; / margin:0; on the list element


why state margin-left/padding-left and then margin/padding?

thanks

larmyia

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Question about text-indent problem

Sorry that may not have ben clear the second declaration was to clear away any defaults on the <li> elements although this is not strictly required as those should just be top and bottom margins to separate the <li> lines.

Of course the use of the universal selector to clear defaults is a personal choice as is are many things, but it is getting wider exposure and is talked about favorably although we do need to be wary of faddish ideas that just become popular because one or two sites talk them and then every one and there dog posts an entry on their blog about it lending it inflated gravitas.

As I said earlier the best thing one can do is to lay out a test case for oneself with borders and backgrounds and play with the properties you see then how bullets are handled and how the various different values effect these things.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

RSL
Offline
Regular
Atlanta, GA
Last seen: 15 years 29 weeks ago
Atlanta, GA
Timezone: GMT-5
Joined: 2005-03-31
Posts: 15
Points: 0

Question about text-indent problem

I haven't tried out the code, but I do get it now. Thanks a million!

RSL
Offline
Regular
Atlanta, GA
Last seen: 15 years 29 weeks ago
Atlanta, GA
Timezone: GMT-5
Joined: 2005-03-31
Posts: 15
Points: 0

Question about text-indent problem

Allrighty then. I went and repaired the code and discovered a true bug. The problem the whole time is with putting bottom padding on the ul. Who knew? It took a second to figure it out, but I realized that the ul/li within blog posts weren't doing that weird indent thing, so I compared code and tried to mirror it. Everything worked good, then I tried to clean up the padding and noticed that the padding on the bottom completely out of the blue sends things farther over to the left. SOOOOO strange. Anyhow, things work better now, though I'm still prepared for a few snafus. How's it looking to you kittens?

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 24 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Question about text-indent problem

man... I can't believe I have only just caught on to this universal selector "reset" margins idea... it sounds great.

I am redoing a site from scratch at the moment and have the luxury to give this idea a shot... I think it will save me tonnes of hassles Laughing out loud

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 24 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Question about text-indent problem

can you isolote a universal selector within a div?

for example.

* myDiv { margin: 0; padding: }

<div id="myDiv>
content
</div>

just asking as I can't seem to get any of the combos to work?

cheers!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Question about text-indent problem

Are you sure you don't mean

#mydiv *

By saying * #mydiv, you are zeroing the margins and padding for #mydiv no matter what element is its parent. This is redundant, and could be replaced just as well with #mydiv.

If you want all the elements within #mydiv to have their margins and padding zeroed, then you need all the elements that are descended from #mydiv. Hence #mydiv *

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 24 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Question about text-indent problem

yeah, that's what I meant. cheers Laughing out loud