#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0

    Div positioning in Firefox


    I wonder if someone could point me in the right direction regarding an issue that only seems to appear while using firefox.

    It would seem that I am not able to post url's so I can't post a link to show the problem I am having, if anybody wants to take a look you could always email my privately and I will give you the url although I notice others have submitted links without the http:// part.

    There are two layouts, the home page uses a three column layout of even dimensions. The inner pages have a two column layout.

    While the website looks good in Chrome 27, Safari 6 and Opera 12, the right hand column wraps to the next line in Firefox 21.

    This is a responsive website and the column widths are all based on percentages, no amount of tweeking seems to fix the issue and for that matter I'm not really sure where to look to fix it. Any suggestions would be appreciated.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Welcome to DevShed Forums, lfirth.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    Do I understand correctly that you're testing on a Mac and have tested in neither IE9 nor IE10 at this point?

    I'll make a guess at what the problem is based solely on your description. It sounds like you may be using the "box-sizing" property without using the "-moz-box-sizing" property as well.

    http://caniuse.com/#feat=css3-boxsizing
    https://developer.mozilla.org/en-US/...CSS/box-sizing
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, lfirth.
    It's good to be here, this forum seems to be quite active so I might hang around awhile.

    Originally Posted by Kravvitz
    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.
    Fair enough, I hate spammers. The url of the website is canvas . firthwebworks . com .au.

    Originally Posted by Kravvitz
    Do I understand correctly that you're testing on a Mac and have tested in neither IE9 nor IE10 at this point?
    You are correct in that assumption. I have only just recently moved over to mac from windows and testing on ie of any type is a little difficult. Any suggestions as how to test on ie browsers on a mac?

    Originally Posted by Kravvitz
    I'll make a guess at what the problem is based solely on your description. It sounds like you may be using the "box-sizing" property without using the "-moz-box-sizing" property as well.
    Here is the css code I have for the three columns on the home page and the inner "green" column.

    Code:
    #green-col {
        float: left;
        margin-top: 15px;
        clear: none;
        width: 32%;
        display: block;
        background-size: auto;
        background: rgb(153, 187, 0) url('../_img/bg_green_col.png') repeat-y;
    }
    
    #yellow-col {
    	float: left;
    	margin-left: 2%;
    	margin-top: 15px;
    	clear: none;
    	width: 32%;
    	display: block;
    	background-size: auto;
    	background: rgb(255, 160, 0) url('../_img/bg_yellow_col.png') repeat-y;
    }
    
    #blue-col {
    	float: left;
    	margin-left: 2%;
    	margin-top: 15px;
    	clear: none;
    	width: 32%;
    	display: block;
    	background-size: auto;
    	background: rgb(58, 93, 180) url('../_img/bg_blue_col.png') repeat-y;
    }
    
    #green-col-inner {
    	float: left;
    	margin-top: 15px;
    	clear: both;
    	width: 66%;
    	display: block;
    	background-size: auto;
    	background: rgb(153, 187, 0) url('../_img/bg_green_col_wide.png') repeat-y;
    }
    Thanks.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    My educated guess was correct. Another rule (".contentBoxes") being applied to those elements is adding padding to them. In boilerplate.css change
    Code:
    body, div, img, p, button, input, select, textarea {
        box-sizing: border-box;
    }
    to
    Code:
    body, div, img, p, button, input, select, textarea {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    I have only just recently moved over to mac from windows and testing on ie of any type is a little difficult. Any suggestions as how to test on ie browsers on a mac?
    Perhaps these will help:
    http://www.wikihow.com/Install-Inter...ng-WineBottler
    http://osxdaily.com/2010/09/18/inter...rer-9-for-mac/

    P.S. The default value for "background-sizing" is "auto", so you don't need those declarations if they are being used to override ones elsewhere. Also they would be overridden anyway by how the "background" shorthand property works (it resets values for background-* properties not specified to their defaults).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0

    Thumbs up


    Thanks for that. It fixed the issue. Thanks for the "ie on a mac" links too, they will be a great help.

IMN logo majestic logo threadwatch logo seochat tools logo