IE positioning issues (sigh) [Archive]

Irishjugg

11-10-2008, 06:38 AM

Hey guys, I have a website project I am working on and it looks great in firefox (great is relative, but at least everything lines up properly..) In IE7 however, parts just dont work. Specifically the "header" div background doesnt go to the right place. I have a padding-right: 14px on that div, and when I remove that it positions the background correctly, but it screws up the rest of my alignments, and my <li> menu stuff doesnt position itself where it is supposed to, the cap images dont line up properly, and for some reason my form is way too low and overlaps my horizontal menu. The padding-top: 90px seems to be the issue here, since if I make it smaller I don't get an overlap. However, in firefox 90 px is the correct padding. That pad is applied in the #login div.

Page for demo is:

http://web.science.nd.edu/bestbuddies/welcome.php

I suck at hacking around the pathetic shortcomings of IE, could anyone please help me try to get this thing dealt with?

here is the code for the page, with some php and stuff removed since it is irrelevant.

<!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" xml:lang="en" lang="en">
<head>
<title>ND Best Buddies</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="css/scheme.css" />
</head>
<body>
<div id="topstripe"></div>
<div id="center">
<div id="tspacer"></div>
<div id="wrapper">
<div id="header">

<div id="lspacer"></div>

<ul id="tabbar">
<?php // Which header tabs?
if (redacted key..) {
?>
<li class="lcapend topbars"></li>
<li class="topbars"><a href="#" rel="#default" class="selected">Home</a></li>
<li class="topbars"><a href="mybuddy.php" rel="inner">My Buddy</a></li>
<li class="topbars"><a href="fshipupdate.php" rel="inner">Friendship Logs</a></li>
<li class="topbars"><a href="external.php" rel="inner">Event Center</a></li>
<li class="topbars"><a href="external.php" rel="inner">Officers</a></li>
<li class="topbars"><a href="external.php" rel="inner">Associate Buddies</a></li>
<li class="rcap topbars"></li>
<?php
} else { // Not logged in
?>
<li class="lcapend topbars"></li>
<li class="topbars"><a href="#" rel="#default" class="selected">Home</a></li>
<li class="topbars"><a href="mybuddy.php" rel="inner">About</a></li>
<li class="topbars"><a href="external.php" rel="inner">Event Schedule</a></li>
<li class="topbars"><a href="external.php" rel="inner">Officers</a></li>
<li class="rcap topbars"></li>
<?php
}
?>
</ul>

<?php // Check for admin block
if (privLevel($NetID) >= 10) {
?>
<ul id="admin">
<li class="lcap topbars"></li>

<a href="admin.php" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">
<li class="topbars">Admin</li>
</a>

<li class="rcap topbars"></li>
</ul>
<?php
}
?>

<?php // Which header tabs?
if (removed) {
?>
<div id="login">
<form action="funcs/login.php" method="post">
<center>
<table border=0 class="login">
<tr>
<td>
<label for="NetID">NetID</label>
</td>
<td>
<input class="tbox" type="text" id="NetID" name="NetID" />
</td>
<td class="smallspacer"></td>
<td>
<label for="pw">Password</label>
</td>
<td>
<input class ="tbox" type="password" id="pw" name="password" />
</td>
<td class="smallspacer"></td>
<td>
<input class ="button" type="submit" value="Login!" />
</tr>
</table>
</center>
</form>
</div>
<?php } else { ?>
<div id="login">
<form action="funcs/logout.php" method="post">
<center>
<input class ="button" type="submit" value="Logout" />
</center>
</form>
</div>
<?php } ?>

<img src="images/headertopbg.png" class="headtop" />
<img src="images/headerbottombg.png" class="headbottom" />
</div>

<div id="vspacer"></div>
<div id="content">
<div id="inner"> 
<?php
if (removed) {
doFeeds($NetID);
}
else {
?>
<h3>Welcome, we are under construction but ready for your friendship updates.<br />Please log in above with your netid and password, then fill one out.
<br /> P.S. If you are using Internet Explorer, this page should look pretty awful. Im working on it.<br /> It looks great if you use firefox or anything else though.</h3>
<?php
}
?>
</div>

<img src="images/contenttopbg.png" class="contop" />
<img src="images/contentbottombg.png" class="conbottom" />
</div> 
</div> 
</div> 
<img src="images/bottomcap.png" class="bottomcap" />
</div>
<script type="text/javascript">
var tabs=new ddajaxtabs("tabbar", "inner")
tabs.setpersist(false)
tabs.setselectedClassTarget("link") //"link" or "linkparent"
tabs.init(5)
</script>

<script type="text/javascript">
var admin=new ddajaxtabs("dropmenudiv", "inner")
admin.setpersist(false)
admin.setselectedClassTarget("link") //"link" or "linkparent"
admin.init(5)
</script>
</body>
</html>

and here is the css, with some coloring and stuff removed.

body {

text-align: center;
font-family: calibri, arial;
font-size: 16px;
background-color: white;
margin: 0px;
color: black;
}

p {
color: black;
z-index: 10;
}

#topstripe {

/*background-color: #FFAE5E;*/
background-image: url('../images/orangish.png');
background-repeat: repeat-x;
text-align: left;
height: 168px;
width: 100%;
position: absolute;
left: 0px;
top: 40px;
}

#center {
margin: 0 auto;
width: 1020px;
text-align: left;
position: relative;
top: 0px;
/*background-color: gray;*/
background-image: url('../images/yellowness.png');
background-repeat: repeat-y;
overflow: hidden;
}

#header {
width: 980px;
height: 154px;
position: relative;
/*background-color: white;*/
background-image: url('../images/panelsmiddle.png');
background-repeat: repeat-y;
background-position: right;
/*background-attachment: fixed;*/
float: right;
text-align: center;
padding-right: 14px;
z-index: 1;
}

img.headtop {
position: absolute;
top: 0px;
right: -1px;

z-index: 0;
}

img.headbottom {
position: absolute;
bottom: -12px;
right: 0px;
z-index: 1;
}

img.bottomcap {
position: relative;
bottom: 0px;
right: 0px;
z-index: 1;
}

#header ul {
height: 27px;
color: white;
font-weight: bold;
margin: 0;
padding: 0;
position: relative;
float: left;
top: 128px;
padding-left: 24px;
z-index: 2;
}

ul#admin {
float: right;
padding-left: 0px;
padding-right: 24px;
}

li.topbars a {
text-decoration: none;
color: white;
}

li.topbars {
list-style: none;
float: left;
text-align: center;
padding-left: .5em;
padding-right: .5em;
height: 27px;
line-height: 25px;
background-image: url('../images/orangebar.png');
background-repeat: repeat-x;
/*border-right: 1px inset black;*/
}

li.topbars:hover {
background-image: url('../images/purple.png');
}

#admin li {
width: 80px;
padding-left: 0;
padding-right: 0;
/*background-image: url('images/orangebar.png');*/
}

li.lcapend {
width: 15px;
line-height: 25px;
/*background-color: gray;*/
padding-left: .3em;
padding-right: 0;
background-image: url('../images/leftendcaporg.png');
background-repeat: no-repeat;
background-position: right;
}

li.rcap {
width: 14px;
/*background-color: gray;*/
padding-left: 0;
padding-right: .3em;
background-image: url('../images/rightmidcaporg.png');
background-repeat: no-repeat;
background-position: left;
}

#admin li.lcap {
width: 15px;
padding-left: .3em;
padding-right: 0;
background-image: url('../images/leftmidcaporg.png');
background-repeat: no-repeat;
background-position: right;
z-index: 3;
}

#admin li.rcap {
width: 15px;
/*background-color: gray;*/
padding-left: 0;
padding-right: .3em;
background-image: url('../images/rightendcaporg.png');
background-repeat: no-repeat;
background-position: left;
}

#content {
width: 980px;
min-height: 350px;
height:auto !important;
height:450px;
position: relative;
clear: right;
float: right;
padding-left: 0px;
padding-bottom: 40px;
background-image: url('../images/panelsmiddle.png');
background-repeat: repeat-y;
background-position: right;
}

#inner {
float: left;
text-align: center;
padding-left: 54px;
padding-top: 10px;
padding-bottom: 4px;
z-index: 2;
width: 900px;
position: relative;
}

img.contop {
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}

img.conbottom {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1;
}

#wrapper {
width: 980px;
position: relative;
float: right;
background-image: url('../images/wrappermiddle.png');
background-repeat: repeat-y;
background-position: right;
}

img.containtop {
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}

img.containbottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: 0;
}

#login {
position: relative;
z-index: 2;
margin: 0 auto;
width: 700px;
padding-top: 90px;
text-align: center;

}

table.login {
padding: 0px;
text-align: center;
}

table.fship {
text-align: center;
}

td.smallspacer {
width: 14px;
}

Snookerman

11-10-2008, 03:21 PM

Try removing the red part and adding the green part to your css:

#wrapper {
width: 980px;
position: relative;
float: right;
background-image: url('../images/wrappermiddle.png');
background-repeat: repeat-y;
background-position: right;
}
#login {
position: relative;
z-index: 2;
margin: 0 auto;
width: 700px;
text-align: center;
float:left;
padding-top:63px;
padding-left:150px;
}

Irishjugg

11-10-2008, 05:53 PM

Wow, that fixed the main issue. Thanks a lot.

For my own sake, could you explain what the difference was, and/or why it worked better than what I was doing / why my method sucked so hard? I am really trying to learn all of this.

Also, any idea on why my cap images don't line up with the other parts of the horizontal menu, they do in FF, but again IE doesn't. If not, then thats cool, you have been a great help already.