Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    images with Strict Doctype

    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.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.
    Last edited by drhowarddrfine; 11-02-2009 at 08:47 PM.

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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/200...-reset-styles/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, I just added an inline style on the image with margin:0 and that's not it. The space is still there.

  • #6
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by euschenk View Post
    Maybe its just the way I've done cutup/code in the past...
    Yep. .

  • #9
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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?

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <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/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    For Firefox, Safari and Chrome:
    Code:
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    For IE, wait 10 years.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •