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 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question My first CSS design...and what am I doing wrong?

    Hi guys,

    I have always used tables to build my designs and this is the first time that I have decided to try my hands at CSS. I have no formal training whatsoever and just decided to give it a shot yesterday. I have made a design (only partly finished) that looks the way I want it to look in IE6 but somehow the design breaks in Firefox 2.0 and Netscape 7.1.

    Basically I want the header to stick to the top of the screen but somehow despite specifying a margin of 0 both in CSS and HTML, the header doesn't stay at the top in FF and NS. Furthermore, with no apparent reason the box on the top right hand side is not properly aligned in FF and NS. Everything looks as intended in IE6.

    Can you please have a look at my page HEREand tell me what I'm doing wrong and how to amend the code so that the page displays the same in all browsers. All CSS is inline.

    Thanks.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Actually the design looks right in FF and 'breaks' in IE because IE does not display CSS the correct way.

    In your CSS try starting with:

    html {
    padding :0;
    margin: 0;
    }

    body {
    padding :0;
    margin: 0;
    }

    I would also encourage you to venture away from absolutely positioned elements. I don't use them myself and find things a lot easier to use either relative positioning or using margins and floats? I'd suggest trying that??
    Last edited by ahallicks; 12-06-2006 at 12:32 PM.

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That's strange...here it displays fine in IE6 but breaks in FF and NS. Are you using the same versions of the browsers as I do. I added your codes to mine but it still displays the same way in FF.

    As I've only used CSS before to set the font and body colours could you show me how you would design the page using your technique or alternatively could you point me to a tut for beginners.

    Thanks

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in your header css add

    Code:
    top: -18px;
    I've tryed this and it works.

    No idea why it happens in the 1st place.

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry, just to add. the -18PX works in FF, i've not tested it on IE.

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Code:
    html {
    padding: 0;
    margin: 0;
    }
    
    body {
    padding: 0;
    margin: 0;
    }
    
    #wrapper {
    margin: 0 auto;
    width: (whatever);
    height: auto;
    }
    
    #header {
    background-image: (blah)
    width: (blah);
    height: (blah);
    float: left;
    }
    
    #contenta {
    background-image: (blah)
    width: (blah);
    height: (blah);
    float: left;
    }
    
    #footer {
    background-image: (blah)
    width: (blah);
    height: (blah);
    float: left;
    }
    You get the idea. Put the images and whatever else you need in like that. Then your HTML would be the same but everything should be wrapped by the wrapper:

    <body>
    <wrapper>

    Content divs

    </wrapper>
    </body>
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fullwebservice View Post
    in your header css add

    Code:
    top: -18px;
    I've tryed this and it works.

    No idea why it happens in the 1st place.
    It works fine in FF but put the header off the screen by 18px in IE

  • #8
    Regular Coder
    Join Date
    May 2006
    Posts
    128
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    Code:
    html {
    padding: 0;
    margin: 0;
    }
    
    body {
    padding: 0;
    margin: 0;
    }
    
    #wrapper {
    margin: 0 auto;
    width: (whatever);
    height: auto;
    }
    
    #header {
    background-image: (blah)
    width: (blah);
    height: (blah);
    float: left;
    }
    
    #contenta {
    background-image: (blah)
    width: (blah);
    height: (blah);
    float: left;
    }
    
    #footer {
    background-image: (blah)
    width: (blah);
    height: (blah);
    float: left;
    }
    You get the idea. Put the images and whatever else you need in like that. Then your HTML would be the same but everything should be wrapped by the wrapper:

    <body>
    <wrapper>

    Content divs

    </wrapper>
    </body>
    Thanks for your help. This works fine in both IE and FF. Can you tell me why despite using topmargin=0 and marginheight=0, there was still a margin left in FF? Shouldn't marginheight have taken care of that?

    I don't think that I would have been able to design the layout I wanted using tables and can definitely see the design possibilities that CSS has to offer. Is there a good book for beginners or a tutorial website you could recommend to me. I definitely want to know more about CSS. Thanks.


  •  

    Posting Permissions

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