How do I style for different browsers?
Hi,
Attached is a snipet of css and html from my web page.
The page looks fine in ie9 but not in firefox? How can I alter my techniques to adere to most common browsers?
Thanks.
Attached is a snipet of css and html from my web page.
The page looks fine in ie9 but not in firefox? How can I alter my techniques to adere to most common browsers?
Thanks.
<style type="text/css">
#drop_shadow { border: solid 1px #858484; width: 945px; min-height: 900px; margin: 0px auto; }
#drop_shadow
{
-moz-box-shadow: 3px 3px 4px #858484; /* Shadow for Firefox */
-webkit-box-shadow: 3px 3px 4px #858484; /* Shadow for Safari */
box-shadow: 3px 3px 4px #858484; /* Shadow for Chrome and Opera */
/* Shadow for IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#858484')";
/* Shadow for IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#858484;');
}
#header { border-bottom: solid 1px #858484; padding-top: 15px; width: 100%; height: 48px; font-family:"Arial", "Times New Roman", "Times";}
#header .title { margin: 6px 10px; padding: 0px; float: left; color:#55379B; font-size:1.5em; }
#header .subtitle { margin: 10px 0px; padding: 0px; float: left; color:#55379B; font-size:1.0em; }
#header .search { border-right: solid 1px #858484; padding-right: 30px; float: right; Height="35px" }
#header .search span { float: left; margin: 0px 0px; padding: 10px; }
#header .search input { margin: 0px; }
#header .links { float: right; }
#header .links ul { margin: 9px 15px 0px 50px; padding: 0px; }
#header .links li { margin: 0px; padding: 0px; list-style-type: none; display: inline; }
#header .links li a { text-decoration: none; color: #000; padding: 0px 5px; }
#header .links li a:hover { text-decoration: underline; }
#content { padding: 30px; }
</style>
<div id="drop_shadow">
<div id="header">
<div class="title">
<span>Sustainability report 2011</span>
</div>
<div class="subtitle">
<span>Our assured data</span>
</div>
<div class="links">
<ul>
<li>
<b>
<a href="#">Report home</a>
</b>
</li>
</ul>
</div>
<div class="search">
<span>
<b>
Search the report
</b>
</span>
<form method="post" action="****.aspx" id="SearchPanel_search_widget_form">
<div id="****">
<label style="display: none;" for="****">text</label>
<input value="Search using a keyword" style="display:block; float:left; margin:0; margin-top:0.4em;" onfocus="if(this.value=='Search using a keyword') this.value=""" type="text" name="****" id="****" />
<label style="display: none;" for="****">Go button</label>
<input style="border:0; width:33px; float: none; margin: 0px; margin-left:1em;margin-top:0.3em;height: 21;" type="image" src="****.gif" id="****" alt="Go Button" />
</div>
</form>
</div>
<br class="clear" />
</div>
</div>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
In the firefox there is a simple CSS you can use. Where as to fix the e6. you've to fix # infront of the stylesheet.
padding: 0px 5px;#padding: 0px 15px;