[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 154
  • Last Modified:

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.
<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=&quot;&quot;" 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>

Open in new window

0
aspnet-scotland
Asked:
aspnet-scotland
1 Solution
 
Prafulla MaharjanCommented:
There is a simple difference when you use the difference browsers.
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;
0
 
AmickCommented:
I think you'll find this a lot closer to standard presentation.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="Author" content="?">
<meta name="Keywords" content="?">
<meta name="Description" content="?">
<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>
</head>

<body>

<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=&quot;&quot;" 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>
</body>
</html>

Open in new window


If you have to support old versions of IE, you can use IE conditional tags for IE-specific coding.
The key is to keep all your browsers in standards mode to the extent possible.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now