Welcome to WebmasterWorld Guest from 54.224.230.193

Forum Moderators: incrediBILL

Message Too Old, No Replies

Blue table border appears purple in Firefox

Appears blue in IE and Safari

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

Full Member

10+ Year Member

joined:Jan 15, 2003
posts:266
votes: 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?

TIA

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

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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 June 22, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Jan 15, 2003
posts: 266
votes: 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 June 22, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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 June 22, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 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 June 22, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


<added>
ClearType is of course what I meant, not TrueType! Opps! :(
</added>
8:39 pm on June 22, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Jan 15, 2003
posts: 266
votes: 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 June 24, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Jan 15, 2003
posts: 266
votes: 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".

Advice?

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

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Add the border to the image itself?
8:05 pm on June 24, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Jan 15, 2003
posts: 266
votes: 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 June 25, 2007 (gmt 0)

Preferred Member

5+ Year Member

joined:May 29, 2007
posts:578
votes: 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