Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE problem with position relative

    Hello,

    I seem to have a small problem with IE. I have a site that is centered but there is 1 div that I have the position set to relative for a specific reason that is giving me some trouble. In IE it doesn't flow correctly when you resize the browser width. Only when you hit refresh that the specific div goes to its correct position. This happens both in IE6 and IE7. In Firefox it flows smoothly to its position when I resize the browser.

    You can check out the page here: demo page

    here is 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="base.css" type="text/css" />
    <title>Interprint</title>
    </head>

    <body>
    <div align="center"><div id="wrapper">
    <div id="head"><img src="images/top-yellow.png" width="596" height="84" alt="" /></div>
    <div id="logo"><img src="images/logo.png" width="80" height="141" alt="" /></div>
    <div id="menu">
    <table width="100&#37;" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td class="home"><a href="#"><span>home</span></a></td>
    <td class="services"><a href="#"><span>services</span></a></td>
    <td class="portfolio"><a href="#"><span>portfolio</span></a></td>
    <td class="quotations"><a href="#"><span>quotations</span></a></td>
    <td class="company"><a href="#"><span>company</span></a></td>
    </tr>
    </table>
    </div>
    <div id="main"></div>
    <div id="footer">
    <p>All rights reserved — Developed by: A Inc.</p>
    </div>
    </div></div>
    </body>
    </html>
    here is the css code:
    *{ margin:0; padding:0 }
    html {background:#FFF}

    body {
    background: url(images/bg.gif) repeat-y #FFF;
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    width:770px;
    margin:0 auto;
    text-align:center;
    }
    #wrapper{width:596px; margin:0 auto}
    #head, #logo, #menu, #main { display:inline-block }

    #head{ }
    #logo{ position:relative; float:left; top:-35px }

    #menu{
    float:left;
    background: url(images/bg_menu_right_border.gif) no-repeat top right #ADAFB2;
    width:515px;
    height:27px;
    margin-top:7px;
    text-align:left
    }
    #menu table{ width:380px }
    #menu td{ width:76px; height:27px }

    #menu a span { display:none }
    #menu a { display:block; width:76px; height:27px }

    td.home a { background-image:url(images/menu_home.gif); }
    td.services a { background-image:url(images/menu_services.gif); }
    td.portfolio a { background-image:url(images/menu_portfolio.gif); }
    td.quotations a { background-image:url(images/menu_quotations.gif); }
    td.company a { background-image:url(images/menu_company.gif); }

    td.home a:visited { background:url(images/menu_home.gif) no-repeat; display:block; width:76px; height:27px }
    td.services a:visited { background:url(images/menu_services.gif) no-repeat; display:block; width:76px; height:27px }
    td.portfolio a:visited { background:url(images/menu_portfolio.gif) no-repeat; display:block; width:76px; height:27px }
    td.quotations a:visited { background:url(images/menu_quotations.gif) no-repeat; display:block; width:76px; height:27px }
    td.company a:visited { background:url(images/menu_company.gif) no-repeat; display:block; width:76px; height:27px }

    td.home a:hover { background:url(images/menu_home_hover.gif) no-repeat; display:block; width:76px; height:27px }
    td.services a:hover { background:url(images/menu_services_hover.gif) no-repeat; display:block; width:76px; height:27px }
    td.portfolio a:hover { background:url(images/menu_portfolio_hover.gif) no-repeat; display:block; width:76px; height:27px }
    td.quotations a:hover { background:url(images/menu_quotations_hover.gif) no-repeat; display:block; width:76px; height:27px }
    td.company a:hover { background:url(images/menu_company_hover.gif) no-repeat; display:block; width:76px; height:27px }

    #footer{ font-size:65%; clear:both }
    Last edited by moleculezz; 02-20-2008 at 07:24 PM.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    if you dont mind me asking why dont you include the picture as a background image in your css like

    Code:
    #logo{ position:relative; float:left; top:-35px; background-image:url(path...); height:..; width:..; }
    i dont know if that would help correct it or not.

    also the top-35px did not end in an ";"

    i looked through alot of your css, and there are quite a few with an ";", its good practice to end all with them
    Last edited by jcdevelopment; 02-20-2008 at 07:34 PM. Reason: 2nd look

  • #3
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jcdevelopment View Post
    if you dont mind me asking why dont you include the picture as a background image in your css like

    Code:
    #logo{ position:relative; float:left; top:-35px; background-image:url(path...); height:..; width:..; }
    i dont know if that would help correct it or not.

    also the top-35px did not end in an ";"

    i looked through alot of your css, and there are quite a few with an ";", its good practice to end all with them
    Tried what you suggested but did not change anything.. thanks though.

    And for not having ";" after is fine.... the last property you don't have to put ";"

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, sorry it must some stupid IE glitch!! Ok, i was told once that it did matter but it was from someone whos wasnt that great of a teacher, haha!!


  •  

    Posting Permissions

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