Help with CSS borders?

Question

I made a website with div tags, and put borders onto certain edges. i can see the borders when i look at the design section of dreamweaver, but when i preview it in safari i can no longer see the borders. does anyone know why this is?

Answer 1

How did you define the widths and padding? Do you have surrounding divs? How do you define THEIR padding?

You'll really find it a help to do your debugging two ways. (Shortcut, always easier, no harm making it easy on yourself!)

One is, fetch a copy of Firefox, if for no other reason then JUST for the purpose of getting the Web Developer  add-on. There you can outline (visibly, on screen) your divs, and see how they interact. Handy. Saves me almost every time.

The other is, when you're playing around and previewing, strip out ALL css, then add one element at a time until you find the offending element. For each div, give it a temporary distinctive background-color, like #f00.

Good luck!

Answer 2

I agree with everything fjpoblam said in the answer above, especially about the Web Developer tool in Firefox...that thing has saved me on a number of occasions.

One of the issues I've found with borders in browsers using the Gecko engine (which I believe Safari users) is that it requires *specific* CSS calls on borders.

I've seen it occur that unless you explicitly privde a border size, style and color in the CSS properties for the class, it *might* not work.

Try something like this:

.your class {

    border: 1px solid #00

}

Just make sure you have all three, and not in any particular order. See if that makes them appear.

Answer 3

For borders, whether set with an external style sheet, embedded or inline styling, you need to set the border size, style and color regardless of browser used:

border: XXpx style color;

See:

http://www.w3schools.com/css/css_border....

http://www.yourhtmlsource.com/stylesheet... (I don't agree with some of their non-standard CSS code)

Ron