Text-indent on list items

[danepak]

Hi,

I'm encountering a problem with bullet points in a widget (website done in Wordpress).

Bullet points are looking good in IE, but not in other browsers (Safari, Firefox and Chrome).

text indent -13 is good in all other browsers, but -22 is good in IE.

This works in all other browsers, apart from Internet Explorer

#services ul li {
list-style: square inside;
padding:0;
margin:15px 15px -13px;
text-indent:-13px;
}



This works in Internet Explorer

#services ul li {
list-style: square inside;
padding:0;
margin:15px 15px -13px;
text-indent:-22px;
}

Is there anything I can do to fix this problem?

[lucy24]

I smell a font issue. Are all of your browsers set to use exactly the same default font and size-- or is it explicitly set elsewhere in the CSS? Whenever possible, express your text-related measurements in ems so they will work on everyone's browser with everyone's font. Even if you think you have successfully forced a name and size, my Palatino is not your Palatino and my pixels are not identical to your pixels. Setting everything in ems will keep everything to a consistent proportion.

[danepak]

Thanks for your reply.
It's exactly the same problem on the 5 different computers that it's been tested on (both Mac's and PC's).
Not really sure what you mean about the ems (I hardly know anything about CSS, sorry!)

[rocknbil]

You also said "Wordpress" and "Widget" and that makes me thing you're working with the sidebar. Is it native theme code? If it is, it is horribly invalid. It nests the search form and heads inside li's:

<li>
<form action ="" id="search-widget">
...</form>
</li>
<li>
<h3>My first widget</h3>

</li>

When the code is invalid, it most likely throws the pages into Quirks Mode which could be another aspect of what you're seeing. So the first step is to get it to validate [validator.w3.org] or as close as you can before tweaking the code for IE.

An easy quick-check: in FireFox, locate some background area, right-click and select View Page Info from the contextual menu. On the General tab you will see Render Mode.

I've found I have to really tweak the sidebar themes to get them to validate, but fortunately don't have to descend into the core code.

[lucy24]

Not really sure what you mean about the ems (I hardly know anything about CSS, sorry!)

An em is the size of a character within a given point-size and font. If you express a hanging indent as {margin-left: 2em; text-indent: -2em;} it will always have the same shape, regardless of font and size. If, instead, you express the margin and text-indent in pixels, the hanging indent ("outdent") will always be the same physical size. Do a little experimenting and you will see the difference.

But if you're getting different results on different computers and only one browser is anomalous (btw, did you check on all current versions of MSIE?) then it's an issue of the browser trying to interpret something it can't quite understand. Or, in the case of MSIE, choosing to interpret something it understands perfectly well but just doesn't feel like doing. This is Not Nice but is unfortunately true. Rumor has it the newer versions behave better, at least in some respects.

[danepak]

Hi Lucy (and Rocknbill),
No, I actually get the same result, no matter which computer.
So basically, IE (both 8 and 9) displays the same, both on my laptop, my wife's laptop and a couple of my friends computers.
And the same with the other browsers.

I tried with em.

This looks perfect in IE
text-indent: -1.6em;

This looks perfect in all other browsers
text-indent: -1.1em;

So still the same problem.
It looks good in IE, if it's got a certain value.
By changing the value, it looks no good in IE, but looks great in all other browsers.

I'm starting to give up. Really really don't know how to fix this problem.

[edited by: alt131 at 5:03 am (utc) on Jul 15, 2011]
[edit reason] Thread Tidy [/edit]

[danepak]

Rocknbill,
I did the Firefox thing and it tells me that the Render Mode is Standards compliance mode.

Do I just type the full website address in the the Markup Validation link?
It came up with 4 errors and 1 warning.
None of them seems to have anything to do with my problem.

[alt131]

Hi Danepak, and welcome to WebmasterWorld :)

No need to give up! I have been trying to find time to take a closer look at this, but in the interim can you tell me why you are using text-indent? Is it because you are trying to make the distance between the bullet and the text the same cross-browser?

The reason I ask is because if so, unfortunately that's not fixing the actual cause of the initial browser variations. Browsers vary in the dimensions of the padding and margins they apply to the ul, and to the li. So unless you "zero out" (remove) those initial differences, adding text-indent simply accumulates the differences rather than evening them out. If that makes sense.

I've never recorded the differences, so this is a good chance. While I'm doing that, make sure your code validates as rocknbil suggested (always good practise, even if not affecting the code problem), and as you are playing with the code, if you haven't already done so, try setting margin and padding to zero on the ul and li and watch the effect.

And of course, if my guess as to why you are using text-indent is wrong - then tell me ;)

[danepak]

Hi alt131,

I think that my business partner (who did this originally, but is unavailable at the moment - besides, he's also given up after spending days on this problem), added the left indent to the CSS, as there otherwise was a problem, if a bullet point went onto two lines (the 2nd line wouldn't align perfectly underneath the first letter of the bullet point (hope it makes sense).

[lucy24]

!
I know exactly what you're describing. What happens if you try {list-style-position: outside;} instead of inside?

[danepak]

Hi Lucy,

That made it really angry :-)
It moved some of the text out of the box and the alignment was even worse than before.

There's only really one single letter width, which is causing this problem (if it makes sense).
I just had another look and the best settings for non IE browsers is -15px, so there's a difference of 7px (as IE likes -22px)

Am I allowed to post external links to screenshots (where you don't see the actual website, but only a tiny part of it, which would be the widget area and where the company name isn't mentioned)? (it would be a link to a free image hosting)

[edited by: danepak at 6:53 am (utc) on Jul 15, 2011]

[danepak]

Also, I've tried to switch font (the WP theme allows for lots of different fonts, both standard fonts and also Google web fonts).
Exactly the same problem, no matter which font I use.

[alt131]

Ok, you two, take a break so the rest of us can catch up ;)

Danepak, there is absolutely no requirement for a screenshot. We have the code, so it is possible to reproduce the issue. This is not a case of needing to see what is going on, it is a matter of taking time to deal with the actual issue.

At this stage, the best I can tell is that you are trying all sorts of things but really just loading the code with more and more adjustments. As I have said, this is only adding more variations on top of existing variations.

Have you adjusted the default margins and padding on ul and li?

[lucy24]

That made it really angry :-)
It moved some of the text out of the box and the alignment was even worse than before.

Oops! I forgot to say that "outside" has to be in combination with not using hanging indents. In theory it gives you an ordinary rectangular text box, and then the marker is off to the side. Is MSIE now in a terminal funk so no matter what you do it just gets worse? :(

[alt131]

Whew, did you two take a tea break? ;)

Anways Danepak, hopefully this explanantion will make some sense of what has been happening.

First, a good trick when working with lists is to set a 1px outline (or border if working ie<8)) on the ul and li. The reason fos suggesting that is because if you do you can easily see that list-style-position: inside positions the marker (bullet point) inside the principle box - which is the box drawn around the text. list-style-position: outside positions the marker outside that principle box. So if you have multiple lines of text and you want the left-most edges of the text to align, use list-style-position: outside.

Second, best I can tell, the posted code was trying to override the default rendering of list-style-position:inside by pushing the principle box to the right, then trying to drag the first line back using a negative text-indent to try to get the left edges of the multiple lines of text to align. Add in the default margin/padding difference between browsers and you can see why there were variations, plus complete chaos when you added on a change to list-style-position.

So, towards a solution. Rather than using list-style-position: inside then trying to adjust using text-indent, delete the text-indent, use list-style-position: outside, and reduce the cross-browsers differences by zeroing out the margins/padding. The following may not give you the exact design you want, but should get you started.

#services ul {
padding:0;
margin:0;
border:1px solid blue;
}

#services li {
margin:0;
padding:0;
border:1px solid red;
/* outside required if you have multi-line list items*/
list-style: square outside;
/*Should be consistent cross-browser, adjust left margin as required for the design - replace the px with the ems if you still have them*/
margin:15px 15px -13px;
}

<div id="services">
<ul>
<li>List item<br>That wraps</li>
<li>List item<br>That wraps</li>
</ul>
</div>

Does that get you any closer?

[edit reason] Removing random smilies from code

[edited by: alt131 at 1:41 pm (utc) on Jul 16, 2011]

[danepak]

alt131,

You have just given me the best start to a weekend for a very very long time.
Your code is fantastic.
I've adjusted it slightly and it's 100% perfect!
Finally!

Thank you, thank you, thank you!
And that's to all of you, who's been posting in this thread.
This is the first time I've visited this forum.
Definitely not the last time.
Friendly and helpful people in here.

It's very very much on my to do list to learn programming and I'll bookmark this site immediately.

Thanks again!
Time to celebrate with a beer!

[alt131]

Danepak, fantastic it worked, and very kind of you to take the time to say such nice things. Plus for recognising it was a team effort - especial hat tip to Lucy - who posted the solution some time before my explaining post.

... and don't just bookmark - set your sticky preferences to notify you when new posts are made to the forum and join in as much as possible :)

[danepak]

Yes, thanks Lucy :-)

I will try to join is as much as possible, thanks.
But probably not for a while, as I wouldn't know what I was talking about lol.

Ideally one day I would like to be able to understand HTML and PHP.

I've been told that I should start with HTML, CSS and then PHP.
A bit of a mouthful for me, but I'll give it a go.

Have you got a link to a specific website which you would recommend, when it comes to learning HTML for complete beginners?

I know there are a lot of websites out there, but perhaps there's one which stands out?

[alt131]

he he, you and Luce make a great pair - speed-typing + WebmasterWorld on speed-dial. ;)

Please do join in. You'll be surprised how much you already know, and new coders bring a fresh perspective and enthusiasm that allows more experienced coders to see things in new ways. Even if the issue is something you haven't encountered before, just ask. Frequently those questions uncover other issues in the code, and that helps everyone improve their understanding. As I think you understand, we're not a code wall but a community - room for all approaches and levels of experience, and every contribution adds value for us all.

The question what is the Best HTML Course for beginners? [webmasterworld.com] was asked recently in HTML, which may help. Note w3schools is frequently mentioned, but it hasn't been kept up to date. I like the way Opera's Web Standards Curriculum [dev.opera.com] introduces html, css and javascript within the bigger picture of the underlying theories, accessibility and gong forward, HTML5 - not just rote-learning code, but understanding, as well. If you do take a look, I'd be really interested to know whether it was helpful or not.

[lucy24]

Ideally one day I would like to be able to understand HTML and PHP.

I think javascript may be fractionally easier to understand than php-- and can be used at the micro-level when you want to add one teeny little thing that can't be done with styling alone. Ducking to avoid brickbat thrown by alt.

And then! and then! and then! there are the joys of Apache so you can start twiddling with your .htaccess file and learn whole new ways to bring your site crashing to the ground. (Right now I am very thrilled because I managed to make an htaccess error that didn't shut down the site, it just prevented all images from displaying.)

The very nice thing about both html and css is that they're explicitly designed to be tolerant. You would have to make a HUGE mistake to have really visible consequences. Otherwise the browser just ignores that part it doesn't understand and carries on regardless-- this is in The Rules-- and your human users never know anything was amiss.

[danepak]

Thanks alt131 and lucy24.

I've now started reading on dev.opera.com