Grow your CSS skills. Land your dream job.

Unable to remove space

  • # September 2, 2009 at 4:47 am
    Code:
    Every Omron thermometer features the latest technology for fast and accurate results. With readings in both Fahrenheit and Celsius, Omron thermometers offer flexibility, ease of use and proven accuracy.
    shop for omron thermometers

    src="http://a1624.g.akamai.net/f/1624/580/1d/pics.Drugstore.com/catimg/153872/omron_brand_store_E.jpg" width="598" border="0"/>

    After the text "Every Omron thermometer features the latest technology for fast and accurate results. With readings in both Fahrenheit and Celsius, Omron thermometers offer flexibility, ease of use and proven accuracy" there is vertical spaces created between the images. If I remove the text the images are displayed correctly (attached to each other) but when the text is inserted it creates spaces.
    Tried with the img{display:block;}but in vain. It is rendered properly in the FF and it renders prorperly in IE if the DocType is removed. I need to make some changes in the css or html to make this work. Your help is much appreciated.

    # September 2, 2009 at 5:06 am

    welcome….

    I can’t see the space your talking about…… seriously I can’t.

    so if I can’t so can’t others, and if we all can’t see what is happening we can’t help….. Sorry but it is just how it works.

    but we could help if you would have read this little bit of info just before posting, you would get help.
    viewtopic.php?f=10&t=2229

    especially read point 1: I repeat – POINT ONE

    once you have read this and understood why, in my opinion, not many people will give you any help/answer to your problem, then you may want to review your question and post what was in Point One.

    but without looking to your code or anything make sure you don’t have whitespace.
    end tag and open tag e.g. ><img…

    # September 2, 2009 at 6:56 am

    Hi I appreciate your fast reply.
    I am sorry I should have been more detailed.

    Alright, here you go.
    Access link http://www.riteaidonlinestore.com/templ … brand=7876 in IE 7 ( thats what I am using)
    and if you scroll down a bit you can see that the background images of some of the products tile a bit. That is some space is created between the two text ( description about the product and the image which says shop now).
    This is the CSS

    Code:
    /* Top “back to” nav */
    .raNav A:link {text-decoration: none; color: #ffffff; font-family: arial; font-size: 11px;}
    .raNav A:visited {text-decoration: none; color: #ffffff; font-family: arial; font-size: 11px;}
    .raNav A:active {text-decoration: none; color: #ffffff; font-family: arial; font-size: 11px;}
    .raNav A:hover {text-decoration: underline; color: #ffffff; font-family: arial; font-size: 11px;}
    .raNav_style {color: #ffffff; font-family: arial; font-size: 15px;}

    /* Header */
    #raTblHeaderRow, #raTblSearchRow, #raChkHeadBar, #raTblCOHeadRow { width: 765px; }
    #raraTblHeaderRow #raColOne, #raTblHeaderRow #raTblCOHeadRow { width: 250px; }
    #raTblHeaderRow #raColTwo, #raTblHeaderRow #raTblCOHeadRow { width: 514px; text-align: right; }
    #raTblHeaderRow #raTblShopLinks { width: 100%; }
    #raTblHeaderRow #raTblShopLinks td { text-align: right; }
    #raTblShopLinks a:link {color:#003273; text-decoration:none;}
    #raTblShopLinks a:visited { color: #003273; text-decoration:none; }
    #raTblShopLinks a:hover {color:#003273; text-decoration:underline;}
    #raTblShopLinks #bag img {vertical-align:middle; padding-bottom:3px;}

    /* CSS FOR LEFT NAVIGATION BLOCK */
    #RAlhsBox {padding-top:0px;}
    #RAlhsBox ul { margin: 0 0 6px 0;padding:0;list-style-type:none;}
    #RAlhsBox ul a:link, #RAlhsBox ul a:visited {color: #666666;text-decoration: none;padding-top:8px;font-size: .9em;}
    #RAlhsBox ul a:hover {color: #d0202b;text-decoration:underline;font-size: .9em;}
    #RAlhsH3 a:link, #RAlhsH3 a:visited {font-size: 12px;color: #000000;text-decoration: none;}
    #RAlhsH3 a:hover {color: #d0202b;text-decoration:none;}

    .thirdPartyCheckoutLegend {color:#003273;text-decoration:none;}

    Thanks in advance for your help.

    # September 2, 2009 at 8:47 am

    wow it is a mess…..

    however, I can’t see the main html & css, all I see is shit loads of javascript & tables.

    however, I would suggest you make sure you have a strict doc type not a transitional one, right now you are letting IE show its quirks.

    ok using just view source & not Firebug, I can see you are trying to style tables.

    I take it you have inline & external CSS? if so, I would try and stay away from that (personal opinion).

    now if you know what you want to do for the images I would:

    make a div that has a head image and add in your title as text where you want it to be.
    make a div body for your info floated left, make a div body with image of said product range floated right
    clear divs
    make a div for footer for shop now.

    thats how I would do it. I would not use tables personally

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".