Website pages look different .....
Page 1 of 1
Website pages look different .....
Good evening everyone,I just finished my website. So i posted it too a free hosting service for now. It all looks good but the services page looks different on each browser even on mobile phones. Help.
Link: http://businesstestsite.comze.com/index.html
In the safari browser it looks great. Just like intended it too. But on IE, Firefox, Opera and mobile browsers its looks a little bit off.
HTML CODE FOR SERVICES PAGE:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>SERVICES</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<img src="banner_bg.gif"/>
<h2>PERSONAL COMPUTER SOLUTIONS</h2>
<h4>QUALITY SERVICE AT A FAIR PRICE</h4>
<h3>714.584.0249</h3>
</hgroup>
</header>
<aside>
<nav>
<a href="index.html">HOME</a><br>
<a href="aboutus.html">ABOUT US</a><br>
<a href="services.html">SERVICES</a><br>
<a href="products.html">PRODUCTS</a><br>
<a href="contactus.html">CONTACT US</a>
<img src="navlogos.gif"/>
</nav>
</aside>
<article>
<div class="servicesintro">
Personal Computer Solutions offers quick and reliable computer services and repair at a reasonable price, furthermore receive free phone advice about your computer problem(s) and any other questions that you may have. Here are some of the services we offer.
</div>
<div class="dataprotectionservicesblock">
<div class="protectionsecurityservicesheading">
DATA PROTECTION & SECURITY
</div>
<div class="dpslist">
<ul>
<li>Data Transfer/Backup</li>
<li>Data Recovery</li>
<li>Wireless Security</li>
<li>Create/Restore CD</li>
</ul>
</div>
<div class="upgradesinstallationsblock">
<div class="upgradesinstallationsservicesheading">
UPGRADES & INSTALLATIONS
</div>
<div class="upgradeslist">
<ul>
<li>Computer Components</li>
<li>Operating System Replacement</li>
<li>Wireless Device(s)</li>
<li>PC Installation/Setup</li>
<li>Peripheral Installation/Configuration</li>
<li>Software Titles (excludes O.S.)</li>
</ul>
</div>
<div class="customizationsblock">
<div class="customizationsservicesheading">
CUSTOMIZATION & OPTIMIZATION
</div>
<div class="customizationslist">
<ul>
<li>PC Tune Up</li>
<li>Custom Built System(s)</li>
<li>Network Setup/Configuration</li>
</ul>
</div>
<div class="repairblock">
<div class="repairservicesheading">
REPAIRS & TROUBLESHOOTING
</div>
<div class="repairlist">
<ul>
<li>System Diagnostics</li>
<li>System Restore</li>
<li>Wireless Device(s)</li>
<li>Virus/Spyware & Adware Removal</li>
</ul>
</div>
<div class="miscservicesblock">
<div class="miscservicesheading">
MISCELLANEOUS SERVICES
</div>
<div class="miscserviceslist">
<ul>
<li>General IT Consultation</li>
<li>1 on 1 IT Instruction</li>
</ul>
</div>
</article>
<footer>
<h6>Copyright © 2011 Personal Computer Solutions. All rights reserved.<br>Web Master: Alvin Zaragoza</h6>
</footer>
</div>
</body>
</html>
CSS CODE:
#wrapper {
width: 1039px;
height: 943px;
position:relative;
margin: auto;
border: solid thin #EBE6E7;
padding: 10px;
}
body {
background-color: #EBE6E7;
align: center;
}
header {
height: 157px;
width: 1039px;
border: solid thin black;
}
h2 {
font-family: verdana;
font-size: 30px;
font-weight: normal;
word-spacing: 5px;
color: #ff0000;
margin-left: 200px;
margin-top: -143px;
}
h3 {
font-family: times;
font-size: 35px;
font-weight: normal;
color: white;
margin-left: 200px;
}
h4 {
font-family: verdana;
font-size: 18px;
font-weight: normal;
word-spacing: 3px;
color: #fcf238;
margin-top: -26px;
margin-left: 200px;
}
aside {
height: 700px;
width: 200px;
margin-top: 10px;
border: solid thin black;
border-radius: 15px;
background: #FFF;
}
article {
height: 700px;
width: 820px;
margin-top: -702px;
border: solid thin black;
border-radius: 15px;
float: right;
background: #FFF;
padding: 0px auto;
}
footer {
height: 60px;
width: 1039px;
border: solid thin black;
border-radius: 15px;
margin-top: 10px;
background: #FFF;
text-align: center;
padding: auto;
}
nav {
text-align: center;
padding-top: 25px;
margin-bottom: 7.5px;
margin-top: 7.5px;
}
nav a {
text-decoration: none;
display: block;
border: solid thin black;
background: #d9d6d6;
font-size: 20px;
padding: 10px 10px;
margin-right: 10px;
margin-left: 10px;
font-weight: bold;
}
nav a:hover {
color: #09F;
background: #4D4C4C;
border-radius: 15px;
}
a:visited {
color: #00F;
}
ol {
list-style: none;
}
fieldset {
border-radius: 15px;
margin: 15px auto;
width: 420px;
padding: 0px auto;
background: #efeded;
}
section {
border-radius: 15px;
margin: auto;
width: 500px;
}
.computertower {
margin: 10px;
}
.subheading1 {
font-family: verdana;
color:#3d5aa8;
font-weight: bold;
font-size: 15px;
float: right;
margin-top: 10px;
margin-right: 55px;
}
.list {
margin-top: -200px;
margin-left: 155px;
font-family: verdana;
font-size: 16px;
}
.subheading2 {
margin-top: 50px;
margin-left: 15px;
font-family: verdana;
color:#3d5aa8;
font-weight: bold;
}
.service {
margin-left: 570px;
margin-top: 10px;
}
.paragraph {
margin-left: 15px;
margin-right: 255px;
margin-top: -155px;
font-family: arial;
}
.subheading3 {
color: #0179b5 ;
margin-top: 25px;
text-align: center;
}
.commitment {
margin-left: 25px;
margin-top: 10px;
}
.quote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 125px;
margin-right: 35px;
margin-top: -105px;
}
.commitmentblock {
border: solid thin #404040;
border-radius: 15px;
background: #efeded;
width: 675px;
height: 175px;
margin-left: 75px;
margin-top: 35px;
}
.personalintroduction {
font-family: arial;
font-size: 15px;
margin-top: 15px;
margin-left: 15px;
}
.me {
float: right;
margin-right: 15px;
margin-top: -145px;
}
.meblock {
border: solid thin #404040;
background: #efeded;
width: 750px;
height: 185px;
margin-left: 15px;
margin-top: 25px;
padding: 5px;
}
.paragraph2 {
margin-left: 15px;
margin-right: 55px;
margin-top: 15px;
font-family: arial;
}
.productsheading {
color: #0179b5 ;
margin-top: 15px;
text-align: center;
}
.productsblock {
border: solid thin #404040;
*border-radius: 15px;
background: #efeded;
width: 755px;
height: 145px;
margin-left: 25px;
margin-top: 20px;
}
.customsystemlink {
margin-left: 25px;
margin-top: -25px;
}
.customsystemquote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 185px;
margin-right: 35px;
margin-top: -95px;
}
.webdesignhostinglink {
margin-left: 25px;
margin-top: -25px;
}
.webdesignquote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 185px;
margin-right: 35px;
margin-top: -95px;
}
.onlinestoragelink {
margin-left: 25px;
margin-top: -25px;
}
.onlinestoragequote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 185px;
margin-right: 35px;
margin-top: -95px;
}
.parts-softwarelink {
margin-left: 25px;
margin-top: -25px;
}
.parts-softwarequote {
font-family: arial;
font-size: 15px;
text-align: justify;
margin-left: 185px;
margin-right: 35px;
margin-top: -95px;
}
.servicesintro {
margin-left: 45px;
margin-right: 45px;
margin-top: 25px;
font-family: arial;
font-size: 15px;
}
.dataprotectionservicesblock {
border: solid thin #404040;
background: #efeded;
width: 330px;
height: 135px;
margin-left: 50px;
margin-top: 40px;
}
.protectionsecurityservicesheading {
color: #0179b5 ;
margin-top: 15px;
margin-left: 17px;
}
.dpslist {
font-family: times;
font-size: 15px;
text-align: justify;
margin-left: -5px;
margin-right: 95px;
margin-top: 15px;
}
.upgradesinstallationsblock {
border: solid thin #404040;
background: #efeded;
width: 330px;
height: 185px;
margin-left: 0px;
margin-top: 40px;
}
.upgradesinstallationsservicesheading {
color: #0179b5 ;
margin-top: 15px;
margin-left: 17px;
}
.upgradeslist {
font-family: times;
font-size: 15px;
text-align: justify;
margin-left: -5px;
margin-right: 60px;
margin-top: 15px;
}
.customizationsblock {
border: solid thin #404040;
background: #efeded;
width: 330px;
height: 135px;
margin-left: 375px;
margin-top: -331px;
}
.customizationsservicesheading {
color: #0179b5 ;
margin-top: 15px;
margin-left: 17px;
}
.customizationslist {
font-family: times;
font-size: 15px;
text-align: justify;
margin-left: -5px;
margin-right: 60px;
margin-top: 15px;
}
.repairblock {
border: solid thin #404040;
background: #efeded;
width: 330px;
height: 185px;
margin-left: 0px;
margin-top: 57px;
}
.repairservicesheading {
color: #0179b5 ;
margin-top: 15px;
margin-left: 17px;
}
.repairlist {
font-family: times;
font-size: 15px;
text-align: justify;
margin-left: -5px;
margin-right: 60px;
margin-top: 15px;
}
.miscservicesblock {
border: solid thin #404040;
background: #efeded;
width: 330px;
height: 110px;
margin-left: -185px;
margin-top: 85px;
}
.miscservicesheading {
color: #0179b5 ;
margin-top: 15px;
margin-left: 17px;
}
.miscserviceslist {
font-family: times;
font-size: 15px;
text-align: justify;
margin-left: -5px;
margin-right: 60px;
margin-top: 15px;
}
Is there anything i can do too change that issue? Help.
Thanks,
Alvin
Re: Website pages look different .....
That's is because of every browser has its own default built in CSS to over come this issue you should use CSS rest code at the top of your css style sheet !you can find different versions of CSS reset codes on this page !
http://meyerweb.com/eric/tools/css/reset/
Page 1 of 1