Advanced Search

Results 1 to 2 of 2

Thread: I have some differences in IE7

  1. #1
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I have some differences in IE7

    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

  2. #2
    Join Date
    Jun 2009
    Location
    Laputa
    Posts
    43
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Solution:
    in your html head tag, after everything else, add in the following text:
    <!--[if IE>
    <style type="text/css">
    @import url(ie.css);
    </style>
    <![endif]-->

    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.

Bookmarks

Posting Permissions

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