|
Posted by Vik Rubenfeld on 10/24/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!
[Back to original message]
|