SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border size treated differently

    I'm having an issue with the way Firefox treats border size. For example, in other browsers (IE and Chrome), if you have an element with a size of 100x100px and you apply a 25px border to it, you will end up with an element that has an interior space of 100x100px and a 25px border around it, making the total size of the element 150x150px.

    In Firefox, however, you end up with an interior size of 50x50px and a total element size of 100x100px.

    This is quite frustrating.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lpcstr View Post
    In Firefox, however, you end up with an interior size of 50x50px and a total element size of 100x100px.
    That's not the case, actually. FF behaves as the others do. Are you using CSS3? I belive there are options for placing the border inside or outside with that, but in CSS2, this will work the same in all browsers:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Experiment</title>
    <style media="all">
    div {width: 100px; height: 100px; border: 25px solid green;
    </style>
    </head>
    
    <body>
    <div>
    
    </div>
    </body>
    
    </html>
    Perhaps post your code if that doesn't help.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That example works correctly for me, but mine is not.

    Code:
    <article>
      <object class="soundcloud" data="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F965897"/>
    </article>
    Code:
    article {
    	margin-top: 10px;
    	margin-bottom: 10px;
    	width: 100%;
    	background: -moz-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
    	background: -webkit-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
    	background: -o-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
    	background: linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
    	padding: 15px;
    	border: 1px solid black;
    	border-radius: 15px;
    	box-shadow: 5px 5px 10px rgba(0,0,0,0.5), 
    	inset 0px 1px rgba(255,255,255,0.3), 
    	inset 0px 10px rgba(255,255,255,0.2), 
    	inset 0px 10px 20px rgba(255,255,255,0.25), 
    	inset 0px -15px 30px rgba(0,0,0,0.3);
    }
    
    object.soundcloud {
    	border: 25px solid #eee;
    	box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
    	height: 80px; width: 100%;
    }
    Also, in chromium, the right hand size of the object is extending out past it's container.

    Chromium:


    Firefox:
    Attached Images Attached Images

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    How can .soundcloud fit inside the article element when it is bigger than the parent?

    Code:
    object.soundcloud {     border: 25px solid #eee;     box-shadow: 0px 3px 5px rgba(0,0,0,0.5);     height: 80px; width: 100%; }
    You have a width of 100% and borders of 25px making the child 50px bigger than the parent. If a child is bigger than its parent then it overflows.

    Remove the width from the inner element.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But it works perfectly fine in Firefox(almost?), and it doesn't change the fact that it's being treated differently across these two browsers.

    What I need is a way for the interior of the flash element to be exactly 80px high, have a border, and for the entire element, including border, to take up 100% of it's parents width. And it needs to work on all browsers.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    How about something like this for modern browsers.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    *{margin:0;padding:0}/* for testing only*/
    article,object{
        display:block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; 
        -moz-box-sizing: content-box;
    }
    article {
        margin-top: 10px;
        margin-bottom: 10px;
        background: -moz-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
        background: -webkit-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
        background: -o-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
        background: linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
        padding: 15px;
        border: 1px solid black;
        border-radius: 15px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5), 
        inset 0px 1px rgba(255,255,255,0.3), 
        inset 0px 10px rgba(255,255,255,0.2), 
        inset 0px 10px 20px rgba(255,255,255,0.25), 
        inset 0px -15px 30px rgba(0,0,0,0.3);
    }
    object.soundcloud {
        border: 25px solid #eee;
        box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
        height:130px; 
        width: 100%;
    }
    </style>
    
    </head>
    
    <body>
    <article>
      <object class="soundcloud" data="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F965897"/>
    </article>
    </body>
    </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, thank you. box-sizing was exactly what I needed to get a consistent effect.

    What's the purpose of setting display:block? I removed it and it had no effect.

    Edit: Also, which of these browsers is displaying the correct default box-sizing behaviour here?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lpcstr View Post

    What's the purpose of setting display:block? I removed it and it had no effect.
    The new elements in html5 will be treated as inline elements unless the browser knows about them. You probably have a default html5 stylesheet to address this anyway.

    object elements are repleced elements and are inline which means you often get gaps around then so i set them to display:block where possible.

    Edit: Also, which of these browsers is displaying the correct default box-sizing behaviour here?
    [/quote]

    I'm not sure who is right or whether both are right as I could not find it mentioned in the specs. Its the same for some form elements and the submit button and select elements also use the broken box model.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, it gets even weirder.

    I have the flowing css now:

    Code:
    article, object {
    	-moz-box-sizing: content-box;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box; 
    }
    
    .soundcloud {
    	border: 5px solid #eee;
    	border-radius: 5px;
    	box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
    	height: 90px; width: 100%;
    }
    
    .youtube {
    	border: 5px solid #111;
    	border-radius: 5px;
    	box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
    	width: 100%;
    	// calculating height with JavaScript
    }
    The the embedded soundcloud object works just fine still, but my youtube player is is extending too far to the right now, exactly as the soundcloud did before (in Firefox, not in Chrome). I can't even begin to describe how much of a headache this is giving me. It is completely counter intuitive.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The only solution may be to add an extra element to avoid those box model issues.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    *{margin:0;padding:0}/* for testing only*/
    article,object{
        display:block;
    }
    article {
        margin-top: 10px;
        margin-bottom: 10px;
        background: -moz-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
        background: -webkit-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
        background: -o-linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
        background: linear-gradient(left top, rgba(0,0,0,0.3) 25%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0.3) 75%) fixed;
        padding: 15px;
        border: 1px solid black;
        border-radius: 15px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.5), 
        inset 0px 1px rgba(255,255,255,0.3), 
        inset 0px 10px rgba(255,255,255,0.2), 
        inset 0px 10px 20px rgba(255,255,255,0.25), 
        inset 0px -15px 30px rgba(0,0,0,0.3);
    }
    object.soundcloud {
        width: 100%;
        height:80px; 
    }
    .wrap{
        border: 25px solid #eee;
        box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
    }
    </style>
    
    </head>
    
    <body>
    <article>
    <div class="wrap">
      <object class="soundcloud" data="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F965897"/>
    </div>
    </article>
    </body>
    </html>


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
  •