UL / LI - start at Left hand side 1

[Badgers]

Hi,

With the code below I want the LI image to align to the beginning of the TD. There is an indent, I've tried setting margin / padding to 0 on UL but then the images disappears.

Thanks inadvance

Tim.

<table cellpadding="2" cellspacing="2">
<tr>
<td style="font-family:Arial; font-size:14px;">

<ul style="list-style:none;">


<li style="list-style-image: url('../../images/SmallArrow.gif');"><a id="ExecInterviewsRepeater_ctl01_ExecInterviewsHeadlineHyperLink" href="

http://dev.testing.co.uk/testink.aspx"

target="_blank">Digby Jones </a></li>

</ul>
</td>
</tr>
</table>

 

[g0ste]

change

<li style="list-style-image: url('../../images/SmallArrow.gif');">

to

<li style="list-style:none; background-image:url('../../images/SmallArrow.gif'); background-repeat:no-repeat; background-position:left; padding-left:20px">

you will need to mess around with the padding inside the li tag.

also, I would advise using conditional comments to differentiate between the browsers, because trident (IE's css renderer) seems to interpret the margins etc differently to gecko(firefox etc). Such as:

<td style="font-family:Arial; font-size:14px;">

<!--[if IE]>
<ul style="list-style:none; margin-left:5px;">
<p>this is ie</p>
<![endif]-->

<!--[if !IE]><!-->
<ul style="list-style:none; margin-left:-50px;">
<!--<![endif]-->

<li style="list-style:none; ...snip...

________________________________
Top 10 reasons to procrastinate:
1)

 

[g0ste]

oh yeh, you can remove the

<p>this is ie</p>

from the first conditional comment (forgot to remove... oops)

________________________________
Top 10 reasons to procrastinate:
1)

 

[Badgers]

Worked a treat - thanks

 

[Vragabond]

I really would not do all that conditional stuff. While IE and FF use different methods to indent the text in lists (padding vs. margin), you can achieve normal cross-browser results by simply zeroing out all margins and paddings on list containers and list items. It is a more appropriate solution to the one suggested.



[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[g0ste]

if we zero out all margins & padding in the ul & li items, then we have 2 very different results - which is not the desired effect.

conditional comments exist for this type of situation (well, can be used for this - intended to control different stylesheets for "less capable browsers" lol).

conditional comments also validate to w3c standards.

it is not possible to get the desired result without using conditional comments, or a hack. CCs are a lot easier to use :]

________________________________
Top 10 reasons to procrastinate:
1)

 

[BillyRayPreachersSon]

it is not possible to get the desired result without using conditional comments, or a hack.

I disagree. However, there are many unknowns, such as the DOCTYPE in play, and other styling which may be affecting the outcome.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Vragabond]

With paddings and margins set to 0 on both list element (ul, ol) and list item element (li), all versions of IE that understand some standards (IE6 and later) and all standards-compliant browsers render the list the same. Working from the point where all browsers render the same, you can apply any margin/padding on elements and it will again look the same in all browsers. I have done this many times in the past and never required a hack or conditional comment.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[g0ste]

That's interesting. I tested in IE6, Firefox 2 & 3. IE displayed the zeroed out lists differently to the two versions of FF. IE has a larger "value" of 0 than FF.

That said, I didn't include a doctype, it was just the online at W3Schools "Tryit Editor" thingymadoodad.

Go here:

http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style

and copy/paste this:

<html>
<head>
<style type="text/css">
ul{list-style: square inside url('arrow.gif');padding:0px;margin:0px;}
li{padding:0px;margin:0px;}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
This text sits at the very edge of the body.<br />
The list does not - even though it is zeroed out (in IE)
</body>
</html>

test it in firefox, and IE and tell me it does not display differently.

________________________________
Top 10 reasons to procrastinate:
1)

 

[johnwm]

No complete and valid doctype == quirksmode

That means all bets are off regarding layout. This is absolutely basic stuff guys!

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[BillyRayPreachersSon]

No complete and valid doctype == quirksmode

That means all bets are off regarding layout. This is absolutely basic stuff guys!

However, there are many unknowns, such as the DOCTYPE in play

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[g0ste]

indeed.
lesson learned: don't assume the W3C Tryit editor follows it's own guidelines.

________________________________
Top 10 reasons to procrastinate:
1)

 

[g0ste]

and also, even including doctypes in the Tryit editor, it doesn't work.

________________________________
Top 10 reasons to procrastinate:
1)

 

[BillyRayPreachersSon]

You are clearly confusing the W3C with the website w3schools.com. They are very much different entities.



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[g0ste]

I clearly was! I just saw the W3 part, and assumed it was affiliated with W3C.

________________________________
Top 10 reasons to procrastinate:
1)

 

[ChrisHunt]

If you declare [tt]list-style: inside[/tt], IE reserves some space inside the [tt]<li>[/tt] for the bullet to be displayed in, which is why it appears to be indented. It's as if there's an invisible [tt]<span>[/tt] inside the [tt]<li>[/tt] with 20px of padding in it.

This will line everything up, even in quirks mode in IE...

<html>
<head>
<style type="text/css">
ul{list-style: [red]none[/red];padding:0;margin:0;}
li{padding:0;margin:0;}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
This text sits at the very edge of the body.<br />
The list does not - even though it is zeroed out ([red]oh yes it does![/red])
</body>
</html>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd