13 replies [Last post]
hoicem
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

I'm trying to bring myself into the 21st century by replacing tables with CSS, it's not going well so far. A layout that would take me 2 minutes using tables takes me 2 weeks in CSS. Anway, that's not the point. I've having a problem with a 3px margin that appears below in an image in a div in all browsers except IE. I see it in Safari, Opera and Firefox and I just cannot work out why. Very simple peice of code:

#mydiv { background-color: red; }

Pretty simply? the problem is I can see 3px of red below the image, IE renders it perfectly, the image is the exact height of the div yet in every other browser the div is 3px taller.

adding a margin-bottom: 0px to the image doesn't fix it either. Any ideas?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Without seeing your entire

Without seeing your entire HTML and CSS, it's quite hard to help you Wink

Verschwindende wrote:
  • CSS doesn't make pies

hoicem
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

That is my entire HTML, if

That is my entire HTML, if you paste it into a file you'll see the problem.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

hoicem wrote:That is my

hoicem wrote:
That is my entire HTML, if you paste it into a file you'll see the problem.

you mean you don't have a doctype, head and body sections, etc?

Verschwindende wrote:
  • CSS doesn't make pies

hoicem
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

thepineapplehead

thepineapplehead wrote:
hoicem wrote:
That is my entire HTML, if you paste it into a file you'll see the problem.

you mean you don't have a doctype, head and body sections, etc?

ofcourse, you can repeat the problem with the code I gave. Here you go:

untitled


#mydiv {
background-color: red;
}




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

You can do one of three

You can do one of three things. You could specifically set the height of the div to 180px, OR set the image to vertical-align: bottom; OR set the image to display: block;.
The reason this is happening is that the image is an inline element and space is reserved for the descenders of a font below the image. With no height on the containing div, it just expands to encompass this space.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

hoicem

hoicem wrote:
thepineapplehead wrote:
hoicem wrote:
That is my entire HTML, if you paste it into a file you'll see the problem.

you mean you don't have a doctype, head and body sections, etc?

ofcourse

you see, this is why we specifically ask for all the code in the first post. It saves us having to constantly ask for it.

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

@ hoicem: Please don't take

@ hoicem:

Please don't take offense. Probably the single greatest source of problems is the lack of a complete and proper DTD. That's followed closely by html syntax errors.

As you are new to the forum, we can't know how aware you are of their importance, nor can we know your comfort level with the use of well structured, semantic html. As a result, we generally ask to see a complete document, even if it's a minimal test case[1] such as you brought us.

As Gran'ma used to say, the devil is in the detail.

Once we have more confidence in your abilities, a snippet, accompanied by a statement such "in standards mode, IE/Fx/Opera/et al, blah, blah, blah" or "this seems to work in IE only in quirks mode …" may be sufficient.

Bear with us if we sometimes sound churlish on this issue. There is good reason for it.

cheers,

gary

[1] We really like to see minimal test cases. It shows the poster has done some work on his own to isolate the problem, plus it strips away all the extraneous markup and styles we would otherwise have to wade/dig through.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

@ Wolfie Quote:You could

@ Wolfie

Quote:
You could specifically set the height of the div to 180px,

Have you tested this? Would it create an overflow situation for the inline box? Just curious. If you don't get back, I'll probably set up some tests when I get a chance.

You forgot to mention you could float the image, creating an implicit block element.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

hoicem
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

kk5st wrote:@ hoicem:[1] We

kk5st wrote:
@ hoicem:[1] We really like to see minimal test cases. It shows the poster has done some work on his own to isolate the problem, plus it strips away all the extraneous markup and styles we would otherwise have to wade/dig through.

right, that's what I tried to do. I've done a lot of searching the last couple days and when people post their whole page code it's hard to understand, therefore I stripped mine down.

I wasn't aware the doc type mattered to replicate the problem. Thanks for the solutions.

regards

hoicem
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

wolfcry911 wrote:You can do

wolfcry911 wrote:
You can do one of three things. You could specifically set the height of the div to 180px, OR set the image to vertical-align: bottom; OR set the image to display: block;.
The reason this is happening is that the image is an inline element and space is reserved for the descenders of a font below the image. With no height on the containing div, it just expands to encompass this space.

the 'descenders of a font'. Could you explain what this means please?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Descenders are the bits of

Descenders are the bits of fonts that extend below the baseline - for example, letters g, p, q, y.

Verschwindende wrote:
  • CSS doesn't make pies

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

kk5st wrote:@

kk5st wrote:
@ Wolfie
Quote:
You could specifically set the height of the div to 180px,

Have you tested this? Would it create an overflow situation for the inline box? Just curious. If you don't get back, I'll probably set up some tests when I get a chance.

You forgot to mention you could float the image, creating an implicit block element.

cheers,

gary
I was curious about that and did indeed test (in Firefox only). I was wondering if the space would still be reserved and the top be cut off or pushed out, in overflow, but that didn't happen. You're absolutely right (as usual), I forgot to mention the float!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Image alignment tests

You missed a couple of things, Wolf. The overflow occurs at the bottom, and IE enlarges any container with hasLayout to include its content.

My test suite shows that fixing the image container's height is not a robust solution. My test image is a 50

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.