SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please Help! Trouble with web browsers not displaying CSS effects.

    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-

    http://i58.tinypic.com/34qvlfm.jpg

    Firefox-

    http://i57.tinypic.com/5xjq6p.png

    Any ideas how I can change that?

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,146
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Hi the.loserkid, welcome to the forums.

    Are things better if you fix the mark-up?
    http://validator.w3.org/check?uri=ht...Inline&group=0

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    I see the 2 screenshots of the.loserkid are quite different from the online site (with the html-errors).
    And my Firefox is doing well, 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?

  4. #4
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    http://www.speedyshare.com/T4G5R/htmlmarkup.txt

    The CSS file for the homepage:

    http://www.speedyshare.com/s9RxS/zinnia.css

    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML markup:

    Code:
    <!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 &copy; 2014 <a href="WDSI">WDSI</a></p>
    </footer>
    </body>
    </html>
    CSS Mark Up:
    Code:
    @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;}

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You have this:

    Code:
    <link rel="stylesheet" href="zinnia.css" type="css/text"/>
    It should be:
    Code:
    <link rel="stylesheet" href="zinnia.css" type="text/css">
    type="text/css" not type="css/text" (although in html5 you can drop the type attribute altogether).

  8. #8
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •