www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS positioning thrown out in Safari & Chrome

  1. #1
    Join Date
    Jan 2012
    Location
    UK
    Posts
    2

    CSS positioning thrown out in Safari & Chrome

    Hi
    I have just installed Safari (5.1.2) for the purposes of cross-browser testing and I have noticed a problem with one of my pages.
    http://www.disc-northants.org/index.html

    I have a floating div to the right of my page.
    Code:
    div#feature {
    margin-left: 20px;
    padding-left: 10px;
    padding-right: 50px;
    padding-bottom: 5px;
    padding-top: 15px;
    background-color:#E9FEFD;
    float:right;
    width: 200px;
    min-height:250px;
    }
    This appears correctly in IE 9 and Firefox 9.01 but in Chrome(16.0.912.75 m) and Safari (5.1.2) the div is shunted away from the right of the page, forcing an image within the parent div (main) to be shunted down, below the "feature" div.
    My page is setup with the following css:
    Code:
    /*TIDY PERFORMED 17/10/11>*/
    body {
    background-color: #83bde8;
    font-size:12px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    }
    /* LAYOUT DIVS */
    div#wrapper {
    max-width:950px;
    min-width: 800px;
    background-color:#FFFFFF;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    overflow:auto;
      border-style:solid;
      border-color:#F18227;
      border-width:3px;
      border-radius:10px;
      -moz-border-radiust:10px;
    }
    div#header {
    padding: 10px;
    margin: 0px;
    text-align: center;
    position:relative;
    }
    div#nav {
    width: 100px;
    padding-left:10px;
    padding-right:5px;
    padding-top:0px;
    padding-bottom:5px;
    line-height:30px;
    margin-top: 1px;
    float: left;
    }
    div#main {
    margin-left: 120px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 5px;
    padding-left: 10px;
    padding-right: 15px;
    padding-bottom: 15px;
    line-height: 20px;
    position: relative;
    min-height:325px;
    overflow:auto;
    }
    div#footer {
    clear:both;
    padding: 5px;
    margin: 0px;
    margin-top: 5px;
    height: 100px;
    position:relative;
    }
    div#diary {
    margin-left: 120px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 5px;
    padding-left: 10px;
    padding-right: 15px;
    padding-bottom: 15px;
    line-height: 20px;
    position: relative;
    min-height:325px;
    overflow:auto;
    }
    div#feature {
    margin-left: 20px;
    padding-left: 10px;
    padding-right: 50px;
    padding-bottom: 5px;
    padding-top: 15px;
    background-color:#E9FEFD;
    float:right;
    width: 200px;
    min-height:250px;
    }
    #facebook {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 7px;
      padding:5px;
      border-style:solid;
      border-color:#F18227;
      border-width:2px;
      border-radius:5px;
      -moz-border-radiust:5px;
      width:400px;
      background-color:#FFFFFF;
    }
    div#diary_feature {
    margin: 45px 50px 0px 0px;
    background-image:url('../images/gym.jpg');
    background-repeat: no-repeat;
    padding: 0px 0px 0px 0px;
    float:right;
    width: 275px;
    min-height:385px;
    }
    div#feature_form {
    margin-left: 12px;
    padding-left: 7px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-right:1px;
    float:left;
    width: 450px;
    min-height:230px;
    }
    I have just checked the remainder of the site and this problem persists.

    I have a hunch that I have missed something simple but I have no idea what.

    The html pages validate correctly as XHTML 1.0 Transitional
    On validating my CSS, I am getting an issue with my moz border corrections but I don't see this as being related:

    Code:
    21 	div#wrapper 	Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 10px
    22 	div#wrapper 	Property -moz-border-radiust doesn't exist : 10px
    94 	#facebook 	Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 5px
    95 	#facebook 	Property -moz-border-radiust doesn't exist : 5px
    If anyone can please advise that would be great.
    Thanks for reading this post.
    Martin

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    I checked your page in Firefox and Chrome and they both look identical. Did you fix something?
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jan 2012
    Location
    UK
    Posts
    2

    resolved Solved - CSS - Overflow problem

    Hi rtrethewey

    Indeed, I found that the overflow:auto; at the end of my #main div was causing this.

    I think I need to read up on the use of overflow, as it certainly wasn't needed here.
    C

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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