Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning problem in opera

    Small problem, pretty minor but i cant seem to get my head around it. Excuse my messy coding in advance. There is a small glitch when viewing
    http://deetro.growmedia.ca/industry/index.htm
    The background image is either positioned 1px to the right or the wraping div is one px to the left. I think the later isnt happening because if you look down the background image for div#main which is the "home" png on the left is positioned correctly.
    /*
    v 0.9
    copyright growmedia 2005
    http://www.growmedia.ca
    last edited:09 08 2005
    edited by:dieter
    */

    /*default begins - applied by default to entire document*/

    *{
    margin: 0;
    padding: 0;
    }

    body {
    background-color: #DED9CA;
    background-repeat: repeat-y;
    background-position: 50% 0;
    margin: 0;
    padding: 0;
    background-image: url(images/ind_background.png);
    }

    img{
    border: 0;
    margin: 0;
    padding: 0;
    }

    /*default ends*/

    #wrap {
    left: 50%;
    margin-left: -326px;
    padding: 0;
    position: absolute;
    top: 0;
    width: 652px;
    }

    #header {
    background-color: #DED9CA;
    background-image: url(images/ind_header.png);
    background-position: top left;
    height: 172px;
    margin: 0;
    padding: 0;
    width: 652px;
    }

    /*main begins - contextual markup styling*/

    #main {
    background-color: #FFFFFF;
    background-image: url(images/ind_about.png);
    background-position: top left;
    background-repeat: no-repeat;
    padding-top: 30px;
    padding-left: 89px;
    width: 563px;
    }

    #main p{
    margin-top: 15px;
    color: #696969;
    padding-left: 4px;
    padding-right: 4px;
    font: .9em Arial,Sans-serif;
    text-indent: 0px;
    margin-bottom: 8px;
    }

    #main ul{
    margin-top: 15px;
    color: #696969;
    padding-left: 20px;
    font: .9em Arial,Sans-serif;
    margin-bottom: 8px;
    }

    #main li{
    color: #696969;
    padding-left: 10px;
    padding-right: 4px;
    font: 1em Arial,Sans-serif;
    margin-bottom: 8px;
    }

    #main h1 {
    color: #464646;
    padding-bottom: 3px;
    font: bold 18px Arial,Sans-serif;
    }

    #main h2 {
    color: #464646;
    padding-bottom: 2px;
    font: bold 15px Arial,Sans-serif;
    }

    #main h3 {
    color: #464646;
    padding-bottom: 2px;
    font: bold 13px Arial,Sans-serif;
    }

    #main h4{
    color: #172A74;
    padding-top: 3px;
    padding-left: 23px;
    font: bold 13px Arial,Sans-serif;
    }

    #main a:link, #main a:visited {
    font: 15px tahoma,arial,sans-serif;
    color: #799047;
    text-decoration: underline;
    }

    #main a:hover {
    font: 15px tahoma,arial,sans-serif;
    color: #063E5B;
    text-decoration: none;
    }

    #main em{
    color: #476B90;
    font-style: normal;
    font-family: "trebuchet ms",Arial,Sans-serif;
    }

    #main q{
    color: #2F2F2F;
    font-size: 13px;
    font-style: italic;
    }

    /*main ends - contextual markup styling*/

    /*main Layout options begins*/

    .nofloat{
    float: none;
    clear: both;
    }

    .break{
    clear: both;
    padding-top: 5px;
    padding-bottom: 5px;
    }

    .floatleft{
    padding-right: 6px;
    margin-bottom: 15px;
    margin-top: 15px;
    float: left;
    }

    /*main Layout options ends*/

    /*top menu/nav layout&style begins*/

    #containernav{
    display: block;
    height: 32px;
    width: 652px;
    }

    #lnav{
    display: inline;
    background: url(images/ind_menuleft.png) no-repeat top left;
    float: left;
    height: 32px;
    width: 89px;
    }

    #nav{
    display: inline;
    background: transparent;
    font: 13px Arial,Sans-serif;
    height: 32px;
    width: 563px;
    }

    #nav a:link, #nav a:visited {
    background-image: url(images/ind_menutop.png);
    background-position: top left;
    background-repeat: no-repeat;
    color: #999999;
    float: left;
    height: 17px;
    line-height: 17px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 15px;
    text-decoration: none;
    }

    #nav a:link#current, #nav a:visited#current, #nav a:hover {
    background-image: url(images/ind_menutop2.png);
    background-position: top left;
    background-repeat: no-repeat;
    color: #999999;
    height: 17px;
    line-height: 17px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 15px;
    text-decoration: none;
    }

    #nav ul,#nav li{
    height: 17px;
    background: transparent;
    display: inline;
    list-style-type: none;
    text-align: center;
    }

    /*top menu layout&style ends*/

    /*footer begins*/

    #footer {
    clear: both;
    padding-top: 8px;
    height: 32px;
    width: 652px;
    color: #ABA68D;
    font: normal 14px "trebuchet ms",Arial,Sans-serif;
    background: url(images/ind_footer_background.png) no-repeat top;
    }


    #footerleft{
    padding-left: 10px;
    float: left;
    }

    #footerright{
    padding-right: 10px;
    float: right;
    text-align: right;
    }

    #footer a{
    color: #ABA68D;
    text-decoration: none;
    border-left: 5px #FFFFFF;
    border-right: 5px #FFFFFF;
    }

    #footer a:visited, #footer a:link{
    color: #ABA68D;
    text-decoration: none;
    }

    #footer a:hover{
    color: #506698;
    text-decoration: none;
    }

    #footerright a:hover{
    color: #8BB021;
    }

    /*footer ends*/

  • #2
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is a chance that this problem stems from the negative margin used to align the wrapping container div. Im still unsure.

    Edit: upon removing block level elements bit by bit ive traced the problem to the something in div#main. Im not sure what it is but it might have something to do with my sloppy floating and clearing. Any help?

    Edit Edit: Ive rechecked my previous assumption and it wasnt actually div#main that was causing the problems, just the fact the divs created enough content to make the page have a scroll bar. So its an issue with the page interacting with a v. scroll
    Last edited by dmacpher; 08-10-2005 at 05:14 AM.

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    try this:
    Code:
    #header {
    background-color: #DED9CA;
    background-image: url(images/ind_header.png);
    background-position: top left;
    height: 172px;
    margin: 0;
    padding: 0;
    width: 652px;
    }
    @media all and (min-width: 0px){
      #header {
         margin-left: -1px;
      }
    }
    and see if that helps any. It looks like your header is being pushed to the right 1px in Opera. I had a similar problem just recently.

    If you notice you can collapse the browser some and as you manually make it smaller/bigger, you can can see it lines up sometimes and shifts off 1px other times. I found this peice of code will make it look all right on a maximized screen. It will still shift some on a mnimized screen. So it's not the most graceful answer but it's what I used to fix my similar problem.

    Maybe someone can help us with a real answer.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    *lightbulb*

    Harbringer, thankyou for the reply. I wasnt sure if anyone was actually going to take a stab at that code. : After reading your post and looking over the code i opened opera to take a closer look at what was going on when the window was resizing, to my amazement something appeared. When you resize the window by hand it looks as though the 1px shift on the background flickers.
    ...
    ...
    ...


    Slowly resize the window, and it is flickering. The background is shifting 1px unrelative to the centered content. So if you line it up right it works just fine, but when its fullsize, or an uneven number of pixels wide. The background has to round and is 1px different from the centered wrapping div.

    Does that make any sense? It has to do with even and odd numbers, the window i believe should either resize by two, or the centered div with a negative margin should behave the same way. It looks like the box model might be seperate from the rendering of the body.

    Does anyone have anymore information on this subject? Ive only been coding for 4 months, and i have no idea what im actually talking about.

    edit: I guess you could reverse that whole thing and assume the wrapped content is shifting, or the header or the footer. But because it works on windows without scroll bars that are maximized, im really not sure.
    Last edited by dmacpher; 08-10-2005 at 07:08 PM.

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Bump

    Cmon' now, 61 views and only one reply? Is anyone else sharing this same problem? Is there anyone who has any more information on this?
    Last edited by dmacpher; 08-11-2005 at 01:48 AM.


  •  

    Posting Permissions

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