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

Speed · 16 Jan 2006 at 13:31

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:

Code:

 #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

thesubstitute · 17 Jan 2006 at 17:33

The syntax for the border should be:

border-bottom: 1px solid black;

Try and see if that makes a difference?

Speed · 17 Jan 2006 at 18:03

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

Either way I always thought it was suposed to be:

Code:

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

Johnny · 17 Jan 2006 at 18:22

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 :rolleyes:

thesubstitute · 17 Jan 2006 at 18:32

Johnny said:
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

I was told that MS has no intension of changing css support (although I did read about the * html "bug resolved" / "hack disabled") because they're waiting for css3, though that was when IE7 was first announced to be released early, dunno if they've changed their mind since then.

Speed · 17 Jan 2006 at 18:34

Johnny said:
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.

thesubstitute · 17 Jan 2006 at 18:49

Speed said:
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.

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

Augmented · 17 Jan 2006 at 19:18

thesubstitute said:
I was told that MS has no intension of changing css support (although I did read about the * html "bug resolved" / "hack disabled") because they're waiting for css3, though that was when IE7 was first announced to be released early, dunno if they've changed their mind since then.

There'll likely be full CSS 2 support. The missing selectors and pseudo-classes have been implemented at least

. * html will be gone in strict mode.

robmiller · 17 Jan 2006 at 19:21

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

Either way I always thought it was suposed to be:

Code:

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

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

Code:

1px solid black

Code:

#f00 1em dashed

and

Code:

dotted #fef5fc 1%

will work.

Speed · 17 Jan 2006 at 20:29

thesubstitute said:
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. :confused:

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

Code:

1px solid black

Code:

#f00 1em dashed

and

Code:

dotted #fef5fc 1%

will work.

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