/    Sign up×
Community /Pin to ProfileBookmark

ul list fine in IE but not in Firefox…help!

Copy linkTweet thisAlerts:
Aug 22.2008

I’ve been developing a site for a friend but im having trouble with the gaps between navigation buttons. The menu bar displays fine in IE but in firefox the links are un-evenly spaced and look awfull.

I have tried adjusting the padding in #menu_bar li to display correct in Firefox but then it messes up in IE.grrr….:mad:

Any help would be greatly appreciated.

Thanks

Heres [URL=”http://www.cnsdemo.co.uk/build/”]the link[/URL]

here’s the CSS

[CODE]#menu_bar ul {
font-size: 13px;
list-style-type: none;
height: 13px;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-weight: bold;
margin: 0px;
}
#menu_bar li {
display: ;
padding-top: 7px;
text-align: center;
padding-right: 45px;
padding-bottom: 4px;
padding-left: 0px;
margin: 0px;
}[/CODE]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelAug 22.2008 — <li><a href="#" id="[B]find us[/B]">Find Us</a></li>

<li><a href="#" id="[B]contact us[/B]">Contact Us</a>[/QUOTE]

This is being read as [B]id="us"[/B] due to white-space in id name.

You can safely remove the #menu_bar li 's [B]display: ;[/B] as "[B]display;block;[/B]" is the default for this, and the list is 'block' (think "block=vertical" and "inline=horizontal/[I]in-a-straight-line[/I]"
Copy linkTweet thisAlerts:
@rodd1000authorAug 22.2008 — Thanks for that, but it still doesn't rectify the problem i am getting.

Cheers
Copy linkTweet thisAlerts:
@CentauriAug 22.2008 — I was trying to work out what was happening here, then realised the blue bars are actually part of a large background graphic. Trying to align text to these is an exercise in futility, as text size is completely dependant on the browser, fonts installed on the user's computer, and the user preference for font size. The blue bars should be the background colour of the <a> links (set to block display and sized accordingly), and not graphics at all.
Copy linkTweet thisAlerts:
@WebJoelAug 22.2008 — What browser are you using? In Firefox and upon re-sizing, the blue boxes do to some degree, stay 'behind' the LI's, but if this is the case, a background image for the LI would be a better solution
Copy linkTweet thisAlerts:
@rodd1000authorAug 22.2008 — Thank you both for your explanation. I hadn't thought of doing it that way but it didnt occur to me that id have a problem doing it using a background image.

It does make better sense to set background colour to the <a> links and as you say would make it much less frustrating aligning them.

I'm a designer by trade but i'm loving the challenge of developing. Although i do find it frustrating. I suppose i need to start thinking more of how a developer would do things rather than from a layout perspective.

Thanks again for the insight.
×

Success!

Help @rodd1000 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...