/    Sign up×
Community /Pin to ProfileBookmark

{display: inline;} PROBLEM!!

Copy linkTweet thisAlerts:
Apr 25.2006

I have a major problem. I have a top nav bar in the form of a list. In list style it is fine, but when I apply display: inline I have a constant 3px gap between the ‘ul li a’ and the ‘ul li’

Heres the code I’m using:

[QUOTE]

#mainMenu
{
text-align: center;
height: 27px;
margin: 0 0 0 162px;
width: 597px;
border:0;
}
#mainMenu ul
{
margin: 0 !important;
padding: 8px 0 6px 0;
}
#mainMenu li
{
text-align: right;
border: 1px solid #F00;
display: inline;
}
#mainMenu ul li
{
padding: 7px 0px 5px 0px;
margin: 0 !important;
width: auto;
}
#mainMenu ul a
{

}
#mainMenuContainer li
{
}

[/QUOTE]

It happens in all browsers so its not 3 pixel jog generated by the floating logo to the left of the menu.

Any help would be greatly appreciated.

Will

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@kent_willauthorApr 25.2006 — No worries cured it by floating the anchor inside the li
Copy linkTweet thisAlerts:
@KDLAApr 25.2006 — Shouldn't your list coding be more compact?

<i>
</i>#mainMenu{
text-align: center;
height: 27px;
margin: 0 0 0 162px;
width: 597px;
}
#mainMenu ul {
margin: 0;
padding: 8px 0 6px 0;
}
#mainMenu ul li {
text-align: right;
border: 1px solid #F00;
display: inline;
padding: 7px 0px 5px 0px;;
margin: 0;
}
#mainMenu ul li a{
padding: 0;
margin: 0;
}


KDLA
Copy linkTweet thisAlerts:
@kent_willauthorApr 25.2006 — the copy and paste didnt include the indentations whichis just the way i like it and am used to it. Anyway stop nit picking
Copy linkTweet thisAlerts:
@KDLAApr 25.2006 — Review the code I submitted: it is different (in content) than that you posted. You had several repetitions. I eliminated these, and added/altered some of your settings.

KDLA
Copy linkTweet thisAlerts:
@pcthugApr 26.2006 — I too reccomend reviewing KDLA's code, though on one line of her code (padding: 7px 0px 5px 0px;? she has a few mistakes.padding: 7px 0 5px 0;No unit of measure is required for measurments of '0'

Only one semi-colon is required

And if you wanted to be seriously fastidious, if your going to be using shorthand, use it properly (no need for the last 0. The right or 1st 0 is automatically carried over to the left if no measurment is present).
Copy linkTweet thisAlerts:
@KDLAApr 26.2006 — Oops - sorry about those double semi-colon and the extra px! Ah, the evils of copy/paste then back-stepping to edit! lol

(As to the zero or no zero issue, I always put it because many of the templates I design are used by people who don't understand shorthand.... much less CSS!! ?)
×

Success!

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