Login | Register | FAQ
Anonymous

Website pages look different .....

+ Post a reply

Page 1 of 1


Website pages look different .....

by htmlcssnewbie » Thu May 10, 2012 5:57 am

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 &copy 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
User avatar

htmlcssnewbie

  • Posts: 5
  • Joined: Sun Apr 08, 2012 4:11 am

Re: Website pages look different .....

by XainPro » Tue Aug 21, 2012 10:40 am

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/
User avatar

XainPro

  • Posts: 3321
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1