/    Sign up×
Community /Pin to ProfileBookmark

CSS ul menu looks awful in IE5 & 6

Copy linkTweet thisAlerts:
Feb 22.2008

Hi

I’m having problems with a CSS <ul> menu displaying incorrectly in Internet Explorer (version 5 for Mac and 6 for PC in particular)..

The page is at [url]www.athenecreations.co.uk/sharpsafe/index.php[/url] – the menu across the top of the page (and the smaller menu right at the bottom) should be aligned side by side – but in IE5 on the Mac and in IE6 on PC this is displaying each link one beneath the other..

I’m using a clever script I found called ‘csshover.htc’ – I hope if you’re reading this, that you’re familiar with this (if not, have a look here [url]http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp[/url])

Can anybody help me with getting Internet Exlporer to display this correctly (as in the other major browsers, Firefox, Safari, Opera).

Yours hopefully…!
LouPhi

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@TJ111Feb 22.2008 — Try changing the following to your CSS:
<i>
</i>#menu1 li {
[COLOR="Red"]position:relative;[/COLOR] /* Remove this*/
[COLOR="Navy"]float:left;[/COLOR] /*add this*/
}

That didn't alter the layout at all in firefox, and should cause the menu to display horizontally in IE.
Copy linkTweet thisAlerts:
@LouPhiauthorFeb 23.2008 — Thanks for the advice, it appears to have worked for the top menu, but the one at the bottom still lines up one beneath the other. Maybe there is something else in the code for that particular menu which isn't right - heres the CSS from the stylesheet (below) - if you can figure out the problem, theres a Gold star and a great big thankyou from me in it for you?!!

LouPhi ?


[CODE]
#menu {
float: left;
}
#menu ul {
list-style: none;
margin: 0;
float: left;
padding-right: 10px;
padding-left: 10px;
}
#menu a, #menu h2 {
display: block;
margin: 0;
font-family: arial, helvetica, sans-serif;
font-size: x-small;
color: #FFFFFF;
padding-right: 1px;
padding-left: 1px;
}
#menu h2 {
color: #FFFFFF !important ;
text-align: center;
background-position: center;
font-weight: normal;
}
#menu a {
color: #FFFFFF !important ;
text-decoration: none;
}
#menu a:focus, #menu a:hover {
color: #00CC33 !important ;
}
#menu li {float: left; }

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
#menu ul ul {
position: absolute;
z-index: 500;
}
div#menu ul ul {
display: none;
}
div#menu ul li:focus, div#menu ul li:hover ul
{display: block;}
div#menu ul ul,
div#menu ul li:focus, div#menu ul li:hover ul ul,
div#menu ul ul li:focus, div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:focus, div#menu ul li:hover ul,
div#menu ul ul li:focus, div#menu ul ul li:hover ul,
div#menu ul ul ul li:focus, div#menu ul ul ul li:hover ul
{display: block;}

[/CODE]
×

Success!

Help @LouPhi 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.28,
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,
)...