What named colors work in all browsers?

Mandarin Color Charting

We tested the named colors in a few browsers including IE, Mozilla, and Netscape. They all work fine. Now when we make a box we can use the color name.

Copy and paste (or type) this in your Blog or Web page.

<div style="width:2in;
background-color:pink;border:1px solid black;">
A PINK BOX
</div> 

It will look like this.

See the updated Mandarin Color Charts for more tested named colors, the browser-safe hexadecimal color codes, and the 16 named colors that are guaranteed to work in all browsers. The corresponding hex code is included for serious developers who work in shops that require using the hex code rather than the color name.

More box copy-and-paste code is here.

Float Text Right

Copy and paste (or type) this CSS styled code in your Blog or Web page.

 
<SPAN style="font:18pt;float:right;color:brown;
padding:10px;">
Floating Text
</SPAN>
Your text goes here. Continue 
to type and see how it appears.

It will look like this.

Two Images One Dotted Border

Jockey: Ray Goodrich
Horse: Blue Starr
Owner: Edward Lee

Using the DIV Tag

<div style="width:200px;text-align:left;
padding:10px;background-color:#CC9;
border:2px dotted black;font-size:12px;">

YOUR IMAGE OR TEXT GOES HERE

</div>

The DIV works well as a container for a block of inline STYLE.

Two Images
We have two images, each 100 pixels wide.

Two Pixel Dotted Border
We like the 2 pixel dotted border. We don't actually see the dotted border on this browser when it is defined as 1 pixel. Instead, we see the substituted solid border. Some browsers will substitute the dashed border for the dotted border.

Padding 10px
The Padding 10px lets the Background color #CC9 show through.

Copy and paste (or type) this into your Blog or Web page.

<div style="width:200px;text-align:left;
padding:10px;background-color:#CC9;
border:2px dotted black;font-size:12px;">

YOUR IMAGES OR TEXT GO HERE

</div>

It will look like this.

You can put the DIV code all on one line.

Do you see the dotted border?

We've noticed that some browsers render a dashed border instead of a dotted border. If the dotted border is defined as 2 pixels it will display as a dotted border on most browsers. Do you see the dotted border?

Overheard: Brian is a writer, not a linker.

Paynter does Rageboy

TIME NOBEL PRIZE for Blogging fp does Rageboy ........

"We are not schizophrenic"
Rageboy

With that simple phrase, from the revealing interview of
Rageboy by Frank Paynter, the world fell in love with Rageboy.

Time Magazine Template

Open this window for the Time Magazine copy-and-paste code.

Our style sheet validates as CSS. It doesn't work as intended in Mozilla.

How do you Float your Boat?

Float Image Left

Copy and paste (or type) this in your Blog or Web page.

BEGIN YOUR TEXT HERE 

<span style="float:left;padding:15px;">
<img src="boat.gif" 
width="100" height="77">
</span>

AND PUT THE REST OF YOUR TEXT HERE 
If you are using a blogging
tool you may want to put the SPAN tag 
all on one line so that the tool doesn't 
insert a line break. And don't forget to 
include the image width and height. 

1. Span Without Padding

SPAN

We don't like the text aligned next to the image. But, we can float our boat image to the left of our text using the <span style="float:left;"> without any padding. It isn't visually appealing in this example but it works well when an image is already surrounded with space.

Some graphic artists build spacing around the image just so that it can float or be displayed with built-in whitespace.

Copy and paste (or type) this in your Blog or Web page.

<span style="float:left;"><img src="boat.gif"></span>

2. IMG without HSPACE

IMG

We don't like the text aligned next to the image. But, we can float our boat image to the left of our text by adding the ALIGN="LEFT" in the IMG tag. We are typing just enough here to get the text to wrap so that you can see the alignment in action.

Copy and paste (or type) this in your Blog or Web page.

<img src="boat.gif" align="left"  >

wait...there's more

3. IMG With HSPACE

Add HSPACE to IMG

We like padding next to the image. We are using HSPACE="15" here. Most sites prefer 10. We increase the amount of padding depending upon the size of the image or what we think looks better. There is no rule.

Copy and paste (or type) this in your Blog or Web page.

<img src="boat.gif" align="left" hspace="15">

4. SPAN With Padding

Add PADDING to SPAN

We like padding next to the image. We are using a 15px padding here. Most sites prefer padding:10px. We increase the amount of padding depending upon the size of the image or what we think looks better. There is no rule.

Copy and paste (or type) this in your Blog or Web page.

<span style="float:left;padding:15px;">
<img src="boat.gif" width="100" height="77">
</span>

Which one works best in your browser?

Do you use SPAN with FLOAT:LEFT or ALIGN=LEFT to float your image?

Web site loading too fast?

Technorati with Pictures?

Scroll down in our Technorati until you see Liz Lawley's picture.

How did she do that?

Note: Anita just answered that question.

You fill out a form for a Technorati profile and include a pic.

Image 40 x 60
The image you submit will be displayed with dimensions defined as width="40" and height="60" (I don't think they tell you that). You might want to submit an image that is already sized 40 x 60 so that the sizing by changing dimensions doesn't clobber it.

Thanks Anita. Maybe we can get some good images for Technorati. Start a "t" series of images that are 40 x 60. Something like this, where the images are named T1.jpg, T2.jpg, and T3.jpg.

   

Mandarin Quigi Board

Click where the mouse lands...

Click where the mouse lands...

Your turn. Click any icon. Tell us what you find.

American Chopper

Mandarin Rob wants a custom softail from Orange County Choppers (an awesome Flash site), better known as American Chopper. That's all he wants for his birthday. And do you think we can find the order form?

Fine, we'll try Speedgear and get a new Senna T-shirt instead (we order them by the dozen). Everyone thinks he has only one shirt, he actually has a drawer full of the identical shirt.

The sky is still falling and Netscape may not survive. AOL laid off the Netscape development staff. Bye-bye. As of last month Internet Explorer had nearly 95% of the browser market. Netscape, Apple Computer 's Safari, Opera, and others share the remaining 5%.

But, whose counting? If you see us coming in you may detect a Netscape browser. An hour later we may be using IE. We're fickle.

DON'T TRYTHIS FROM HOME

Stephen Downe's referrers script was down over the weekend. It's that one-line of code that you insert to make the referrer script display. It actually points to and runs on someone else's server.

You notice the slowdown when comments are down or if you are using a site counter, right? Well, with all three running we have a lot of dependency on other servers.

Server Down
The referrer script server appeared to be down for part of the weekend. That would make a site running the script load slow (very slow).

Solution
We removed the one-line script from Mandarin. We also remove the Haloscan comments script when it goes down. And, we don't usually keep a site counter or site meter running. We turn them back on by putting the code back in place once we know they are up and running smooth. All three are running fine today.

Other resources for link feedbacks are here and here. Do you know of others?

SILVERSTONEBRITISHGRAND PRIX
F1 Sunday

Who won?

A Dotted Box

Copy and paste (or type) this in your Blog or Web page.

<DIV align="center"> 
<div style="width:300px;border: dotted 2px black;
text-align:left;background-color:#FFD700;padding:10px;"> 

<b>In the points</b> 
<br>
 1  Rubens Barrichello Ferrari  
 2  Juan Pablo Montoya Williams-BMW  
 3  Kimi R�ikk�nen  McLaren-Mercedes  
 4  Michael Schumacher Ferrari 
 5  David Coulthard McLaren-Mercedes   
 6  Jarno Trulli Renault 
 7  Cristiano da Matta Toyota   
 8  Jenson Button BAR-Honda 

</div> 
</DIV> 

Put the <div> on one line. It will look like this.

Boxes
Open this window for easy copy-and-paste dotted boxes.

Colors
We cruised over to the color chart to get the hexidecimal color code for gold. It's #FFD700 . We'll use the hexidecimal code #FFD700 for the background color in the box. Why? A browser that doesn't recognize a named color will replace the color gold with black.

Listening to:HO'ONU'A Have a Good Time
Rob picked up this CD in Hawaii Thursday, a one-day work trip. Flights are direct from Sacramento now on Hawaiian Air.

Rob's Thumb

Clickable Thumbnail

Go ahead. You have to click it. Didn't Slake do a thumbnail something like this? And speaking of Slake (Gary Turner), what happened to our post of the infamous fire escape?

We just noticed that we lost it. So many mistakes, so little time.

Thumbnails the easy way

The code looks like this.

<a href="images/robsthumbbig.jpg">
<img src="images/robsthumbsmall.jpg" border=0"black">
</a> 

Here we hyperlink the
small image robsthumbsmall.jpg
so that when it is clicked you see the
larger image robsthumbbig.jpg

Validate your Links, HTML, and CSS

Try to get through just one of the three checks without an error.

Brag here
|
|
|
V

hOw yoUSAy ThaT?

Rieke from Indonesia prefers images over words and we visit her blog to see her use of headlines, images, and brief posts. To her mother who has passed on she wrote this one day.

Rieke says
------------------------------------
Mother, don't worry, I'm fine
Promise to see you next summer
This time there'll be no delay
Mother, how are you today


I found the night of my dream
Next time you will get to know him
Many things happened while I was away
Mother, how are you today


Mother, how are you today
Here is a note from your daughter
With me everything is OK
Mother, how are you today


Many things happened while I was away
Mother, how are you today


Mother, how are you today
----------------------------

Sometimes words are worth a thousand pictures.

Happy Friday!

Huh? Blogger lost the end of our template.

Is that what happened to Gary and Karina? No posts since the blogger fiasco.

CSS Styled Text Instead of Graphics

CSS Text: Shadow Filter and Span

The Happy Friday! is HTML text with the CSS Shadow filter applied. Copy and paste (or type) this code in your Blog or Web page.

 
<table width="300" style="filter:SHADOW">
<tr>
<td>
<span style="font-family: Arial Black; 
                    font-size:32px; 
                   color: red;">
Happy Friday!

</span>
</td>
</tr>
</table>

It will look like this.

Open the FAQ window to see more Shadow Filter and Glow Filter copy and paste code. And have a great weekend!

Fun Web Tricks

Float Image Right

One line of SPAN code...

CSS SPAN
SPAN is inline style that you type directly in the BODY of your HTML of your Blog or Web page. For example, if you were entering a new post in your blog you would use the SPAN tag directly in the post.

Copy and paste (or type) this into your blog or web page.

<span style="float:right;"><img src="girl.jpg"></span>

You can add more attributes to either the SPAN tag or the IMG tag.

SPAN is not used in the HEAD section or in the External Style Sheet.

Quick Test (works on BlogSpot!)
For a quick test, copy and paste this code. The image is stored on our server so you will instantly see the results without hunting for an image.

<span style="float:right;">
<img 
src="http://www.mandarindesign.com/girl.jpg">
</span>
This is inline style using the SPAN tag. 
It should work fine in your blog.
Just change the image to your image
and your words. Ah, now didn't that 
work easy? Now, just 
insert your image and words. 

Weblog Tools
Don't hit the Enter key inside the line of code. Try to spread it on one line if you can. Most of you have a setting that automatically inserts a line break <br>.

The line break <br> can muck with the code you are inserting.

Custom Image Float
For more detailed floating of images open this window.

"Humor is a funny thing"

BaloneyDude

Copy-and-Paste CSS Style
for Stephen Downes's Referrer Script

Stephen's referral script
This referral script is the best quick-and-dirty one liner on the Web. It's one line of code that you simply insert in your Blog or Web site.

Put the one line of code in your Blog or Web page and you instantly see something like this.

Truncated Version
Actually, this looks slightly different than the default. That's our live CSS tamed and truncated version. It's still just the one line of code, we just wrapped some Inline CSS Style around it.

Long URLs
Some Blogs and Web sites have long URLs that can span multiple lines. The long URLs can cause the list to take up more space than you planned for and spread too wide.

Taming the Results with CSS
Due to the long URLs and Page Titles, we need to tame the results of the script. We do it with a little CSS. Here's the Easy Copy-and-Paste CSS Style for Stephen Downes's referrer JavaScript

 
Mandarin is 
<a href="http://www.mandarindesign.com/refer.html">
 tweaking the CSS </a> 
 for Stephen Downes's referrer JavaScript.

Field of Wild Sunflowers

Our Backyard: West Sacramento, California

Click the Thumbnail to see the bee.

Karina likes sunflowers. This evening we walked to the end of our road to snap a few pictures of the wild sunflowers for Karina.

Do you have fields of wild sunflowers where you live?

The wild blackberries blocked us from some good close shots but now we know where to go for desert. Some are ripe already.

Click on an Icon. Any icon (eyes closed). What did you find?

---

Blog    Articles    FAQs     Front Page    CSS Boxes    Tricks    About    CSS Style    Color Chart    Free Gallery    Pure Text    Remove Gator    Borders Tutorial   

Blogs we are reading and pages we are updating...

Test Your Connection Speed

A little window will popup and tell you how fast or slow your connection is speed is. We were running slow yesterday.

Today it's 1.447 Mbps .

Your connection speed?

Mandarin Restaurants

Clickable Thumbnail

We are collecting pictures of Mandarin Restaurants. We don't know why, probably for the same reason that we collect pheasants.

The image we found looks good on some displays but not on others.

Clickable Thumbnail

Clickable Thumbnail

The copy and paste code for the thumbnail looks like this.

<a href="images/mandarin1.jpg">
<img src="images/mandarin1thumb.jpg" border="0" 
width="125" height="123" alt="A Mandarin Restaurant image">
</a>

The thumbnail is images/mandarin1thumb.jpg.
The bigger picture is images/mandarin1.jpg.

Hue and Saturation

Clickable Thumbnail

Bold and subtle: Image hue and saturation After reading this new graphic tip we decided to focus on Hue and Saturation to adjust our image.

In Adobe we click Image >Adjust >Hue Saturation
to manipulate the appearance of the picture.

Hue
We can adjust the red, yellow, green, cyan, blue and magenta one at a time with a slider.

Saturation
We can just spill color all over the place with this one. Move the slider and colors brighten together into surreality. The image with highly saturated colors doesn't look natural but it can drastically change a boring image.

Lightness
Lightness makes the image lighter, all the way to pure white if we want. Darker can be adjusted down to solid black.

Small Image: Under 10K
The original image is large so we made it smaller. Then we looked at it in both .jpg and .gif format. We try to keep our images under 10K for the low bandwidth folks so we settle for the 125 x 123 .jpg version.

Click the Picture

Clickable Thumbnail

Right-click on the image to view the properties. You will see that the size is about 6K while the dimensions are 125 x 123.

Left-click to enlarge the thumbnail. Ah, isn't that a nice restaurant. After all of that we left the original picture alone.

Off to lunch now. Have a great day.

Box with Centered Image
Copy and Paste Code

S T R A T O F O R T R E S S

Copy and paste (or type) this in your Blog or Web page.

It will look like this.

S T R A T O F O R T R E S S

Details you don't have to know...

Two DIV tags
That's two DIV tags. From the outside in, here's what the DIVs do.

1. <DIV align=center> says align the following block in the center.

2. <div style="BORDER:black 2px solid; PADDING:15px;FONT-SIZE:12px;WIDTH:200px; BACKGROUND-COLOR:white; TEXT-ALIGN:center">

The second div says put a solid black border around four sides, sized 2 pixels wide.

Put a padding of 15 pixels around all four sides. Size the font to 12 pixels and put it on a white background. TEXT-ALIGN:center says center the text and image that follow.

S T R A T O F O R T R E S S

We found this bordered box image at A Collection of Thoughts. Nice framing, eh?

Permission to steal your code and 
image for Stratofortress? 
It's very nicely done and would look 
great for a border and box demonstration 
at Mandarin. 

Thanks! 
meg  7/7/03 9:13:08 AM 

roger that, but I got the code for the 
box/border from your site :) Then I simply 
inserted the photo I wanted to use... 
Jennifer Martinez 

It's fun when they (you) say "we got it from you ". Sure,we give out the 99¢ watercolors and you create masterpieces.

If the copy-and-paste code for this one isn't already in the Boxes and Borders Quick Cheats page we'll copy Jennifer's code and add it.

Dude, smoke two links and call me in the morning

Colors. You want colors?

#CCCC99
#99CC00
#99FF00

Trust me. They will look great with what you are wearing.

Copy and paste (or type) this in your Blog or Web page.

<div style="color:#99FF00;background-color:#99CC00;
border:5px solid #CCCC99;font-size:12px;padding:10px;">
Yikes! It's one line of code 
</div>

Put the code on one line. No line breaks. It will look like this.

Blue Borders Around Images?

We noticed a linked image with a blue border on our page. Ouch. To get rid of the blue border we usually add a border=0 to the IMG tag.

<a href="faq.html">
<img src="v50.gif" border="0"> 
</a>

Another method is to make the blue border disappear on all linked images. We can do this inside between the begin HEAD and end /HEAD tag.

<html>
<head>
  <title>Page Name</title>
  
  <style type="text/css">
  a img { border: none; }
  </style>
 
</head>
<body>
  <a href="faq.html">
  <img src="images/v50.gif" alt="deco image"></a>
</body>
</html>

Now, linked images surrounded by <a> tags will not have a border. Images that are not linked will not be affected.