/    Sign up×
Community /Pin to ProfileBookmark

white space under images

Copy linkTweet thisAlerts:
Apr 18.2008

I have an unordered list holding 3 images floated left so they are in a horizontal row. There is a weird strip of white under each image that i’m not really sure about. Here is the css:

[code=html]#imgspan ul {
list-style-type:none;
}
#imgspan li {
float:left;
margin-left: 10px;
}
#imgspan li.left {
margin-left: 8px;
}
#imgspan li a {
padding: 2px;
display: block;
border: 5px solid #006699;
}
#imgspan li a:hover {
border-color: #669966;
}[/code]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@nnhubbardApr 18.2008 — Does this only happen in IE6? This might be the IE white space bug.
Copy linkTweet thisAlerts:
@yodasw16authorApr 18.2008 — oops...forgot to mention that part. It is only right in IE 7. I checked FF and safari for windows and mac and it has the white space in each case. I don't actually have a computer in my house with ie6. 7 computers and everyone seems to have upgraded.
Copy linkTweet thisAlerts:
@nnhubbardApr 18.2008 — Do you have a live page you can post?

Try adding:

[CODE]ul li {margin: 0; padding:0;}[/CODE]

If that fixes it, you know that is it a margin or padding problem. I am thinking there is default padding on the li elements.
Copy linkTweet thisAlerts:
@WebJoelApr 18.2008 — li img {display:block;}

I think...

You want the li to 'shrink wrap' the img, and "display:block" on the "img" should do that...

if not, Google "whitespace in lists"
Copy linkTweet thisAlerts:
@yodasw16authorApr 21.2008 — Thanks Joel, that worked. I had display:block on the link, but not the img...so all is good now.
×

Success!

Help @yodasw16 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...