...

View Full Version : images with Strict Doctype



euschenk
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.

drhowarddrfine
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.

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

http://clients.mindfulinteractive.com/test/sample.html

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

thanks!

Excavator
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/

euschenk
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.

drhowarddrfine
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.

euschenk
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).

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

euschenk
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-->
...
</div>
<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?

abduraooft
11-03-2009, 04:27 PM
<img /> <!--top of rounded box-->
<div> <!--for repeatable middle-->
...
</div>
<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/

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


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


For IE, wait 10 years.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum