Link to home
Start Free TrialLog in
Avatar of erikTsomik
erikTsomikFlag for United States of America

asked on

CSS Urgent help for ie7

i GOT A PROBLEM HERE . I am developing the layout for the site. It works fine for IE6 but the footer get in the middle for IE7
#bottomFooter{
	position: absolute;
	width:1024px;
	left:50%;
	margin-left:-512px;
	margin-top:-276px;
 
	
}

Open in new window

Avatar of favoretti
favoretti
Flag of Netherlands image

Could you show HTML where you use that? Would be nice to test it.
Basically CSS in IE7 is so very broken, you might as well wanna quit using it at all (kidding).
Avatar of erikTsomik

ASKER

here is the code
and the css can be found here
tersting.omnilearn.com/sunriseportal/css/stye2.css

 
 
	
	
 
 
 
 
 
	
	
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
	
   
 
 
 
	
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sunrise University Kiosk</title>
<link rel="stylesheet" href="css/style2.css">
</head>
 
<body>
 
<!-- wrapper -->
<div id="wrapper"> 
 
	<!-- header -->
	<div id="header"><img src="images/main_header2.jpg" /></div>
		
	<!-- content -->
	<div id="content">
		<img src="images/main_left.jpg" style="float:left;" />
		<div id="mainCenter">
        			<h2 align="center" style="color:#FFFFFF">Orientation</h2>
			<div id="leftMain">			
					
				
                
	
				<a class="mainLink_brown" href="../../lms/selectCurriculum.cfm?currid=252&reviewmode=false"><br />Dining Services </a>
				<a class="mainLink_brown" href="../../lms/selectCurriculum.cfm?currid=275&reviewmode=false"><br />Activity Programming  </a>
				<a class="mainLink_brown" href="../../lms/selectCurriculum.cfm?currid=277&reviewmode=false"><br />Community Relations  </a>
 
				
			</div>
			<div id="centerMain">
				
				<a class="mainLink_blue" href="index.html"><br />Exit</a>
			</div>
			<div id="rightMain">
			
				
                
 
			</div>
			<br />
 
		</div>
		<img src="images/main_right.jpg" style="float:left;"/>
	</div>
	
	<div id="footer"></div>
	
</div>
 
<div id="bottomFooter"><img src="images/main_footer2.jpg" /></div>
</body>
</html>

Open in new window

sorry wrong link
tersting.omnilearn.com/sunriseportal/kiosk/css/stye2.css
Well, it actually works as intended. You shove it -512px upwards, so that's about half a screen :)
weill the piese that is in middle in IE7 should be at the buttom, it works fine for IE6, i need it also for ie to work
Avatar of Mark Steggles
Hello,

Have you got a link to the actual page?

Steggs
On a sidenote, why are you using such a hack with positioning when you can just use vertical-align: bottom; ?
the site is secure I can only prove the screen shot. And also vertical-align:button does not work

Image2.gif
Hey man,

tersting.#bottomFooter {
        position: absolute;
        width:1024px;
        left:50%;
        margin-left:-512px;
        margin-top:-276px;
}

The negative margin-top is pushing your footer 276px up the page. Try this css

tersting.#bottomFooter {
        position: absolute;
        width:1024px;
        left:50%;
        bottom:0;
        margin-left:-512px;
}

Steggs
your example shifted the the footer down but not all the way and IE 6 also moved down .Remember it works fine in IE6
* {padding:0;margin:0}

html,
body {
height:100%;
width:100%;
min-height:100%;
}

body{
      text-align:left;
      min-width:1024px;
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
}

#bottomFooter{
      position: absolute;
      width:1024px;
      left:50%;
      margin-left:-512px;
      bottom:0;
}
and now it works in IE7 and does not work in ie6. IE6 get the footer shifted down
ASKER CERTIFIED SOLUTION
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial