I have some differences in IE7

**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

Code:

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

Code:

<!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

**C55inator** · 06-23-2009, 11:12 PM

Solution:
in your html head tag, after everything else, add in the following text:


then, create a seperate stylesheet called ie.css, which contains modified width values for the footer & textbox.

This technique is called conditional commenting.

Oh, and once you've done that, pray that IE will die, and CSS can actually be used with impunity.

Thread: I have some differences in IE7

Thread Tools

Search Thread

I have some differences in IE7

Bookmarks

Bookmarks

Posting Permissions