/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Cross-browser navigation issues

Hello. I’m trying to create a fairly complex (for me) navbar, and I’m having trouble getting it to render correctly in multiple browsers.

[URL=”http://www.randyjharvey.com/test.html”]http://www.randyjharvey.com/test.html[/URL]

It looks right in Firefox 3, is missing 1px of padding in Safari, and is completely wrong in IE6. I’m shifting pixels back and forth to try and make it work, but I feel like I’m just hacking around blindly. Can anybody help me out?

here’s the CSS

[CODE]*{
margin:0;
padding:0;
}

#menu_services {
width:273px;
}

#menu_services li {
list-style-type:none;
padding-top:0px;
border-top:0px solid #bfbda8;
}

#menu_services span {
color:#44291f;
font-size: 18px;
font-family:georgia, times new roman, times, serif;
display:block;
}

#menu_services li a {

display:block;
text-decoration:none;
color:#595959;
padding:21px 7px 20px 75px;
font-size: 12px;
font-family: ‘trebuchet ms’, Verdana,Arial,Helvetica,sans-serif;
}

#menu_services li a:hover {
background:#bfbda8;
}

li#buy {
margin: 0px;
background: none;

}

li#buy a {
padding:21px 7px 19px 75px;
background: #d1d2ba url(img/nav-buy.jpg) no-repeat top left;
background-position:0 0;
}

li#buy a:hover {
background: #bfbda8 url(img/nav-buy.jpg) no-repeat top left;
background-position:0 -90px;
}

li#book {
margin: 0px;
background: none;

}

li#book a {
padding:21px 7px 19px 75px;
background: #d1d2ba url(img/nav-book.jpg) no-repeat top left;
background-position:0 0;
}

li#book a:hover {
background: #bfbda8 url(img/nav-book.jpg) no-repeat top left;
background-position:0 -90px;
}

li#hire {
margin: 0px;
background: none;

}

li#hire a {
padding:21px 7px 18px 75px;
background: #d1d2ba url(img/nav-hire.jpg) no-repeat top left;
background-position:0 0px;
}

li#hire a:hover {
background: #bfbda8 url(img/nav-hire.jpg) no-repeat top left;
background-position:0 -90px;
} [/CODE]

and the HTML

[code=html]<ul id = “menu_services”>
<li id=”buy”><a href = “http://intereactive.net/”><span>Buy Products</span>DVDs, Books, &amp; CDs to help you improve your presentation skills
</a></li><li id=”book”><a href = “http://intereactive.net/portfolio”>
<span>Book Randy</span> &amp; keynotes to energize you and your audience.
</a></li><li id=”hire”><a href = “http://intereactive.net/whoweare”>
<span>Hire Randy</span>Improve your public speaking skills 100% or more by next year.
</a></li>
</ul>[/code]

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@konithomimoAug 28.2008 — What is wrong with it in IE6? I looked at it in IE6 and FF3 and the pages look the same.
Copy linkTweet thisAlerts:
@JPDauthorAug 28.2008 — I've attached screenshots from Safari and FF3 - Mac. It looks right in Firefox, with 1px of padding at the bottom where the darker background shows through. In IE6, there's 5 or 6px of padding at the bottom separating the links.

[upl-file uuid=dff757ce-fbb8-479f-a6c1-2d9f75b50599 size=41kB]Picture-FF.png[/upl-file]

[upl-file uuid=d78bdfcd-4e63-4c25-b3ab-705d21dd9b31 size=38kB]Picture-safari.png[/upl-file]
Copy linkTweet thisAlerts:
@toicontienAug 28.2008 — Safari is missing the border separating each item too. As for Internet Explorer having gaps under the list items? This forum post should illuminate why. Basically, it's an HTML source code white space bug. The actual white space characters between the <ul>, <li>, </li> and </ul> tags are causing the gaps.

The style declaration below:
#menu_services li {
list-style-type:none;
padding-top:0px;
border-top:[B]0px[/B] solid #bfbda8;
}

The top border width is 0 pixels, so it appears that Safari is showing it correctly.
Copy linkTweet thisAlerts:
@CentauriAug 28.2008 — This has nothing to do with whitespace at all. The background image of the <a>s is 90px high on each state, but you have not specified a height of 90px for the <a>s, instead specifying padding. This means the height of the <a>s will be dependant on how the browsers renders the text, and the darker "border" is the top of the next "state" of the background image. Try resizing the text in Firefox and it becomes obvious. You have to lock the height of the <a>s to 90px.
Copy linkTweet thisAlerts:
@JPDauthorSep 02.2008 — Thanks guys.

I'd thought I'd already tended to the whitespace bug, so I didn't think that could be it. Centauri, you had the fix. Thank you. Everything is working smashingly now, EXCEPT... now in IE6 there are a couple of pixels of whitespace below each <li>. Tried the whitespace fix on [I]this[/I], but no luck.

any ideas?

Thanks again.
Copy linkTweet thisAlerts:
@JPDauthorSep 02.2008 — never mind.

I'd added a 2px margin-bottom to the <span> classes. Just needed to cut the pixels out of the #menu_services li a height.

Thanks for your help. I appreciate it.
×

Success!

Help @JPD 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.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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