SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Location
    RomÃ*ns D'Isonzo, Friuli-Venezia Giulia, Italy, It
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox adds unwanted space

    I have this code
    Code:
    <h2>Tutti i modi per seguirci</h2>
    <a href="http://localhost/sandboxdb/?page_id=4395"><img class="rightimg" src="http://localhost/sandboxdb/wp-content/uploads/information.png" width=15 height=15/></a>
    <div class="clearer">
    <a href="http://localhost/sandboxdb/?page_id=4395#emailSubscribe"><img alt="Mailing list FotoComeFare" height="45" src="http://localhost/sandboxdb/wp-content/uploads/emailicon50x50.png" width="45" /></a><a href="http://www.facebook.com/FotoComeFare"><img alt="FotoComeFare su Facebook" height="45" src="http://localhost/sandboxdb/wp-content/uploads/facebookicon50x50.png" width="45" class="auto-style1" /></a>
    <a href="http://twitter.com/FotoComeFare"><img alt="FotoComeFare su Twitter" height="45" src="http://localhost/sandboxdb/wp-content/uploads/twittericon50x50.png" width="45" class="auto-style1" /></a>
    <a href="http://www.youtube.com/fotocomefare"><img alt="FotoComeFare su YouTube" height="45" src="http://localhost/sandboxdb/wp-content/uploads/youtubeicon50x50.png" width="45" class="auto-style1" /></a>
    </div>
    It works correctly in Chrome and Explorer, but not in Firefox 13. Unwanted space is added after the div containing the image links.
    You can see the result in the attachments. Screenshot 1 is what is shown by Chrome, Screenshot 2 shows Firefox.
    Background, borders, shadow, rounded corners, top and left padding are specified using the theme I'm using in Wordpress (Headway), but nothing else.
    I've also inspected the code in Chrome using the Developer tools and in Firefox using Firebug. In the latter, the extra space is not highlighted neither as padding nor as margin.
    Attached Images Attached Images

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hard to say without the relevant CSS, and more HTML (the containing round cornered box, at least). A link would be best but it looks like you're working on a local server.

    Though this is unlikely to be contributing to the problem, you have a possible error in the topmost img element. The width and height values are unquoted: width=15 height=15. If you're working to HTML5 then it's OK either way but is not consistent with the other img elements in your markup.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, we really need to see this in context to have a hope of debugging it for you. A live link would make it easiest to help. There are various things in your CSS that could be causing that effect.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Member
    Join Date
    Apr 2012
    Location
    RomÃ*ns D'Isonzo, Friuli-Venezia Giulia, Italy, It
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the answers. I know it's a problem I'm working on a local installation. Would it help if I share the html code of the page and the css?

    I attach them to this post. I'm using the Headway theme and it compiles the css at runtime. So I copied and pasted it into a new file. You will find no reference to the style.css file in the html file.
    Attached Files Attached Files

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The problem seems to be caused by this:

    Code:
    #block-20 {
        min-height: 100px;
    }
    It appears in your style sheet a few time (in 3 places) so make sure to remove all instances. Then perhaps use something like this instead:

    Code:
    #block-20 {
        padding-bottom: 10px;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Member
    Join Date
    Apr 2012
    Location
    RomÃ*ns D'Isonzo, Friuli-Venezia Giulia, Italy, It
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The problem seems to be caused by this:

    Code:
    #block-20 {
        min-height: 100px;
    }
    It appears in your style sheet a few time (in 3 places) so make sure to remove all instances. Then perhaps use something like this instead:

    Code:
    #block-20 {
        padding-bottom: 10px;
    }
    Thank you, it did it. Why do you think Firefox is the only one rendering the code in this way?
    Maybe it doesn't include borders, paddings and margins in min-height while the others do?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by albertocv View Post
    Why do you think Firefox is the only one rendering the code in this way?
    Maybe it doesn't include borders, paddings and margins in min-height while the others do?
    I'm really not sure, to be honest, but is certainly does inclue borders, paddings and margins like the others. For some reason it calculates the space following the links differently.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •