...

View Full Version : New to CSS--please check this out and tell me where I'm wrong :)



Ted Wiechelman
09-23-2004, 06:03 AM
I've been reading a little about CSS for the last day or two and I'm finally trying to get going but there is something here snagging me:
http://cumrusky.dreyermachine.com/help.jpg

You can obviously see the differences there, what's doing that and how do I fix it? Firebird is displaying it how I want, but IE seems to be doing something else...

This is the page for you to investigate:
http://cumrusky.dreyermachine.com/new

It's probably something really noobish but thanks for taking the time to help me. :thumbsup:

bradyj
09-23-2004, 06:18 AM
margin: 0 auto; does not fly for IE (one of many reasons why we dislike this browser), you may try:
http://bluerobot.com/web/css/center2.html

But if you still want to get IE to play with the margin auto correctly (IE 6 that is), you can do this:
http://bluerobot.com/web/css/center1.html

The only difference from that last one and yours is this:


body {
text-align:center;
}


But that will inherit, so remember that all the other text you pop in there, make sure you give it a new text-align property. :thumbsup:

bradyj
09-23-2004, 06:18 AM
oh, and welcome to the forums:)!

hemebond
09-23-2004, 06:46 AM
Well. I had a look at it, but I don't know what you're trying to achieve, so I can't really suggest anything.

Ted Wiechelman
09-23-2004, 02:57 PM
snip

Thanks brady, I'll that later. Did you notice how the text is in different positions also? Any reasons you can see for that?


Well. I had a look at it, but I don't know what you're trying to achieve, so I can't really suggest anything.

I just wanted #container to be centered

bradyj
09-23-2004, 06:33 PM
probably because IE handles box models differently -- it puts the padding 'inside' your defined width, not outside like everyone else. You can send stuff to IE and everyone else via CSS by doing:


#box {
width: 430px;
padding: 10px 20px 20px 10px;
}
html>body #box {
width: 400px;
padding: 10px 20px 20px 10px;
}


IE won't understand the last value, because it's not that advanced enough to know that all it saying is (in the html document, in the body area, with the id box...). So it'll take the top value, and skip the bottom one -- leaving you with a way to give values to IE and everyone else without causing a problem ;)

Off topic side note, you can make things easier on yourself by making your CSS shorthand, here's examples:


#container
{ background-color: transparent; background-image: url(img/container_bg.jpg); background-repeat: repeat-y; background-position: 0 0;}

Can be:


#container
{ background: transparent url(img/container_bg.jpg) repeat-y 0 0;}


And you can do the same things for padding and for fonts, I think you got the padding/margin down from what I see:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum