Yahoo like border and background

HTML & CSS
1

I want to make a div box which will have the same border and background color as of yahoo shown below.

see,they are using a round cornered box in the login box. how do I make such one ?

Also the border is quite thick but looks nice . whats the trick to apply to get such kind of border ?

2

No. It does not work .

I checked your CSS


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  .mydiv{
	background-color: #F9F9F9;
	border: 3px solid rgba(153, 153, 153, 0.746094);
	border-radius: 5px;
	color: #333;
	}
  </style>
 </HEAD>

 <BODY>
  <div class="mydiv">
  hkjll
  khjhlh
  lhkjhh
  </div>
 </BODY>
</HTML>

There is no round corner coming in the box . Also, the border color is not the same color as the yahoo using.

Do I need any changes ?

3 

background-color: #F9F9F9;
border: 3px solid rgba(153, 153, 153, 0.746094);
border-radius: 5px;
color: #333;
4

Here is some updates:

browser: windows 7 built in IE ( I think its IE 7)
Chrome (latest)

I’m getting dark color border whereas in yahoo border color was light.

This won’t work in IE, and it won’t work in old versions of browsers. It’s CSS3.

But, I get the round border in all browser (including IE) when I open yahoo login page…that is working in all browser here.

5

I took this DIRECTLY from the yahoo website. So it’s correct.

a) You need a browser reset. You will never be able to tell what is wrong with your CSS if you don’t reset the browser presets first.

b) You need to specify vendor specific prefixes for rounded corners to work in new browsers such as FF, Chrome, Safari.


-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

This won’t work in IE, and it won’t work in old versions of browsers. It’s CSS3.

c) That border color is taken DIRECTLY from their website. If your browser is old and doesn’t support rgba, then you are going to see a dark grey rgb(153, 153, 153)

6

It’s possible they are using javascript for browser detection and using different methods for these different solutions.

They could also be using javascript to give IE the CSS3 functionality.

They could be doing a huge variety of things. I don’t have IE installed (I’m on a mac) so someone will have to tell you how they do it for IE7.

Now, if you REALLY want to learn, go install firebug for FF, Chrome, and firebugger http://www.firebugger.com/ for IE, and LOOK AT THEIR CODE.

It’s what everyone else will who helps you be doing, too.

7

Is there any library which can help to get the CSS3 functionality ?

For example, if you include jquery.js , you can do javascript work.

similarly, can I import a library which could help to add CSS3 functionality ?

in that case, all your code should work fine.

Alternatively, if thats too much complicated, what alternative option I have to get the same effect in the page as the yahoo does ?

8

http://css3pie.com/

This will give functionality for border radius.

RGBA is still not supported fully. My color picker states #b1b1b1 is a match for rgba(153,153,153,0.75) on a white background.

9

I checked your library . I tried using their demo code to test it out if the library works or not. This is not working.

Here is the code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="PIE.js"></script>
  <style>
  .mydiv{
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);
	}
  </style>
 </HEAD>

 <BODY>
  <div class="mydiv">
  hkjll
  khjhlh
  lhkjhh
  </div>
 </BODY>
</HTML>

Here is the output I’m getting

Please see the demo output in the link you provided . The demo output is different than mine.

why the library failed to produce the demo output. I have used the same CSS ( check ‘Show CSS’ ) as per the site.

This is becoming bit complicated now.

10

So I just checked the yahoo login website here at work where I have IE8 on Windows XP.

I see NO rounded corners, and the border color is rgb(153,153,153) or #999, which is what is expected since rgba is not supported, and the alpha channel becomes 1.

I’m not sure where you are seeing this.

Also, for CSS3PIE, there are two possible issues:
a) The path to behavior: url(/PIE.htc) needs to be relative to the site root.
b) Whatever server this is hosted on does not know how to serve it using the correct Content-type. Try using the php version?