I have some differences in IE7 [Archive]

bin-yasir

06-22-2009, 08:20 PM

hello ,
this is my first post here
I hope that I will have nice time with you

OK, about my problem
this is the CSS

body {
text-align: center;
background-image: url(pics/bg.jpg);
}

#container{
min-height: 100%;
width: 900px;
margin: 0 auto 20px auto;
}

#h {
position: relative;
margin-top: -70px;
}

#h h1 {

}

#header {
border: 2px solid red;
height: 100px;
margin: 0px;
padding: 0px;
}

#body {
border: 2px dashed blue;
height: 800px;
margin-top: 5px;
padding: 15px 10px;
}

#center {
border: 2px solid green;
height: 780px;
width: 630px;
margin: 0px 5px 15px 10px;
float: right;
}

#one {
float: right;
margin: 15px 5px 0px 0px;
width: 300px;
}

#two {
float: left;
margin: 15px 0px 0px 5px;
width: 300px;
}

#three {
margin-top: 20px;
float: right;
margin-right: 5px;
width: 300px;
}

#four {
margin-top: 20px;
float: left;
margin-left: 5px;
width: 300px;
}

#rcolumn {
float: left;
border: 2px solid purple;
width: 200px;
height : 770px;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
background-color: #FFFFFF;

}

#menu {
width: 200px;
text-align: left;
border-style: solid solid none solid;
border-width: 1px;
border-color: #94AA74;

}

#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#menu li a {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
background: transparent url(pics/arrowgreen.gif) 0 ;
height: 24px;
line-height: 24px;
display: block;
padding: 4px 0 4px 10px;
margin: 0px;

}

#menu li a:hover {
background-position: 100% -32px;
}

#menu #selected {
background-position: 100% -64px;
}

#login {
height: 110px;
border: 2px solid;
margin-top: 40px;
padding-top: 25px;

}

#login span{
font-weight: bold;
margin-right: 10px;
}

#login span.u {
margin-right: 6px;
margin-bottom: .2em;
}

#rcolumn img {
margin-top: 30px;

}

#footer {
margin-top: 15px;
height: 140px;
border: 1px dotted;
}

#footer img {
position: relative;
left: 0px;
top: 0px;
}

#by {
position: relative;
top: -50px;
left: 10px;
}

#by p {
font-size: 20px;
text-align: left;
}

The HTML

<!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>
<link rel="stylesheet" type="text/css" href="style.css">
<title>StyleSheet</title>

</head>

<body>

<div id="container">
<div id="header">
<img src="pics/footer_bg.jpg" width="900" height="100" alt="" />
</div>
<div id="h">
<h1>heading 1-heading 1-heading 1</h1>
</div>
<div id="body">
<div id="center">
<div id="one">
<h3>heading 3</h3>
<img src="pics/1.jpg" width="300" height="230" />
<p>Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="two">
<h3>heading 3</h3>
<img src="pics/2.jpg" width="300" height="230" />
<p>Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="three">
<h3>heading 3</h3>
<img src="pics/3.jpg" width="300" height="230" />
<p>Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="four">
<h3>heading 3</h3>
<img src="pics/4.jpg" width="300" height="230" />
<p>Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text</p>
</div>
</div>
<div id="rcolumn">
<div id="menu">
<ul>
<li><a href="#" id="selected" >Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<div id="login">
<span class="u">Username:</span><input name="" size="13"/><br /><br />
<span>Password:</span><input name="" type="password" size="13"/><br /><br />
<input type="button" name="" value="Login" />
</div>
<img src="pics/logo.jpg" width="190" height="170" alt="" />
<h2>heading 2</h2>
</div>
</div>

<div id="footer">
<img src="pics/footer-bg.jpg" height="140" width="900" />
<div id="by">
<p>Designed by: bin-yasir</p>
</div>
</div>
</div>
</body>

</html>

The Pictures

http://www.2shared.com/file/6412126/9e5704b0/pics.html

Secondly, The defferences

a) the footer in IE is more longer than it's in firefox
2) the space in the 2 textbox in IE is longer

How can I solve these problems