/    Sign up×
Community /Pin to ProfileBookmark

<ul> alignment/inheritance

Copy linkTweet thisAlerts:
Feb 12.2007

[url=”http://apps.cpe.ky.gov/temp_docs/prototypes/kyvc/new.htm”]Test Page[/url]

In Fx, the drop-down <ul> from the parent <li> is aligned correctly. In IE, the drop-down <ul> from the parent <li> is floated to the right. I’m sure this is some weird inheritance thing, but I can’t figure out what it is…. could someone please give this a look? (CSS is in the <head> section)

References:
Top level <ul> – [url]http://www.cssplay.co.uk/menus/centered.html[/url]
Drop-down <ul> – [url]http://www.htmldog.com/articles/suckerfish/dropdowns/[/url]

Thanks,
KDLA

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAauthorFeb 13.2007 — Anyone? ?
Copy linkTweet thisAlerts:
@ray326Feb 13.2007 — Well I can tell you something is going on that Tidy doesn't care for. Maybe it's the XML empty tags in the HTML.
Copy linkTweet thisAlerts:
@KDLAauthorFeb 13.2007 — which ones?
Copy linkTweet thisAlerts:
@CentauriFeb 13.2007 — As the table and table-cell display properties aren't supported by IE, I avoid using these styles due to IE hacks HAVING to be used then.

In your case, when the table display properties are removed, the #menu li elements floated left (NOT the <a> elements as well), and a width assigned to #menu (and the white space wrap removed), the whole menu centres and has no gaps in IE. Removing the IE hacks then fixes the drop-down alignment.

css I came up with [CODE]del.nav-container {clear: both; text-decoration: none;}
[COLOR="YellowGreen"][I]** remove IE hack **[/I][/COLOR]
#nav {margin: 0; padding: 0; display: block; text-align: center;}
#nav #menu {margin: 0 auto; padding: 0; [COLOR="Red"]width: 580px[/COLOR];}
#nav #menu li {list-style-type: none; margin: 0; font-size: 0.8em; font-family: verdana, arial, san-serif;
line-height: 1.5em; text-align: center; letter-spacing: 0.02em; [COLOR="Red"]float: left[/COLOR];}
#nav #menu li a {display: block; width: 145px; padding: 6px 0; color: #444; background-color: #000;
font-weight: bold; text-decoration: none;}
[COLOR="YellowGreen"][I]** remove IE hacks **[/I][/COLOR]
#nav #menu li ul.sub {margin: 0 10px; padding: 0; display: block; position: absolute; width: 125px; left: -999em; background: #eee; text-align: left;} [/CODE]

Cheers

Graeme
Copy linkTweet thisAlerts:
@ray326Feb 14.2007 — Just for completeness since Graeme's already filled in the good stuff.
which ones?[/QUOTE]All the inputs plus

line 143 column 1 - Warning: <img> attribute "/" lacks value

line 146 column 1 - Warning: <img> attribute "/" lacks value
Copy linkTweet thisAlerts:
@CentauriFeb 14.2007 — And I forgot to mention that the doctype is incomplete, and that makes a difference too - I would suggest 4.01 strict as well.

Cheers

Graeme
×

Success!

Help @KDLA 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.18,
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,
)...