Blue table border appears purple in Firefox

Appears blue in IE and Safari

[LABachlr]

This is a very simple question. I am working on a webpage that has advertising copy in it, and the client wants a blue border around the entire copy. So, I sent the border for the table to be "blue". In IE and Safari, it looks great, but in Firefox, it looks purple. How do I fix this?

Also, is there a way to make the border a solid line vs. a thick line and very thin line?

TIA

[DrDoc]

You can style it any way you want, using CSS.

table { 
  border: 1px solid #0000cc; 
}

The first determines the border width. It can either be a unit, such as px or em; or a keyword, such as thin or medium.

The second tells us which type. It can be solid, double, dotted, dashed, inset, outset, ridge, etc.

The third, finally, is the color. While you can use keywords here (such as red, blue, gree, etc) it is generally advised to use an RGB hex code, such as the one above.

If you need to, you can play with various settings here [w3schools.com].

[LABachlr]

Great! Thanks. That fixed it.

Now, I have another question. Why do the fonts Impact and Georgia look so much better on a Mac and in Safari for Windows?

Here are the styles that Dreamweaver created as I was creating the page:

v.style1 {
font-family: Impact, sans-serif;
font-style: italic;
font-size: 18px;
}
.style2 {
font-family: Impact, sans-serif;
font-size: 24px;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 16px;
}
.style5 {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.style7 {
font-family: Impact, sans-serif;
font-size: 20px;
}
.style8 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 17px;
}
.style13 {font-family: Impact, sans-serif; font-size: 21px; }
.style14 {
font-size: 24px;
font-weight: bold;
}
.style15 {font-size: 21px}
.style16 {font-size: 25px}
.style17 {font-family: Impact, sans-serif; font-size: 25px; }
.style18 {
font-size: 16px;
font-weight: bold;
}
.style19 {font-family: Georgia, "Times New Roman", Times, serif}
.style20 {font-size: 17px}
.style22 {font-family: "Times New Roman", Times, serif; font-size: 17px; }
.style24 {font-family: "Times New Roman", Times, serif; font-size: 18px; }

It looks great on a Mac or in Safari, but very jagged on a PC.

Any ideas?

[DrDoc]

Perhaps you do not have TrueType turned on on your PC?

The smoothness of fonts depend on a variety of things -- quality of font (vector vs. bitmap), the graphics settings on your computer (color depth, TrueType, etc) ...

[Xapti]

There's also two settings on PC Windows XP (and other versions) with fonts. One is "Smooth edges of screen fonts" I think it's called; the other is Clear type enabling (I think they are different).

It also depends what resolution, what DPI, and what kind of monitor you have. Macs have special Monitors, and they have a different DPI setting.

[edited by: Xapti at 8:21 am (utc) on June 22, 2007]

[DrDoc]

<added>
ClearType is of course what I meant, not TrueType! Opps! :(
</added>

[LABachlr]

OK. Maybe it's because I'm looking at it with my Toshiba laptop.

Btw, with my Macbook, I'm doing the dual display thing, and it looks great both on my Macbook screen and the Samsung CRT monitor that I am using.

[LABachlr]

I just made an HTML email with Constant Contact that was identical to the page, and it shows up great in email software, but not so great in web mail services like gmail.

I'm guessing it's because gmail does not have some of the font that is in the email, and it also can't handle CSS. I tried using "bordercolor" instead of CSS, and it showed up as gray. I used both "blue" and "#0000FF".

Advice?

[tedster]

Add the border to the image itself?

[LABachlr]

It's not an image. It's all HTML coding. There is no image in it at all. Is there a way to do this without creating an image for the whole thing?

[lavazza]

rather than bordercolor:#0000FF;

maybe it's worth trying this syntax:

border-top:20px solid #FF0000;
border-right:20px dotted #00FF00;
border-bottom:20px dashed #0000FF;
border-left:20px groove #336699;

then you can play with the colours, the px settings and the edge-types:
solid, dotted, dashed, double, groove, ridge, inset and outset