Trouble aligning UL - default margins killing me
Posted: 02 August 2009 08:36 PM   [ Ignore ]
Newbie
Rank
Total Posts:  8
Joined  2009-08-02

I asked this on another forum and have not received a reply. So I found this site and read through some similar threads and tried adding some things but it is still not behaving how I want. I have a page with 2 large image/buttons with text below them (the ul). I want to use text and love the alignment you get with ul’s but the default margin is driving me nuts! I use an image for the link style so maybe there is something with that combo? But it really shouldn’t matter because it’s a white plus sign and is tight on all margins (7px) so the spacing is fine on its right margin plus I try to clear it but the left margin is defaulting @ 12px.
Here’s my CSS:

ul.links {
    margin
0 0;
    list-
style-imageurl(images/plus.gif);

Which is in a div like this:

#index-mid-right {
    
position:absolute;
    
left:469px;
    
top:355px;
    
width:275px;
    
height:267px;

And the HTML:

<div style="margin: 31px 24px"><img name="middleschool_image0" src="images/middleschool_image.jpg" width="268" height="82" border="0" usemap="#middleschool_image">
<
map name="middleschool_image">
</
li>
        <
li><a href="contact.html">EMAIL US</a></li>
        <
li><a href="rate_dances-ms.html">RATE OUR DANCES</a></li>
        <
li><a href="contact.html">GOT QUESTIONS?</a></li>
    </
ul>
</
div

So the way it is , the plus signs don’t line up with the left edge of the border of the image.

Any tips are appreciated!Test Page

Profile
 
 
Posted: 03 August 2009 10:47 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  8
Joined  2009-08-02

With help at another forum, the approach was to leave the UL alone and apply the image to the li. It was also recommended to use padding instead of margins. Hope this helps anyone with a similar problem.

Profile