SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Doesn't work in Firefox - 1px space

    The following is my HTML

    Code:
    <div id="banner">
      <div class="moduletable">
        <div align="center"> <img src="/images/stories/banners/banner1.jpg" alt="banner1.jpg" width="814" height="224" /></div>
      </div>
    </div>
    And here is the CSS

    Code:
    * {
    	margin: 0;
    	padding: 0;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 1em;
    }
    .clear {
    	clear:both;
    	display:block;
    	overflow:hidden;
    	visibility:hidden;
    	width:0;
    	height:0
    }
    a img {
    	border: none;
    }
    p {
    	padding-bottom: 1.2em;
    
    }
    #banner {
    	width: 100%;
    	height: 224px;
    	border-top-width: 1px;
    	border-bottom-width: 1px;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-top-color: #999;
    	border-bottom-color: #999;
    }
    In IE 8 it displays fine but in FF 3 there is a 1px space between the top border and the image (see attachment).
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Set vertical-align:bottom; on the image. It's just whitespace generated.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that worked.. well the following worked

    Code:
    img {
    vertical-align:bottom;
    }
    but not

    Code:
    #banner img {
    vertical-align:bottom;
    }
    Why is that?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The <img> probably wasn't inside of a parent called banner.

    If it was then make sure there are no validation errors, and case sensitivity is correct.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    found some validation error, fixed that but still can only get it to work if I apply it to all images... which doesn't currently affect the rest of the site.

    I now have another problem (unrelated but fits under the IE/FF issue, so I will continue here)

    The navbar text is cut in half in IE, even though I have specified line-heights

    http://www.idop.org.nz

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Don't apply global styles via the universal selector (apart from margin and padding if you must) as it will cause inheritance problems.

    Apply global font styles to the body element instead.

    Code:
    * {
        margin: 0;
        padding: 0;
    }
    body{
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        line-height: 1.0;
        font-size: 12px;
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks... that taught me heaps

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abasel View Post
    Thanks that worked.. well the following worked

    Code:
    img {
    vertical-align:bottom;
    }
    but not

    Code:
    #banner img {
    vertical-align:bottom;
    }
    Why is that?
    I went to your site and didnn't even find an element called #banner.

    CTRL+F
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes sorry... I work up this morning realising that I had taken the site off line... it's back up now. Cheers

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abasel View Post
    Yes sorry... I work up this morning realising that I had taken the site off line... it's back up now. Cheers
    Then I assume #banner img{} works now. Your welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    I just left it as img ... so it applys to all images but it hasn't affected my site.

    :-)


Bookmarks

Posting Permissions

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