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 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts

    css positioning issue..

    my page has the main content centered and then a left and right div for the background images - you can see it at www.naughtygoat.org

    i used css to style the three divs like this:

    Code:
    #left         {background-image: url(i/leftback.gif);
    		background-position: top right;
    		background repeat: repeat-y;
    		width:1000px;
    		position:absolute;
    		right:50%;
    		margin-right:400px;
    		height:100%;}
    
    #right	     {background-image: url(i/rightback.gif);
    		background-position: top left;
    		background repeat: repeat-y;
    		width:1000px;
    		position:absolute;
    		left:50%;
    		margin-left:400px;
    		height:100%;}		
    
    #container {position:absolute;
    		left:50%;
    		top:0px;
    		margin-left:-400px;;
    		width:800px;
    		height:100%;
    it works fine on firefox and opera, but on IE the background images don't show up at all and the center div is on the left.. where did i go wrong?

    thanks in advance..

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    AZ, USA
    Posts
    685
    Thanks
    6
    Thanked 46 Times in 46 Posts
    Should your urls be in quotes? That's probably not it but consider this a free bump!

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    first of all.. i think you should rearrage your markup...

    and place your divs in a wrapper that will hold your page together..

    centering div..
    Code:
    body{padding:0;
            margin:0;
            text-align:center;
            }
    
    text-align:center;<-- this is the way to center a div in IE and this would center all the block elements in the body.. so....
    
    this below...
    
    #wrapper{width:X <--width of your design;
                  text-align:left;  <-- this overrides the text-align:center in the body to keep all the containing block under the #wrapper aligned to the left..
                  margin:auto;
                  }
    this should fix your problem in IE...

  • #4
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post
    may want to consider making a class for this
    Code:
    <div style="position:absolute; height:90&#37;; width:100%;"></div>
    Dedicate some time to Educate your mind

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    For me..

    "as much as possible.. never use... absolute position..."

    trust me..

    rather use floats.. than absolute..

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I second to avoid absolute positions, since from your CSS, it's clear that you are not aware of the right effects/consequences (in fact there is no need for an absolute position to build a layout like this).

    In particular, you have some errors in your CSS, see http://jigsaw.w3.org/css-validator/v...ning=1&lang=en
    background repeat: repeat-y;
    of both #left and #right
    should be
    Code:
    background-repeat: repeat-y;
    Last edited by abduraooft; 05-16-2008 at 10:22 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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