View Full Version : images with Strict Doctype

11-02-2009, 05:38 PM
I've seen some thoughts on how to get around this, although none work for me. I've got a really large site that was done with a STRICT doctype. The images have padding above them which causes problems sometimes. The site is 90% done and I can't do a blanket display:block on all images nor does it seem likely that we're going to do that for each individual image that's a big problem.

It seems somewhat unbelievable to me that so many people say we should be using Strict and yet this "feature" would seem to be a big problem. Am I missing something here? I'm a little lost with how to deal with this problem on this site (right now may try and revert to Transitional and hope that not too much else is broken)

Any help would be great.

11-02-2009, 07:44 PM
This leads me to believe you were not using a doctype at all or an incorrect one which has put you into quirks mode. All new web pages should always have a strict doctype.

Without a link, or the complete markup, it's impossible to help and anything else is strictly a guess. The doctype does not cause problems but solves them by keeping you out of quirks mode where you never want to be.

11-02-2009, 09:17 PM
Sorry, here's an example of the problem.


You can see, there's a gap inbetween the blue div and the image below.


11-02-2009, 09:25 PM
Hello euschenk,
drhowarddrfine is right, a strict DocType is what's called for here.
I think your looking at the browsers default margin on the img.
A reset should get rid of that gap - http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

11-02-2009, 09:31 PM
No, I just added an inline style on the image with margin:0 and that's not it. The space is still there.

11-02-2009, 10:15 PM
The space is there because images are aligned with the baseline of the text. If you add 'vertical-align:top' you'll see it move up. You can also add margin or padding on the bottom to move it up.

11-02-2009, 10:24 PM
Maybe its just the way I've done cutup/code in the past, but it seems like there would be plenty of times where you didn't want to have to do this to your images (like whenever you put a capping image on top of or below something and you want it to sit flush with the middle stuff).

11-03-2009, 03:41 AM
Maybe its just the way I've done cutup/code in the past...
Yep. .

11-03-2009, 04:17 PM
ok. So, if you've got one more sec for a little learning here....

If I have a box on my page with rounded corners, normally I would cut the top and bottom and make a repeatable middle. Then i'd build something like:

<img /> <!--top of rounded box-->
<div> <!--for repeatable middle-->
<img /> <!--bottom of rounded box-->

But this requires you to either add padding/margin to each image or user vertical align, both of which seem hacky to me.

What's the better way to do this simple example?

11-03-2009, 04:27 PM
<img /> <!--top of rounded box-->
<div> <!--for repeatable middle-->
<img /> <!--bottom of rounded box--> An image used for styling a document should be applied as a background image, where as if that image contributes something to the document structure, like photo,logo,title-image etc, then it should be presented using <img> tag.

With that said, take a look at http://www.roundedcornr.com/

11-03-2009, 06:28 PM
For Firefox, Safari and Chrome:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;

For IE, wait 10 years.