Hi there! I’m very new to this world of web design and I’m building a test website for practice (my first one).
However, the CSS effects only show on Google Chrome. When I open the same html file in Firefox and IE (latest) the website goes back to looking really bad with almost no CSS effects falling into place. HELP!
Here are the 2 different displays;
Chrome-
Firefox-
http://i57.tinypic.com/5xjq6p.png
Any ideas how I can change that?
Hi the.loserkid, welcome to the forums.
Are things better if you fix the mark-up?
http://validator.w3.org/check?uri=http%3A%2F%2Fjanesvillevetclinic.com%2F&charset=(detect+automatically)&doctype=Inline&group=0
I see the 2 screenshots of the.loserkid are quite different from the online site (with the html-errors).
And my Firefox is [U]doing well[/U], despite the errors. 
@ the.loserkid:
Are you more or less rebuilding, as exercise, a page like the real online site?
If that is the case, we need more than screenshots: what is the html-code, the css-code (and maybe the javascript-code) of your page?
Thank you both for the replies! I’m baffled tbh. I only use text content from websites online and don’t try to replicate the actual website because coming up with my own ideas makes for a better learning experience given how the actual website is too advanced for me at this stage.
the html markup for the home page:
The CSS file for the homepage:
I’ve been using dreamweaver cs6 and I’m not entirely sure of what format to select for html files when saving them. Do you think this problem could be surfacing because of that?
Hi,
Can you post your code here in the forums inside code blocks please (just click the # symbol on the toolbar above the post) because Mcafee flags up a dangerous warning for speedyshare so I wouldn’t want to risk visiting.
HTML markup:
![[U]doing well[/U]](http://clba.nl/sitepoint/images/vet-site.png){kind=link}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zinnia Pet Care</title>
<link rel="stylesheet" href="zinnia.css" type="css/text"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
</head>
<body class="body">
<header class="mainheader"> <img src="zinnialogo.png"/>
<div id="mainnavigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="gallery.html">Image Gallery</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<!-- end of main navigation-->
</header>
<article class="allinclusive">
<div id="maincontent">
<div id="content">
<h1 class="index">Welcome to Zinnia Pet Care Veterinary Clinic</h1>
<p class="sideimage"><img src="cocker.png"/ width="170" height="200"> </p>
<p class=styleparaindex>In your search for a veterinary facility,
we believe you should expect high quality care as well as great service.
Our goal has been to assemble a veterinary health care team dedicated to providing exceptional client service
and veterinary health care. Our commitment to you is to continue to offer our world class service and a
state of the art veterinary facility. Our membership in the American Animal Hospital Association (AAHA) is proof
of this commitment. Membership in AAHA voluntarily subjects our clinics to regular reviews and ensures that our
clinic utilizes the most current treatment and diagnostic protocols.
Whether it is for routine checkups or in depth surgeries our protocols help maximize patient health and minimize
adverse events.We strive to exceed every expectation you may have. Please let us know if there are ways we can improve
your experience.</p>
</div>
</div>
<!-- end of maincontent-->
<div id="bottompics"> <a href="#">
<!--<p class="pic1"> <img src="cocker.png"/ width="170" height="200"> </p>
</a>--> <a href="contactus.html">
<p class="pic2"> <img src="bluehouse.png"/ width="200" height="200"> </p>
</a> <a href="gallery.html">
<p class="pic3"> <img src="bluecamera.png"/ width="200" height="200"> </p>
</a> </div>
</article>
<footer class="mainfooter">
<p> Copyright © 2014 <a href="WDSI">WDSI</a></p>
</footer>
</body>
</html>
CSS Mark Up:
@charset "utf-8";
/* CSS Document for Zinnia Pet Care */
body {
background-image:url(blue3.jpg);
line-height: 125%;
font-family: Verdana, Geneva, sans-serif;
text-align: left;
font-size: 90%;
border-top: solid;
border-top-color: #33F;
}
a {
text-decoration: none;
}
#mainnavigation a:link, a:visited {
color: #FFF;
display: inline-block;
padding: 10px 12px;
}
#mainnavigation a:hover {
background-color: #cf5c3f;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 20px;
}
#mainnavigation a:active {
background-color: #cf5c3f;
}
.body {
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img {
height: auto;
margin: 2% 0;
}
#mainnavigation {
background-color: #186BE7;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#mainnavigation ul {
list-style: none;
margin: 0 auto;
}
#mainnavigation ul li {
float: left;
display: inline;
font-size: 95%
}
#maincontent {
line-height: 130%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#content {
float: left;
line-height: 130%;87
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-image:url(blue1.jpg);
margin-top: 1px;
padding: 1% 3%;
}
.stylepara {
width: 60%;
}
.sideimage {
position: absolute;
left: 910px;
top: 250px;
}
#bottomnavigation ul {
list-style: none;
margin: 0 auto;
}
.pic1 {
float: right;
margin-right: 110px;
margin-top: 30px;
}
.pic2 {
float: right;
margin-right: 160px;
margin-top: 30px;
}
.pic3 {
float: right;
margin-right: 200px;
margin-top: 30px;
}
.allinclusive {
margin-top: 20px;
}
.mainfooter {
width: 100%;
float: left;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding-left: 20px;
margin-top: 2px;
}
.mainfooter p {
text-align: center;
margin: 0 auto;}
.index{width:65%;}
.styleparaindex{width:70%;}
/* start of locations page styling details*/
.locationsfooter {
width: 98%;
float: left;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding-left: 20px;
margin-top: 150px;
}
.locationsfooter p {
text-align: center;
margin: 0 auto;
}
.address {
margin-top: 10px;
width: 20%;
}
.addresstitle {
margin-top: 30px;
}
/*start of about us detailing*/
.aboutusimage {
float: right;
position: relative;
bottom: 40px;
right: 90px;
}
.secondparaaboutus {
margin-top: 50px;
}
/*Gallery Detailing*/
#gallerycontent{margin-top:100px;}
.gallerypic1{float:right;margin-right:75px;}
.gallerypic2{float:right;margin-right:65px;}
.gallerypic3{float:right;margin-right:65px;}
.gallerypic4{float:right;margin-right:65px;}
.gallerypic5{float:right;margin-right:75px;margin-top:50px;}
.gallerypic6{float:right;margin-right:65px;margin-top:50px;}
.gallerypic7{float:right;margin-right:65px;margin-top:50px;}
.gallerypic8{float:right;margin-right:65px;margin-top:50px;}
HI,
You have this:
<link rel="stylesheet" href="zinnia.css" type="css/text"/>
It should be:
<link rel="stylesheet" href="zinnia.css"[B] type="text/css">[/B]
type=“text/css” not type=“css/text” 
(although in html5 you can drop the type attribute altogether).
Haha you’re a lifesaver! Thank you. I have run around begging for help in quite a few places before I finally turned to pdf material which led me here. Top place and quite easily better than other web building forums out there!