homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

Blue table border appears purple in Firefox
Appears blue in IE and Safari

 11:52 pm on Jun 21, 2007 (gmt 0)

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?




 12:57 am on Jun 22, 2007 (gmt 0)

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].


 1:52 am on Jun 22, 2007 (gmt 0)

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?


 2:24 am on Jun 22, 2007 (gmt 0)

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) ...


 8:19 am on Jun 22, 2007 (gmt 0)

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]


 8:17 pm on Jun 22, 2007 (gmt 0)

ClearType is of course what I meant, not TrueType! Opps! :(


 8:39 pm on Jun 22, 2007 (gmt 0)

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.


 2:08 am on Jun 24, 2007 (gmt 0)

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".



 4:59 am on Jun 24, 2007 (gmt 0)

Add the border to the image itself?


 8:05 pm on Jun 24, 2007 (gmt 0)

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?


 11:48 pm on Jun 25, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved