Internet Explorer 6/7 Ignoring Left Padding on One Element?

V

Vik Rubenfeld

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 said:
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!
 
N

Neredbojias

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


</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.
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Thu, 17 Jan 2008 22:52:45 GMT
Vik scribed:
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?
 
G

GTalbot

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
 
V

Vik Rubenfeld

GTalbot said:
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!
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Fri, 18 Jan 2008 00:25:40 GMT
Vik Rubenfeld scribed:
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?
 
E

Ed

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
 
V

Vik Rubenfeld


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.[/QUOTE]

Researching the peek-a-boo bug led me to this page -
http://www.thescripts.com/forum/thread468484.html. Based on the
experience of the poster there, I added:

html {
margin: 0px;
padding: 0px;
}

body {
margin: 0px;
padding: 0px;
background: #FFFFFF ;
}

....and it fixed it!

Adding that code to my main CSS file hasn't yet fixed my production
page, so I need to validate all the CSS and html there now - I may have
some more questions when doing that. But this appears to be the fix.

Thanks very much to all here for your help!
 
V

Vik Rubenfeld

Okay, this seems very odd.

I've been working on tracking down what was still wrong with the CSS on
my production page, and what I've found seems unusual. I've replicated
it on two small test pages.

http://www.flavorzoom.com/anomaly.html is fine and looks as expected.

http://www.flavorzoom.com/anomaly_b.html has the image for the left-most
link ("Home") missing (in IE6).

The only difference between the two files, is a font-family
specification for the html:

font-family: Arial, Helvetica, sans-serif;

What could explain this?
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Fri, 18 Jan 2008 17:48:53 GMT
Vik Rubenfeld scribed:
Okay, this seems very odd.

I've been working on tracking down what was still wrong with the CSS on
my production page, and what I've found seems unusual. I've replicated
it on two small test pages.

http://www.flavorzoom.com/anomaly.html is fine and looks as expected.

http://www.flavorzoom.com/anomaly_b.html has the image for the left-most
link ("Home") missing (in IE6).

The only difference between the two files, is a font-family
specification for the html:

font-family: Arial, Helvetica, sans-serif;

What could explain this?

Try moving that to body: (only). Maybe IE balks at html: styles.
 
V

Vik Rubenfeld

Solved! It was a hasLayout issue. I added:

display:inline-block;

....in .selected and in #fz_menuin a, and it fixed it.
 
B

Ben C

Update: it fixed it in IE6 and Mac FireFox, but broke it in Safari 3, as
can be seen in the demo link I posted (which I have now updated) -

http://www.flavorzoom.com/anomaly_b.html

Is there a way to address the hasLayout issue that will also work in
Safari?

Why all those inline-blocks set to width: 1em? That makes them all
scrunched-up in browsers that support inline-block.

I don't know if this is the anomaly you're referring to.
 
V

Vik Rubenfeld

Ben C said:
Why all those inline-blocks set to width: 1em? That makes them all
scrunched-up in browsers that support inline-block.

I don't know if this is the anomaly you're referring to.

That fixed it. Thanks very much!
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Fri, 18 Jan 2008 19:58:25 GMT
Vik Rubenfeld scribed:
I moved it to body, but the result is the same. (????)

Well, I'm nonplussed. The only thing I can think of to do is to capture
your source and test it on my box, which I shall do a bit later if rf or
somebody intelligent doesn't solve it first. Benvenuto.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,906
Latest member
SkinfixSkintag

Latest Threads

Top