While validating the html codes we use to get error of flash to avoid the error you have to make changes in the flash code.
This is the proper flash html code for strict doctype
<object type="application/x-shockwave-flash" data="flash/menu1.swf" width="800" height="52">
<param name="movie" value="flash/menu1.swf"/>
<a href="http://www.macromedia.com/go/getflashplayer"/>
</object>
<embed> tag is used to support netscape. By using <embed> tag it won't show any visual difference in IE and Firefox, but you will get error while validating your codes
<object classid="clsid:d27cdb6e-ae6d-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="52">
<param name="movie" value="flash/menu1.swf"/>
<param name="quality" value="high"/>
<embed src="flash/menu1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="52"></embed>
</object>
-------------------------------------------------------------------------
Fix for drop down menus of flash In IE and Firefox
create the flash drop down menu as Your want and make the background transparent. Open macromedia dreamwear and open the html file which you want to change and select layout option .you will find layers buttom select that and click and drag in your html file a yellow color box will appear, click inside that box and insert the flash file inside that box, and select modify option in that select arrange in that select bring to front.
But there will be small issue in IE and Firefox.
In IE if you want to select the content behiend the the flash , you have to click twice or trice.
In Firefox the content cannot be able to select till the height of the flash .
-------------------------------------------------------------------------
Fix for overlap/invisiable menu over flash banner
<param name="wmode" value="transparent">
place this code inside the flash banner code as shown below
<object classid="clsid:d27cdb6e-ae6d-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="52">
<param name="movie" value="flash/menu1.swf"/>
<param name="quality" value="high"/>
<param name="wmode" value="transparent">
<embed src="flash/menu1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="52"></embed>
</object>
-------------------------------------------------------------------------
Fix for text duplicating and generating extra whitespace
Provide negative margin for the repeating text div like
Margin:0 0 0 -3px;
------------------------------------------------------------------------
Fix to Align the website center of your browser
Place all the div inside the a div and give name wrapper or as you like and mention width and margin like shown as below
Margin:0 auto; width:give the width of your website;
------------------------------------------------------------------------
This is the code to create google search box in your own website
<div class="noborder" style="width: 470px; margin: auto;">
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/search">
<p><input type="hidden" name="ie" value="iso-8859-1"/>
<input type="hidden" name="oe" value="iso-8859-1"/></p>
<table style="background-color:#e9e9e2; font-size:-1">
<tr>
<td>
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_40wht.gif" style="border:0;" alt="www.google.com"/></a>
</td>
<td>
<input type="text" name="q" size="39" maxlength="255" value=""/>
<input type="submit" name="btnG" value="Search"/>
<input type="hidden" name="domains" value="http://www.pixelshades.com"/><br/>
<input type="radio" name="sitesearch" value=""/>web
<input type="radio" name="sitesearch" value="http://www.pixelshades.com" checked="checked"/>http://www.pixelshades.com
</td></tr></table>
</form>
<!-- SiteSearch Google -->
</div>
------------------------------------------------------------------------
Scrollbars
If you want to change the color of various parts of the scrollbars, you can do it in IE with the following code in the page head (it only works in IE; scripts must be used for other browsers):-
<!--[if ie]><style> html { scrollbar-face-color: #ccccc2; scrollbar-shadow-color: #ccccc2; scrollbar-highlight-color: #ccccc2; scrollbar-3dlight-color: #ccccc2; scrollbar-darkshadow-color: #ccccc2; scrollbar-track-color: #e9e9e2; scrollbar-arrow-color: #e9e9e2; } </style> <![endif]-->
Note that it sets a style for html as distinct from the body.
You can also put the code in the stylesheet like this:-
html { scrollbar-face-color: #18E413; scrollbar-shadow-color: #ccccc2; scrollbar-highlight-color: #ccccc2; scrollbar-3dlight-color: #ccccc2; scrollbar-darkshadow-color: #ccccc2; scrollbar-track-color: #e9e9e2; scrollbar-arrow-color: #e9e9e2; }
I have found that if it is put in the stylesheet, it will not validate. If put in the head of a page, both the stylesheet and the page will validate.
------------------------------------------------------------------------
100% height for all viewport (browser screen) sizes without a scrollbar
If you want a background-image or color panel to extend to 100% of the viewport (browser screen) height in all situations, you have to
set the style for the html and body to 100% as in html, body { height: 100%; }. The body style is for IE and the html style for other major browsers.
------------------------------------------------------------------------
How to create Rounded Corners by using css
The Basics of Rounded Corners
This is the content of pixelshades
<html>
<head>
<title>CSS ROUNDED CORNERS</title>
<style>
.container{
background:#ff0088;
color:#000000;
margin:0 15px;
padding:10px;
}
.rtop, .rbottom{
display:block;
background:#ff0088;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
.middle {
width:100%;
background-color:#cccccc;
text-align:center;
font-weight:bold;}
</style>
</head>
<body>
<div class="container">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="middle"><br />This is the content of pixelshades<br /><br /></div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
------------------------------------------------------------------------
How to fix the background color in form input box in IE
<html>
<head>
<title>Form input box background color</title>
<style>
form {background-color:#671C09; width:300px; padding:10px 0 0 0; color:#ffffff; border:5px solid #cccccc; text-align:center; margin:0 0 0 12px;}
form p{padding:0 0 10px 0; margin:0;}
.inputbox {width:200px; height:15px; background-color:#F5AE40; font-family:Verdana; font-size:11px; color:#ffffff; border:1px solid #9C3B12; text-align:center; padding:1px 0 0 0;}
.inputpass {width:200px; height:15px; background-color:#F5AE40; font-family:Verdana; font-size:11px; color:#ffffff; border:1px solid #9C3B12; text-align:center; padding:4px 0 0 0;}
.submit{background-color:#FB780C; font-family:Verdana; font-size:12px; font-weight:bold; color:#ffffff; width:57px; height:20px; border-top:2px solid #E26A06; border-left:2px solid #E26A06; border-right:2px solid #FC9C4D;border-bottom:2px solid #FC9C4D;line-height:15px;}
</style>
</head>
<body>
<!-- form inputbox color script for IE starts here -->
<script type="text/javascript">
<!--
if(window.attachEvent)
window.attachEvent("onload",setListeners);
function setListeners(){
inputList = document.getElementsByTagName("INPUT");
for(i=0;i<inputList.length;i++){
inputList[i].attachEvent("onpropertychange",restoreStyles);
inputList[i].style.backgroundColor = "";
}
selectList = document.getElementsByTagName("SELECT");
for(i=0;i<selectList.length;i++){
selectList[i].attachEvent("onpropertychange",restoreStyles);
selectList[i].style.backgroundColor = "";
}
}
function restoreStyles(){
if(event.srcElement.style.backgroundColor != "")
event.srcElement.style.backgroundColor = "";
}//-->
</script>
<!-- form inputbox color script for IE ends here -->
<form action="http://www.pixelshades.com" method="get" >
<p>
Username :
<input type="text" name="inputbox" class="inputbox" value="" />
</p>
<p>
Password :
<input name="email" type="password" class="inputpass" value="" />
</p>
<p>
<button type="submit" class="submit" onclick="disp_alert()">Submit</button>
</p>
</form>
</body>
</html>
------------------------------------------------------------------------
How to change the text color while mouse hover
This content changes the color while cursor is over the content.
<p style="border:0 none" onmouseout="this.style.color='#000000'" onmouseover="this.style.color='#B32533'">This content changes the color while cursor is over the content.</p>
------------------------------------------------------------------------
Fix for Blink option in IE using javascript
paste this script at head section of the html
<SCRIPT>
<!--
function doBlink() {
var blink = document.all.tags("BLINK")
for (var i=0; i<blink.length; i++)
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : ""
}
function startBlink() {
if (document.all)
setInterval("doBlink()",1000)
}
window.onload = startBlink;
// -->
</SCRIPT>
Paste this code into the body section
<blinK>This text is blinking</blink>
