How do I get my website to look same for all web browsers? I mainly use Firefox but I’m a new web designer and I am having trouble getting my web sites to look same on all browsers.
I tried googling webkits, jquery but nothing explains to me how it works. I’m still learning jquery. I am trying to get my header navigation bar and container to fit close together like my code below looks in Firefox. But in Internet Explorer 9 it is further away from each other. Also i’m trying to get my side containers closer but in both browsers that I’m looking at it doesn’t work well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="template8.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-attachment: fixed; background-repeat: no-repeat;" background="Images/template8 bkg.jpg">
<br />
<br />
<div id="header">
<br />
<br />
<br />
Floating Mountain Enterprise</div>
</div>
<div id="centeredmenu">
<ul>
<li><a href="portfolio.htm" class="active">Tab one</a></li>
<li><a href="portfolio.htm">Tab two</a></li>
<li><a href="portfolio.htm">Tab three</a></li>
<li><a href="portfolio.htm">Tab four</a></li>
</ul>
<br />
<br />
<br />
<br />
<br />
</div><!-- end header -->
<div id="left"><center><br />
<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE</center></div>
<div id="right"><center><br />
<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE<br />
TEXT HERE</center></div>
<div id="container">
<div id="content">
<h1>HEADER ONE</h1> <!-- end h1 -->
YOUR CONTENT HERE!
<h2>Header Two</h2>
<p>More content here. </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<br />
<br />
</div> <!-- end content -->
</div> <!-- end container -->
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font- size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
#header
{ margin: 0px auto;
text-align:center;
font-size:x-large; font-weight:bold;
width: 810px;
height: 200px;
background: url(Images/template8%20header.jpg);
box-shadow: 15px 15px 5px #333;
-moz-box-shadow: 10px 10px 5px #333;
-webkit-box-shadow: 10px 10px 5px #333;
}
#centeredmenu {
float:left;
width:100%;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 5px;
padding:3px 10px;
background:#FFF;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#centeredmenu ul li a:hover {
background: #999;
color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color: #333;
background:#000;
font-weight:bold;
}
#container
{ margin: 0px auto;
padding-left:15px;
margin-top:27px;
width: 800px;
height: auto;
background: url(Images/container%20bkg.png);
box-shadow: 15px 15px 5px #333;
-moz-box-shadow: 10px 10px 5px #333;
-webkit-box-shadow: 10px 10px 5px #333;}
#content
{ margin: 0px auto;
padding-left:15px;
width: 780px;
padding-top:25px;
height: auto;
font-family: "MS UI Gothic";
font-style:oblique;
}
#left * {
background-color: #999;
-moz-opacity: 0.5 !important; -webkit-opacity: 0.5!important; -ms- filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha (opacity=50) !important; opacity: 0.5 !important;
min-height: 400px;
margin-left:35px;
float: left;
width: 150px;
height: auto;
box-shadow: 15px 15px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
-webkit-box-shadow: 10px 10px 5px #666; }
#right *{
background-color:#999;
-moz-opacity: 0.5 !important; -webkit-opacity: 0.5!important; -ms- filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha (opacity=50) !important; opacity: 0.5 !important;
margin-right:35px;
width: 150px;
min-height: 400px;
float: right;
box-shadow: 15px 15px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
-webkit-box-shadow: 10px 10px 5px #666; }
Look exactly the same on every browser sounds a bit extreme …
similar (and smooth) on major browsers sounds more realistic.
It’s often considered that if you don’t have “border-radius” or other cool stuffs from CSS3 to work in “old browser” (IE7 or IE8 for example), it’s because your visitor is having to update his browser …
So, manage to provide him an usable experience of you website / application at least, and if he doesn’t have the cool CSS3 border radius / opacity / shadows … effects and so on, it’s really not a big deal … If he doesn’t update his browser, maybe it’s because he doesn’t care a lot about that kind of stuffs.
Now, if you want every major browser to look similar, you could use a CSS reset first (this one is a common one, there are some others), then adapt it to your needs. It will reset the default settings the browsers use to display HTML elements, which differ on some points from one to another.
Then, if you still want to be able to use the CSS3 effects anyway, you can use something like PIE (or similar) for your effects to work on old IEs (6, 7 and 8). But, think that it will have some performance impacts because it’s emulating CSS3 features with javascript.