CSS Layout Problems - Firefox vs IE6... Help Please!

[Speed]

Hello,

I've recently been learning (X)HTML and CSS so I decided it was about time I tried to create a proper site. My sister wanted one done for Sims 2, so I started coding, however after only a few hours I kept running into problems. It seemed no matter what tried I just could not got Firefox and IE6 to do the same things, there were also lots of what seemed like browser specific problems. So I'm really in need of some help.

www.perfect-petz.co.uk/oldindex.html

Here is an example:

This is what I would like:

 #topbanner
{
height: 100px;
[B]border-bottom: solid 1px #000;[/B]
background-color: #75A1D0;
text-align: center;
}

However Firefox doesn't like the border-bottom part and so makes the height for the whole top banner quite a bit bigger than IE6. The problem is solved by removing "-bottom" and strangely the banners are now the same size. I cannot honestly see how removing a 1px line from three sides could cause such a big change in the top banners height.

While we are on the subject, does anyone know if IE6 has the same box model bug that IE5 has? You know where the border and padding properties appearing as part of the width, instead of being added to it. If so, what's the best work around?

Moving on, another somewhat strange thing is to do with the right hand menu column. If you look at it in IE you can see that there is a 1 or 2px white line running down the right hand edge of the browser. It starts from the end of the top banner and ends at the start of the footer. This is not present in Firefox. Is it something I've done wrong or another bug?

There are more, but for now I'd like to see if anyone can help me out with those.

Thanks in advance,

Regards,

Mark

 

[Speed]

Well the problem seems to have gone away without me changing anything, strange that.

Either way I always thought it was suposed to be:

border: 1px solid #000000;

Size, Type and Colour. I did however only start using that setup recently so I guess I didn't start on that page.

I've now restarted however, so any advice, feedback etc on that would be helpful

www.perfect-petz.co.uk

 

[Speed]

Go to this site:
http://www.w3schools.com/css/default.asp

Gives you all the standards. Great for learning CSS/HTML/XML etc etc.

You will have problems with CSS trying to get IE and Firefox to do the same because IE doesn't support CSS very well at all. Although this is suppose to change with IE7 we will have to see

Thanks for the link, I have however already gone through that along with other tutorials. There are somethings that tutorials, guides and code databases just can't help you with. Hence the post.

 

[Speed]

http://www.w3schools.com/css/css_reference.asp

Yes I've seen that and checked it, but not sure how it could have helped in this case.

Any order, and you can use hex colours or colour names.

1px solid black

#f00 1em dashed

and

dotted #fef5fc 1%

will work.

Indeed, any order would work, however I was told that "Size, Type and Colour" might help resolve any bugs.