"border-bottom" works in Safari, not Firefox

Forum Moderators: not2easy

Message Too Old, No Replies

"border-bottom" works in Safari, not Firefox

css borders in Mac browsers

scotisle

10:27 pm on Jan 24, 2010 (gmt 0)

I'm trying to make a bottom border that works in both Mac Safari and Mac Firefox (I don't have a PC to test the site.)

My CSS:

body {

background: url(images/background.jpg);

background-repeat: repeat-x;

border-bottom: 8px solid #FF9900;

margin: 0px;

width:100%

height:100%

My HTML:

<body onLoad="MM_preloadImages('images/about-r.gif','images/faq-r.gif','images/survey-r.gif','images/getinvolved-r.gif','images/donate-r.gif','images/join-r.gif','images/jobs-r.gif')">
<div>

The CSS/HTML was generated originally in Adobe CS4, but I've moved it around to try to get it to work and added the "border-bottom 8px" code. This works in Safari but not in Firefox. I've played with it for two days and I'm afraid as a newbie CSS editor I don't understand what's wrong. I think it's the order in which the CSS happens but I'm not sure.

Would anyone have a suggestion about how to make this seemingly simple line work across browsers?

Thank you so much!

limbo

11:10 am on Jan 25, 2010 (gmt 0)

HI Scotisle.

Welcome to WebmasterWorld :)

Are your stylesheets and HTML valid? I suspect there might be some errors - I can see one already.

Width:100% - should have a following semi-colon e.g:

width:100%;

Height:100%; might also cause you some issues as browser support is very mixed for this attribute. Especially in IE.

scotisle

12:17 pm on Jan 25, 2010 (gmt 0)

Thanks for those tips. I was able to get it to work by switching the code from "body" to a new class called "frame." If people want, I can post the code that worked, but I'm not sure about the rules for posting, so I'll wait until someone asks.

penders

12:45 pm on Jan 25, 2010 (gmt 0)

It's OK to post your code snippets - it's just links to your own test pages that are not allowed.