18 replies [Last post]
eddy
eddy's picture
Offline
Enthusiast
Last seen: 9 years 28 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

test layout

*{
margin:0;
padding:0;
}

#box{
width:300px;
border:2px solid #000;
background-color:#aaa;
}

I cannot upload the code, so bare with me. Any image can be used.
The problem is that there's is a gap between the image bottom and the bottom of the box.

Why is that??

Anyone who hates kids can't be all bad.
W.C. Fields

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 3 years 4 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Have you ensured that both

Have you ensured that both the containing box AND the image have no margin and padding set for the particular side you want the image stuck against?

#box img { margin-bottom: 0; padding-bottom: 0; }

?? That's just off the top of my head of course given the small amount of code availabe Smile

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

eddy
eddy's picture
Offline
Enthusiast
Last seen: 9 years 28 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

yes i did...

yes i did...

Anyone who hates kids can't be all bad.
W.C. Fields

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Images are inline elements.

Images are inline elements. By default they line up with the text baseline - or where the text baseline would be if there was text. Think, gpqy!

eddy
eddy's picture
Offline
Enthusiast
Last seen: 9 years 28 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

What does "think, gpqy!"

What does
"think, gpqy!" mean?

And, so there's no way to let the gap dissapear??

Anyone who hates kids can't be all bad.
W.C. Fields

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'll let you work out what

I'll let you work out what is special about gpqy - especially in the light of what I said above.

Inline elements are lined up according to the vertical-align property. You can also change the image so its not an inline element.

eddy
eddy's picture
Offline
Enthusiast
Last seen: 9 years 28 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

Ok, adding img{ 

Ok, adding

img{ display:block; }

works.
So problem solved.

But I still don't know what gpqy means...

Anyone who hates kids can't be all bad.
W.C. Fields

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

what if I added 'j' to the

what if I added 'j' to the mix?

eddy
eddy's picture
Offline
Enthusiast
Last seen: 9 years 28 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

Nope. Ever watched Beavis &

Nope.

Ever watched Beavis & Butthead?

When they have to think, Butthead gets a lightbulb, no idea, and Beavis doesnt even get a lightbulb.

Thats how I feel with this one.

Does English have to be your mothertongue? Because it isn't mine or doesn't it matter.

Anyone who hates kids can't be all bad.
W.C. Fields

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 3 years 4 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

I must confess, it's

I must confess, it's confusing me too! And if you add J to the mix, then it's only 4 letters short of being a decent round in Countdown. Your going to have to put us out of our respective miseries Wink

Have YOU said Hello yet?
The CSSCreator Hello Thread

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Chris..S wrote:Images are

Chris..S wrote:
Images are inline elements. By default they line up with the text baseline - or where the text baseline would be if there was text. Think, gpqy!
There's your answer. Images by default align with the text baseline. Certain characters in a font extend below the baseline - gjpqy. That space being reserved is what you're experiencing. You could either make the image not inline (as you've already done) - or, set the image to vertical-align: bottom instead of it's default baseline.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 3 years 4 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

OHHHHH!! The stupid thing

OHHHHH!! The stupid thing is yesterday I spent ages trying to figure it out and succeeded, then it clocked and I realised in my head what you were trying to say. Sure enough, come in to work this morning, pick up that message and have no clue what it means. Just goes to show what one glass to many of wine can do to your brain cells!

Have YOU said Hello yet?
The CSSCreator Hello Thread

eddy
eddy's picture
Offline
Enthusiast
Last seen: 9 years 28 weeks ago
Timezone: GMT+2
Joined: 2006-01-27
Posts: 59
Points: 0

I just filed for the

I just filed for the official retard exam

Anyone who hates kids can't be all bad.
W.C. Fields

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Are they called

Are they called "descenders", or did I make that up?

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I call them descenders. If

I call them descenders. If we get a third, we can probably get the meaning into the OED Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Speaking of which,

Speaking of which, Balderdash & Piffle is on tonight at 10 Wink

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

funniest thread I've read

Laughing out loud funniest thread I've read in ages.

So are we all clear on this then? think, if there wasn't a baseline (it exists in general not just in web ) and a space reserved for the dangley bits then text would sit at irregular levels and that would be really really difficult to read.

I can't third the 'descenders' I call them dangley bits, oh er hang on no that's something else yeah lets go with descenders.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I looked it up on Wikipedia,

I looked it up on Wikipedia, that is what they're called - along with ascenders, x-height, leading, kerning, tracking, all that jazz Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

ah the language of the

ah the language of the typographers arcane art.

I used to pass by a little church tucked away in an alley behind Fleet ST in the City of London, just so happened this tiny little church was where the first printing press was employed, just thought I'd throw that in for no particular reason Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me