SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Budapest, Hungary
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question could anyone possibly help me why this thing doesn't work in IE?

    hi, my problem would be that in Firefox the page displays perfectly while IE (6.0) slides the above picture slightly left and i just can't figure why.

    the site

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that ie rounds elements in the body at a different rate to the rest for some annoying reson. If you resize your page slowly you will see that the page jogs in and out one pixel at a time.

    The best solution is to repeat the background on another element other that the body. Your #page would be a suitable candidate.

    e.g.
    Code:
    html, body
     {
     margin: 0;
     border: 0;
     background:#3F4859;
     }
    #page
     {
     min-height: 100%;
     width: 748px;
     background: #3F4859 url(http://filmbuzi.freeblog.hu/Files/teszt/bg3.png) repeat-y;
     background-position: center;
     margin: auto;
     position: relative;
     }
    * html #page {height:100%}/* for ie only*/
    That shoul allow it to resize without the jogging effect.

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I've just noticed an error that will stop mozilla working if you use the method I mentioned above.

    Code:
    #maincontent
     {
     margin-top:15px;
     width: 528px;
     min-height: 50px;
     float: right;
     }
    * html #maincontent {height:50px}
    You had the maincontent set to 50px only so thats all you would get in mozilla.

    You will also need to add this to the css to make 100% work in mozilla etc.

    Code:
    /* commented backslash mac hiding hack  \*/ 
    html,body {height:100%;} 
    /* end hack */ 
     
    .clearer {
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    and then one change in the html here:

    Code:
    	  <a href="http://browsehappy.com/" title="Browse Happy: Switch to a safer browser today"><img src="http://filmbuzi.freeblog.hu/Files/te...50x40_anim.gif" alt="" height="40" width="150"></a><br>
    	</div>
      </div>
    <br class="clearer" />
    </div>
    </body>
    </html>
    That should sort mozilla out as well.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Budapest, Hungary
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh man, how can i thank you?


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
  •