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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    418
    Thanks
    18
    Thanked 2 Times in 2 Posts

    div positioning in IE

    I'm trying to layout a page using divs with overflow and z-indexes. When I went to view it in IE9, it's not working at all. I don't know if its z-index or if it's the overflow that isn't working. All the images appear in the browser as if I hadn't styled a thing.

    Here's the code - it's not in a stylesheet at the moment, so I can test and move things around:
    Code:
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Workshops for Youth and Families</title>
    </head>
    
    <body><div style="position:relative; width:100%; z-index:300;">
    <div id="register1" style="z-index:5;line-height: 0;height:0px;height:0;width:200px;overflow:visible;position:relative; left:565px; top:12px;"><a href="register.php"><img src="test_images/register.gif" border=0/></a></div>
    <div id="support1" style="z-index:5;height:0px;width:200px;overflow:visible;position:relative; left:690px; top:12px;"><a href="support.php"><img src="test_images/support.gif" border=0/></a></div>
    
    <div id="logo1" style="z-index:5;line-height: 0; height:0px;height:0;width:0px;overflow:visible;position:relative; left:110px;top:10px;"><img src="test_images/logo1.gif" /></div>
    <div id="orho1" style="z-index:3; line-height: 0;height:0px;height:0;width:0px;overflow:visible;position:relative; left:-100px;top:20px;"><img src="test_images/orho1.gif" width=400px /></div>
    <div id="tear1" style="z-index:2; height:10px; width:600px; overflow:visible; position:relative; top:67px;" ><img src="test_images/tear1.gif" /></div>
    <div id="textbox1" style="z-index:1; background-color:#d9e496;width:100%;height:280px;position:relative;top:264px;">
    
    	<div id="whathappens1" style="position:relative; left:285px;"><img src="test_images/whathappens.gif" /></div>
    	<div id="fb1" style="position:relative; top: 130px; left:25px;height:0px;overflow:visible;"><img src="test_images/fb.gif" /></div>
    	<div id="twitter1" style="position:relative; top:130px; left:85px;overflow:visible;"><img src="test_images/twitter.gif" /></div>
    	<div id="orange1" style="position:relative; height:0px;width:0px;overflow:visible;left:310px;top:-34px;"><img src="test_images/orange.gif" width=1px height=200px />
    
    		<div id="tear2" style="z-index:2; height:44px;width:0px;overflow:visible;position:relative; left:-310px; width:100%; top:14px;background-image: url(test_images/tear2.gif); background-repeat: repeat-x;"><img src="test_images/tear2.gif"  /></div>
    	</div>
    </div>
    
    <div id="textbox2" style="z-index:2; background-color:#c4d359;width:100%;height:280px;position:relative;top:234px;">
    
    
    
    </div>
    
    </div>
    
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning turpentyne,
    Those inline styles are a pretty tough way to make it "so I can test and move things around"

    If you embed your styles like my example below, it's easy to move them to an attached stylesheet later.

    I didn't make a lot of changes, I just added the bit that make your images display something for me on this end. It's hard to tell what you want to do with all these divs without being able to see your images.

    The next thing I would suggest, after embedding your css, is not using so many div elements, see divitis here. An image can just be styled on it's own, you don't need to wrap each one in it's own div.

    After that, you should check your code with the validators. See the links about validation in my signature line below.

    Here's a start, this behaves the same in all the browsers I viewed it in...
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Workshops for Youth and Families</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    img {				/*since I don't have your images*/
    	background: #f00;
    	display: block;
    }
    #wrap {
    	width: 1000px;
    	margin: 30px auto;
    	position:relative;
    	background: #ccc;
    }
    #register1 {
    	position:relative;
    	left:565px;
    	top:12px;
    }
    #support1 {
    	position:relative;
    	left:690px;
    	top:12px;
    }
    #logo1 {
    	position:relative;
    	left:110px;
    	top:10px;
    }
    #orho1 {
    	position:relative;
    	left:-100px;
    	top:20px;
    }
    #tear1 {
    	position:relative;
    	top:67px;
    }
    #textbox1 {
    	background: #d9e496;
    	width: 100%;
    	height: 280px;
    	position: relative;
    	top: 264px;
    }
    	#whathappens1 {
    		position:relative;
    		left:285px;
    	}
    	#fb1 {
    		position:relative;
    		top: 130px;
    		left:25px;
    	}
    	#twitter1 {
    		position:relative;
    		top:130px;
    		left:85px;
    	}
    	#orange1 {
    		position:relative;
    		left:310px;
    		top:-34px;
    	}
    	#tear2 {
    		position:relative;
    		left:-310px;
    		top:14px;
    	}
    #textbox2 {
    	background:#c4d359;
    	width:100%;
    	height:280px;
    	position:relative;
    	top:234px;
    }
    </style>
    </head>
    <body>
        <div id="wrap">
            <a href="register.php" id="register1"><img src="test_images/register.gif" alt="description" width="200px" height="50" /></a>
            <a href="support.php" id="support1"><img src="test_images/support.gif" alt="description" width="200px" height="50" /></a>
            <img src="test_images/logo1.gif" alt="description" width="400px" height="200" id="logo1" />
            <img src="test_images/orho1.gif" alt="description" width="400px" height="200" id="orho1" />
            <img src="test_images/tear1.gif" alt="description" width="600px" height="10" id="tear1" />
                <div id="textbox1">
                    <img src="test_images/whathappens.gif" alt="description" width="50px" height="50" id="whathappens1" />
                    <img src="test_images/fb.gif" alt="description" width="50px" height="50" id="fb1" />
                    <img src="test_images/twitter.gif" alt="description" width="50px" height="50" id="twitter1" />
                    <img src="test_images/orange.gif" alt="description" width="1" height="200" id="orange1" />
                    <img src="test_images/tear2.gif" alt="description" width="50px" height="44" id="tear2"  />
                <!--end textbox1--></div>
            <div id="textbox2">
            <!--end textbox2--></div>
        <!--end wrap--></div>
    </body>
    </html>
    Last edited by Excavator; 02-12-2012 at 06:37 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    418
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Yeah... you're right. I was having a couple duh moments on this one. Thanks!


  •  

    Posting Permissions

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