www.webdeveloper.com
Results 1 to 10 of 10

Thread: Single white space is killing me

  1. #1
    Join Date
    Jun 2004
    Location
    California, USA
    Posts
    264

    Single white space is killing me

    I need your help, check out this page in Firefox www.cozyclosets.com

    See under the big image there is a horizontal space. I cant figure out what is causing it. Its not IE or Opera only in FF. Here is the css, does anyone know?


    ====================================================


    /* Cozy Closets CSS v1 2005 */

    body { margin: 0px; padding:0px; text-align: center; font-family: arial, sans-serif; font-size: 12px; background: #eee url(/images/bkgd_print.gif) no-repeat 50% 150px;}
    img { padding: 0px; margin: 0px; border: 0px;}
    a:link, a:visited { text-decoration: none; color:blue; }
    a:hover { colorurple; }
    hr { display: none; }
    h5 { display: none; }
    input:focus, textarea:focus, select:focus { background-color: #EEEEEE; }


    /* ============================ Wrapper ============================ */
    #wrapper {
    position: relative;
    width: 790px;
    margin:0 auto;
    text-align: left;
    background: /*#99CCFF*/ url(/images/content_bkgd.gif) repeat-y;
    }

    /* Header */
    #header {
    width: 790px;
    margin: 0px;
    padding: 0px;
    height: 145px;
    background: #eeeeee url(/images/header_bkgd.gif) repeat-x 0% 100%;
    border: 0px;
    }
    #header a img { float: left; }
    #header img { float: right; }



    /* ============================ Navigation ============================ */
    #nav {
    width: 786px;
    height: 26px;
    background: #FF9933 url(/images/nav_bkgd.gif) repeat-x;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    text-align: center;
    }
    #nav ul { list-style-type: none; margin: 0px; padding: 5px 0 0 0; }
    #nav ul li { display: inline; list-style-type: none; padding-right: 10px;}
    #nav ul li a:link, #nav ul li a:visited { background: url(/images/arrow.gif) no-repeat 0% 50%; font: bold 100% arial, sans-serif; color: #000; margin: 0px 2px 0px 0px; padding-left: 15px;}
    #nav ul li a:hover { color: #FFFF99; }


    /* =========================== Sub Nav ============================== */
    #subnav {
    width: 786px;
    height: 26px;
    background: #666699;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    text-align: center;
    }
    #subnav ul { list-style-type: none; margin: 0px; padding: 5px 0 0 0;}
    #subnav ul li { display: inline; list-style-type: none; padding-right: 5px;}
    #subnav ul li a:link, #subnav ul li a:visited { font: bold 100% arial, sans-serif; color: #ddd; margin: 0px 2px 0px 0px; }
    #subnav ul li a:hover { color: #FFFFCC; }



    /* ============================ Content ============================ */
    #content {
    float: left;
    width: 790px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    }


    #contentPadding { padding: 0 25px 0 45px; margin-bottom: 15px;}
    #contentPadding h1 { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 160%; padding-bottom: 5px; border-bottom: 1px solid #ccc; line-height: 1.5em; font-weight: normal;}
    #contentPadding h2 { font-size: 120%; margin: 0px; padding:0px;}
    #contentPadding h3 { margin-bottom: 0; padding-bottom: 0; font-size: 120%; }
    #contentPadding img { padding: 0 0 0 5px; }
    #contentPadding p { line-height: 1.5em; }

    #contentPadding ul { margin: 0px; padding: 0px; list-style-type: none;padding-top: 5px;}
    #contentPadding table { margin: 0px; }

    /* In Home Consultation Style */
    #in-home { text-align:center; background: #eee; border: #aaa solid 1px; padding: 2px 0px; margin: 5px; 0px;}
    #in-home a { font-weight: bold; }

    /* In-Home Consultation Form */
    #contentPadding form { padding: 5px; margin-top: 15px;}

    #form select { font-size: 90%; width: 206px; }

    /* Table for Admin */
    #messages table { margin-bottom: 50px; }

    .center { text-align: center; }
    .newsItem { margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px; display: block;}
    .title { font-family: "Trebuchet MS",verdana, arial, sans-serif; font-weight: bold; font-size: 120%;}
    .date { font-family: arial, sans-serif; font-size: 100%; font-style:italic;}


    /* What is a Cozy Closet */
    .aboutTitle { font-weight: bold; }
    .aboutImage { padding: 0 5px 0 5px; }

    /* Advertisements */
    #ads ul { margin: 0 170px 20px 0; border-bottom: 1px solid #ccc; }
    #ads ul li { padding: 0 0 5px 10px; }
    #ads ul li a { padding-left: 2px; }
    #arrow { background: url(/images/arrow.gif) 0% 30% no-repeat; }

    #player { float: right; }
    #player h4 { margin: 0 0 5px 0; }
    #player p { width: 150px; font-size: 80%; color: #666; }


    /* ============================ Sidebar ============================ */
    #sidebar {
    margin: 0px;
    float: left;
    width: 154px;
    color: #ffffff;
    background: #666699;
    }

    #sidebarPadding { padding: 0px 5px;}
    #sidebarPadding ul { list-style-type: none; margin: 0px; padding: 0px; margin-bottom: 10px; padding-bottom: 10px;}
    #sidebarPadding ul li { list-style-type: none; margin: 3px 0px; color: #000000;}
    #sidebarPadding ul li a:link, #sidebarPadding ul li a:visited { background: url(/images/arrow.gif) 0% 50% no-repeat; padding-left: 12px; color: #FFF; text-decoration: none; font-size: 100%;}
    #sidebarPadding ul li a:hover { color: #FFA500; text-decoration: underline; }

    .catTitle { font-weight: bold; font-size: 90%; color: #000000; background-color: #00CCFF; padding: 1px; padding-left: 5px; border: 1px solid #000;}


    #cc { text-align:center; }
    #cc p { color: #ddd; margin: 2px; }
    #cc img { border: 1px solid #000; padding: 2px; background: #fff;}



    /* ============================ Footer ============================ */
    #footer {
    clear: both;
    width: 786px;
    height: 26px;
    background: #eeeeee url(/images/footer_bkgd.gif) repeat-x;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    }
    #footer strong {
    margin: 0px;
    float: left;
    padding: 7px 5px 0 5px;
    font: bold 80% verdana, arial, sans-serif;
    }
    #footer strong a:link, #footer strong a:visited {
    color: #333333;
    }
    #footer strong a:hover {
    color: #FFFFFF;
    }


    #footer p {
    margin: 0px;
    float: right;
    color: #333333;
    padding: 7px 5px 0 0;
    font: bold 80% verdana, arial, sans-serif;
    }
    Thank you,
    MIDI Delight - Free Ringtones and MIDI Files
    http://www.mididelight.com

  2. #2
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Code:
    #content img {
    display:block;
    }
    (reason)
    Last edited by BonRouge; 11-12-2005 at 09:38 PM.

  3. #3
    Join Date
    Jun 2004
    Location
    California, USA
    Posts
    264
    it worked! your a genius, how did you know that?
    Thank you,
    MIDI Delight - Free Ringtones and MIDI Files
    http://www.mididelight.com

  4. #4
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273

  5. #5
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    I thought it was study of code necromancy.

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    The IMG element is inline by default. That means it is rendered on a text line.

    Text has three main zones: The Ascendor, that middle part I always forget the name of, and the Descendor.

    The Ascendor is where the top parts of tall letters extend to, like the top part of the letter 't'. The Descondor is where the lower parts of letters extend to, like the lower part of the letter 'j'. The middle area is where most lower case letters exist, like the letter 'a'.

    The IMG element is vertically aligned so the bottom of the image rests on the bottom edge of the middle zone of a line of text. Compliant browsers will display a gap under the image because that's the Descendor zone of the text line.

    Making the IMG a block element removes it from the text line and closes the gap underneath. Vertically aligning the image to the bottom will also remove the gap: #some_ID_of_an_img { vertical-align: bottom; }

  7. #7
    Join Date
    Jun 2004
    Location
    California, USA
    Posts
    264
    now thats the type of reply i was looking or, thank you.
    Thank you,
    MIDI Delight - Free Ringtones and MIDI Files
    http://www.mididelight.com

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

  9. #9
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    I think I said that in my link...

  10. #10
    Join Date
    Jun 2004
    Location
    California, USA
    Posts
    264
    i'm sorry, i didnt see the link called "reason", your site has alot of good information too. cheers!
    Thank you,
    MIDI Delight - Free Ringtones and MIDI Files
    http://www.mididelight.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles