Irina

http://css-tricks.com/examples/CSS3Gradient/

1. Rounded Corners for Firefox, Safari & Chrome

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

2. Border Radius and Other special effects
http://www.the-art-of-web.com/css/border-radius/

3. Border radius for Interner Explorer
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: solid 1px #414141;
border-bottom-left-radius: 2px 2px;
border-bottom-right-radius: 2px 2px;
border-top-left-radius: 2px 2px;
border-top-right-radius: 2px 2px;

http://css3generator.com/

http://www.emblematiq.com/lab/niceforms/download/

http://www.catswhocode.com/blog/10-ways-to-make-internet-explorer-act-like-a-modern-browser

<div id=”divinputfile” class=”left”>
<asp:FileUpload ID=”flUplAttFile” CssClass=”flUplAttFile” runat=”server” name=”flUplAttFile” type=”file” size=”23″ onchange=”document.getElementById(’fakefilepc’).value = this.value;” ToolTip=”<%$ Resources:AccelerateResources, txtflUplAttFileTooltip %> “/>
<div id=”fakeinputfile”>
<input name=”fakefilepc” type=”text” id=”fakefilepc” />
</div>
</div>
<div class=”left”>
<asp:LinkButton ForeColor=”#ffffff” Font-Bold=”false” OnClick=”btnAttUpload_Click” CssClass=”<%$ Resources:AccelerateResources, btnUploadCSS %> ” ID=”btnAttUpload” Text=”<%$ Resources:AccelerateResources, btnUpload %> ” runat=”server” />

</div>

And the browse button styling:

/* browse button styling */
#divinputfile
{
background:url(images/upload_file.gif) no-repeat 100% 1px;
height:32px;
width:320px;
*width:260px;
margin:0px;
}
#divinputfile .flUplAttFile
{
cursor: pointer;
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:18px;
*width:250px;
}
#fakeinputfile
{
margin-top:-28px;
cursor: pointer !important;
}
#fakeinputfile #fakefilepc
{
width: 240px;
*width:180px;
height:22px;
line-height:22px;
font-size:11px;
color: #454545;
font-family:Verdana;
}
/* //browse button styling */

CSS kode

div#input {
width: 234px;
border: 1px solid #cd0200;
position:relative;
font-size: 11px;
line-height:18px;
padding:0 0 0 4px;
color:#333;
position:relative;
z-index:2;
background: url(”images/dropdown_arrow.gif”) 100% 0px no-repeat;
}

div#selects {
width: 100px;
overflow:auto;
display:none;
position:absolute;
left: -1px;
top: 19px;
background:#fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: solid 1px #4e77a1;
border-top: 1px solid #4e77a1;
}

div#selects a {
padding: 0 0 0 4px;
color:#333;
font-size:11px;
text-decoration:none;
display:block;
}
.input_default_cursor {
cursor:default;
}
:focus
{
-moz-outline-style: none;
}

div#selects.shown {
display:block;
width:100px;

}
div#selects.shown a:hover {
cursor:default;
color:#cc0000;
background:#316ac5;
color:#fff;
}
div#selects {
z-index:5;
}

Javascript code

var opening=false;

function hideall() {
if (opening==false)
{
inputdiv=document.getElementById(’selects’);
inputdiv.style.display=”none”;
}
opening=false;
}
function showall(DivId) {
inputdiv=document.getElementById(DivId);

if(inputdiv.style.display==”block”)
{
inputdiv.style.display=”none”;
}
else
{
inputdiv.style.display=”block”;
inputdiv.className=’shown’;
opening=true;
}
}

And the html is:

<div id=”input” class=”input_default_cursor” onclick=”showall(’selects’);”>
Real select:
<div id=”selects”>
<a href=”#a”>Spanish</a>
<a href=”#a”>Portuguese</a>
<a href=”#a”>German</a>
</div>
</div>

And here is the source – http://ivanov.in/mm/pseudo-select.html?05

http://rafael.adm.br/css_browser_selector/

Some css hacks for different browsers

IE 6 and below
* html {}

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Recent Opera versions 9 and below
html:first-child {}

Google Chrome And Safari 3.1
body:nth-of-type(1) {}

Here is the links for more specific info
http://www.webdevout.net/css-hacks
http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/