Topic: Padding nuance LI element for Mozilla (Page 1 of 1) Pages that link to <a href="" title="Pages that link to Topic: Padding nuance LI element for Mozilla (Page 1 of 1)" rel="nofollow" >Topic: Padding nuance LI element for Mozilla <span class="small">(Page 1 of 1)</span>\

Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 02-10-2007 18:13 Edit Quote

I'm not sure wha I'm doing wrong, the result looks better in IE than Firefox. I have an LI which is my navigation, which is set to Relative and Left Floating. In IE, the top padding is as expected. In Firefox, there is about 10px above the text. Also, the text seems to have an hanging indent of some sort... and then finally, in IE, the image that I created for the bullet is not showing at all.
Thats all confusing, here is the site to look at.
I'm attempting to replace image generated navigation bar with the CSS text version just above it.

I noticed POI's sample here:

This design looks slightly differnt in FireFox, however I understand it was a quick throw together. My question is, I do not know when to apply style to: the div, the ul, the li, the a-nchor. Poi applies style to the a-anchor tag, which I would not have guessed to do for swapping the background image, actually just adjusting the background image layout so it appears to be swapping the background image.


<edit>Changed location of my example page, embed the problem css</edit>

(Edited by Karl on 02-10-2007 20:42)

Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 02-11-2007 18:46 Edit Quote

I only did had a cursory look, but it's quite possible all your problems stem from list-style: disc url(/images/button_spacer.gif) inside;. list-style (mainly the more specific variants) is really crap across different browsers. If you want an image on the left, use a background image.

Nervous Wreck (II) Inmate

From: The Leather Wheeliechair
Insane since: Dec 2004

IP logged posted posted 02-13-2007 03:13 Edit Quote

The whole site looks all over the place to me in Firefox 2.0. You're going to want to check your HTML, because that can have a big impact on how CSS ends up rendered. A cursory look reveals a couple of typos in attributes, and some mis-nested links (though hopefully that shouldn't be problematic.) Also, don't forget to enclose your lists in <ul></ul> for unordered lists and <ol></ol> for ordered lists. These have their own margins/padding, in addition to that of the individual <li>s

(Edited by horsedreamer on 02-13-2007 03:14)

Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 02-19-2007 14:25 Edit Quote

Yes, agreed the sight is all over the place. This is improving though and where I can I am replacing the bad code with good code, so more CSS less tables.

So maybe, eventualy, the scrollbar issue will dissapear?? It seems pretty quirky to me, just wondering if anyone was able to reproduce this issue?


Post Reply
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
Your Text:
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu