Posted by Vik Rubenfeld on 12/10/47 12:00

I have links on the top of my home page. Each link has a background
image (a bullet) and the text of the link. The div for the text has a
left padding of 30px to keep it from landing on top of the bullet in the
background image. This is working perfectly on Mac Firefox and Safari,
but is not yet working on IE 6/7. Oddly, the padding is ignored on the
first link, but works properly on the other links.

Here's a link to a .gif showing what it looks like:

http://www.market-research-services.com/For_Distribution/ie_padding_anoma
ly.gif

Here's the HTML:

<div id="fz_menu">
<div id="fz_menuin">
<strong class='selected'>Home</strong><span class='hidden'> |
</span><a href="http://www.example.com/usda_foods/" >Food
List</a><span class='hidden'> |
</span><a href="http://www.example.com/foods_I_add/" >Foods I
Add</a><span class='hidden'> |
</span><a href="http://www.example.com/my_food_plan/" >My Food
Plan</a><span class='hidden'> |
</span><a href="http://www.example.com/food_menu_manager/" >My
Menu Manager</a><span class='hidden'> |
</span><a href="http://www.example.com/my_food_diary/" >My Food
Diary</a><span class='hidden'> |
</span><a href="http://www.example.com/forum/index.php"
>Community</a>

</div>
</div>

And here's the CSS:

/* fz_menu */

#fz_menu {
position:absolute; z-index:100;
top:0; left:16px;
width:60%; height:75px;
margin:0; padding:0 0 0 25px;
font-size: 90%;
font-weight: bold;
background: url('/images/FZ-Logo-4b.gif') top left no-repeat;
}
#fz_menuin {
position:absolute; left:10px; bottom: 0; b\ottom:3px;
width:150%; padding: 0; paddin\g-top: 3px;
text-align:left;
white-space:nowrap;
border-top: 1px solid #6291CA;
}
#fz_menu a, #fz_menu .selected {
_width:1em;
margin: 0 0 0 10px; padding: 0 10px 0 30px; paddin\g: 5px 10px 5px
30px;
color:#ff8000;
background: url('/images/sqr-blue.gif') 10px 50% no-repeat;
white-space:nowrap;
}
#fz_menu .selected {
color: #6291CA;
}
#fz_menu a:hover {
color:white;
background: #6291CA url('/images/sqr-orange.gif') 10px 50% no-repeat;
}

..hidden { display:none }

How can I fix this?

Thanks very much in advance to all for any info!

• Next in forum: Problem to call an mp3 file from a swf file
• Prev in forum: Re: printing web page containing uncommon font
• Thread view: Internet Explorer 6/7 Ignoring Left Padding on One Element?

[Reply to this message]