Positioning/Margin Not Showing Correctly On All Computers

Discussion in 'CSS' started by tlshaheen, Aug 22, 2009.

  1. #1
    http://redgundesign.shaheenwebdesign.com
    Username: access
    Password: 123456

    The problem is the absolute positioning of the Title and Menu, and the margins of the first paragraph. On 4 out of the 5 computers I've tested it on, its shown properly (In Firefox, yes I know I need to fix the paragraph for IE.) But on the one computer, even in Firefox, the Title, Menu, and margins of the first paragraph are way off, and I can't figure out why. I've tried doing it in px, em, and currently its in percent, which has been the closest so far. But why is it not showing up perfect?

    This is what its supposed to look like:
    http://i27.tinypic.com/9ihfza.jpg

    This is what it shows up as on the 1 computer:
    http://i28.tinypic.com/swwu49.jpg

    Help please! Thank you :)
     
    tlshaheen, Aug 22, 2009 IP
  2. Rasczak

    Rasczak Peon

    Messages:
    131
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    kinda messed-up HTML... many errors and non-semantic hierarchy
    try fixing that first and then i give you few advices:

    - if you have to position something, don't use margins - stick to position:absolute, especially when applying JS effects to the underlying content

    - if you are somehow forced to use margins, avoid the -bottom margining as much as you can, it's not cross-browser reliable

    regarding your layout, i would suggest following:

    1) header: full width, position relative, fixed height (with overflow:hidden), contains absolute positioned clickable logo, h1 title and the navigation

    2) content: full width, no positioning, no extra styles (except padding maybe)

    2.1) the "guns" screen: set width & height, position:relative, below the paragraph, div with cycling photos would be positioned absolutely, the same with the description text, the same with the "playlist" to the right - all three containers should be positioned absolutely to avoid problems in IE...

    3) other content... footer, etc. - also full width, no positioning

    I hope you'll find this useful.

    Cheers.
     
    Rasczak, Aug 26, 2009 IP