/    Sign up×
Community /Pin to ProfileBookmark

margin problem in firefox..

hi,
i got this little margin trouble, well, id admit im a bit lost with all this css…
could you check that page [url]http://torzuchina.com/index.php[/url] with IE and moz, and tell me how i could have the menu aligned exactly the same in the two browsers?

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@toicontienOct 05.2004 — It's an easy fix. Your #nav <ul> tag is floated left. The style rule margin: 20px 9px; places a left margin of 9 pixels. Internet Explorer has a bug that doubles the margin of a floated element, for the margin on the same side as the element is floated. In other words, #nav is floated left, and IE doubles the left margin: [url=http://www.positioniseverything.net/explorer/doubled-margin.html]IE Double Float Margin Bug[/url]

All you've got to do is add this one attribute and value to the style declaration for ul#nav: [b]display: inline;[/b]

This doesn't make your navigation an inline element as floated elements are automatically converted to block elements (even if the HTML tag was originally inline). The following page at the Micrsoft Developers Network Web site gives a little insight as to why Internet Explorer acts so funky: [url=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp]hasLayout Property[/url]. Essentially, if the following CSS attributes are not set: height, width, display, float or position; IE renders block elements as blocks of goo that don't seem to display logically.
×

Success!

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