...

View Full Version : My first CSS design...and what am I doing wrong?



forgottenglory
12-06-2006, 11:21 AM
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 HERE (http://www.forgottenglory.com/bb/test2.html)and 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.

ahallicks
12-06-2006, 11:28 AM
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??

forgottenglory
12-06-2006, 12:24 PM
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

Fullwebservice
12-06-2006, 01:53 PM
in your header css add



top: -18px;


I've tryed this and it works.

No idea why it happens in the 1st place.

Fullwebservice
12-06-2006, 01:54 PM
sorry, just to add. the -18PX works in FF, i've not tested it on IE.

ahallicks
12-06-2006, 02:08 PM
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>

forgottenglory
12-07-2006, 12:02 PM
in your header css add



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

forgottenglory
12-07-2006, 12:06 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum