«

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...._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!

Well bust mah britches and call me cheeky, on Thu, 17 Jan 2008 17:44:07
GMT Vik Rubenfeld scribed:

> 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!

"Home" isn't a link.

--
Neredbojias
Riches are their own reward.

Neredbojias <> wrote:

> "Home" isn't a link.

True, but, on pages of the site where it is a link, the same thing
happens.

What could be causing this?

Well bust mah britches and call me cheeky, on Thu, 17 Jan 2008 22:52:45 GMT
Vik scribed:

> Neredbojias <> wrote:
>
>> "Home" isn't a link.
>
> True, but, on pages of the site where it is a link, the same thing
> happens.
>
> What could be causing this?

Have you an example?

--
Neredbojias
Riches are their own reward.

Neredbojias <> wrote:

> Have you an example?

Surely. You can see it at flavorzoom.com. Thanks very much in advance
for any thoughts!

On 17 jan, 12:44, Vik Rubenfeld <v...@mindspring.com.invalid> wrote:

> I have links on the top of my home page. Each link has a background


> How can I fix this?
>
> Thanks very much in advance to all for any info!

Vik,

Would it be possible for you to
- fix the validation markup errors in your webpage, all of them
- then fix the CSS errors in your CSS code, all of them, in particular
the ones targeting IE as CSS hacks
- then provide the URL of (temporary or current) webpage where the
problem may still be occuring

It is useless to post code if we do not have access to the whole code
loaded on a web-accessible webpage. Sometimes, it could even be
necessary to check the HTTP headers of the server...

Regards, Géard

GTalbot <> wrote:

> Vik,
>
> Would it be possible for you to
> - fix the validation markup errors in your webpage, all of them
> - then fix the CSS errors in your CSS code, all of them, in particular
> the ones targeting IE as CSS hacks
> - then provide the URL of (temporary or current) webpage where the
> problem may still be occuring
>
> It is useless to post code if we do not have access to the whole code
> loaded on a web-accessible webpage. Sometimes, it could even be
> necessary to check the HTTP headers of the server...
>
> Regards, Géard

You are quite right. I have put up a small test file at:

http://flavorzoom.com/anomaly.html

This has just the CSS and the HTML needed to demonstrate the anomaly. I
validated it at http://validator.w3.org/.

As before, the page looks as it is expected to in Mac Firefox and
Safari, but not in IE 6/7.

Thank you very much in advance for any thoughts on what could be causing
this!

"Vik Rubenfeld" <> wrote in message
news:vikr-...
> GTalbot <> wrote:

> http://flavorzoom.com/anomaly.html

Resize the window, at around 1000 pixels wide and larger the problem
disappears. Now, resize the window very slowly around the width where the
problem appears/disappears. At one particular width the entire menu
disappears.

This could be a manifestation of the peek-a-boo bug. Google for it, it's
quite well known.

--
Richard.

Well bust mah britches and call me cheeky, on Fri, 18 Jan 2008 00:25:40 GMT
Vik Rubenfeld scribed:

> Neredbojias <> wrote:
>
>> Have you an example?
>
> Surely. You can see it at flavorzoom.com. Thanks very much in advance
> for any thoughts!

Hmm, works fine for me in SeaMonkey. Oh, right, the prob is in IE. Hmm
again, works in IE 7. (Don't have ie6.) Did you fix it?

--
Neredbojias
Riches are their own reward.

On 18/01/08 06:59, Vik Rubenfeld wrote:
> GTalbot <> wrote:
>
>> Vik,
>>
>> Would it be possible for you to
>> - fix the validation markup errors in your webpage, all of them
>> - then fix the CSS errors in your CSS code, all of them, in particular
>> the ones targeting IE as CSS hacks
>> - then provide the URL of (temporary or current) webpage where the
>> problem may still be occuring
>>
>> It is useless to post code if we do not have access to the whole code
>> loaded on a web-accessible webpage. Sometimes, it could even be
>> necessary to check the HTTP headers of the server...
>>
>> Regards, Géard
>
> You are quite right. I have put up a small test file at:
>
> http://flavorzoom.com/anomaly.html
>
> This has just the CSS and the HTML needed to demonstrate the anomaly. I
> validated it at http://validator.w3.org/.
>
> As before, the page looks as it is expected to in Mac Firefox and
> Safari, but not in IE 6/7.
>
> Thank you very much in advance for any thoughts on what could be causing
> this!

OK, you validated the HTML. But did you validate the CSS? Some errors
show up at:

http://jigsaw.w3.org/css-validator/


Ed