SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1 pixel problem. Help! Urgent!

    Someone please help. I can't get the bg tile image to line up with the banner and menu on the site that I'm designing. When I get it right on PC (firefox/IE) it's one pixel off on Mac (Firefox/Safari) and when it's right on Mac, it's one pixel off on PC. What gives?

    http://bjerkewebdesign.com/aspenair/products.html



    Bjerke Web Design
    http://bjerkewebdesign.com

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Does this work?
    Code:
    body {
    	text-align:center;
    	background: #F3F3F4 url(http://bjerkewebdesign.com/aspenair/img/bg_tile.jpg) repeat-x 0 -1px;
    	padding-bottom:15px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Hi,

    Does this work?
    Code:
    body {
    	text-align:center;
    	background: #F3F3F4 url(http://bjerkewebdesign.com/aspenair/img/bg_tile.jpg) repeat-x 0 -1px;
    	padding-bottom:15px;
    }
    That fixes IE/Firefox PC but is 1px too high on Mac Firefox/Safari
    Bjerke Web Design
    http://bjerkewebdesign.com

  4. #4
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you haven't declared the width on the image, perhaps that's triggering a browser bug?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    you haven't declared the width on the image, perhaps that's triggering a browser bug?
    Nope... just tried that. Anyone have any ideas. I really need to get this fixed today.
    Bjerke Web Design
    http://bjerkewebdesign.com

  6. #6
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you made all your body margins 0 when you started?

    eg

    body {
    padding:0;
    margin:0;
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deelunn View Post
    have you made all your body margins 0 when you started?

    eg

    body {
    padding:0;
    margin:0;
    }
    I already have

    Code:
    * {
    padding:0px;
    margin:0px;
    }
    Any ideas on why it seems to be more of a platform issue and less of a browser issue?
    Bjerke Web Design
    http://bjerkewebdesign.com

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    If you increase the font in the browser the layout breaks - it means your design requires pixel perfect consistency of the font-size for the lines to meet up properly.. This is why it's different in other browsers.

    Edit: ok all you really need to do is make your logo img display: block; it's an inline element at the moment and comes with it's own line-height etc..
    Code:
    #logo img  {
      float:left;
    }
    Floating an element makes it block level

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Hi,

    If you increase the font in the browser the layout breaks - it means your design requires pixel perfect consistency of the font-size for the lines to meet up properly.. This is why it's different in other browsers.

    Edit: ok all you really need to do is make your logo img display: block; it's an inline element at the moment and comes with it's own line-height etc..
    Code:
    #logo img  {
      float:left;
    }
    Floating an element makes it block level
    Thank you. Thank you. Thank you. Worked like a charm. I hate little things like that.
    Bjerke Web Design
    http://bjerkewebdesign.com

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    I love little things like that - they're easy to fix.. It's the big problems that I hate Glad it worked out.


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
  •