SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PLEASE HELP! CSS NOT WORKING IN FIREFOX OR IE BUT WORKS IN CHROME

    Hello, I am trying to make my website work in firefox and IE. It looks great in chrome but all the styles fail in firefox and IE. I am very much a beginner so please bear with me.



    Here is the CSS coding

    body { background: #FFFFFF; color: #666666; background-image: url(background.jpg); Background-position: top left; background-repeat: repeat-x; font: normal normal 12px Helvetica, sans-serif }

    header {background: #000033; color: #FFFFFF; margin-bottom:0; background-image: url(sunset.jpg); Background-position: right; background-repeat: no-repeat; padding:10px; font-family:Georgia, serif; }
    nav { padding: 20px 5px 5px 20px; font-weight:bold; float:left; width:150px; }
    #nav ul { list-style-type: none; margin:0; padding-left:0; font-size:1.2em; }
    #nav a {text-decoration:none;}
    #nav a:link {color: #000033; }
    #nav a:visited {color: #344873; }
    #nav a:hover {color: #FFFFFF; }

    h2 {color: #3399cc; font-family:Georgia, serif; text-shadow:1px 1px 1px #ccc; }
    h3 {color: #000033; font-family:Georgia, serif; }
    dt {color: #000033; }
    .resort {color:#000033; font-weight:bold; }
    #wrapper{width:80%; min-width:960px; background-color:#90C7E3; overflow:auto; box-shadow:5px 5px 5px #000033; -webkit-box-shadow:5px 5px 5px #000033; -moz-box-shadow:5px 5px 5px #000033; }
    #content { background-color:#FFFFFF; padding:1px 20px 20px 30px; margin-left:150px; overflow:auto; }
    #content img {float: left; padding: 20px; }
    #content ul {list-style-position: inside; }
    #address {font-size: 90%; }
    footer {font-size: 75%; font-family: Georgia, serif; font-style: italic; }
    header, hgroup, nav, footer, figure, figcaption, aside, section, article {display: block; }
    #mobile {display: inline; }
    #desktop {display: none; }
    img {max-width: 100%; height: auto; }
    @media only screen and (max-width: 768px) {
    body {margin:0;}
    #wrapper {min-width:0; Width:auto}
    #content {margin-left:0; }
    nav { float: none; width: auto; padding: 0; }
    footer { margin-left: 0; }
    }
    @media only screen and (max-width: 480px) {
    body {margin:0;}
    #wrapper { width:auto; min-width:0; margin:0; }
    #content { padding:.1em,1em,.1em,1em; margin:0; font-size: 90%; }
    header {margin:0; font-size:1.5em; padding-left:.3em; }
    #content { float:none; padding:0; margin:.1em; }
    #mobile { display:inline;}
    #desktop { display:none; }

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Lol. Let me pull out my magic crystal ball to see what's not working. Ahh the gods are confused because they need something to go on. What's not working???

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As mentioned above we'd need more code to go on. Do you have a link to the page in question?

    You do have two errors in that css which you may want to fix first.

    Add the closing tag to the last media query and fix this padding rule ( padding:.1em,1em,.1em,1em; ).
    It should be:
    padding:.1em;

    (assuming you meant .1em and not 1em - either way remove the commas as they are not a valid separator in that rule)

    Code:
    @media only screen and (max-width: 480px) {
    body {margin:0;}
    #wrapper { width:auto; min-width:0; margin:0; }
    #content { padding:.1em; margin:0; font-size: 90%; }
    header {margin:0; font-size:1.5em; padding-left:.3em; }
    #content { float:none; padding:0; margin:.1em; }
    #mobile { display:inline;}
    #desktop { display:none; } 
    
    }/* add this */

  4. #4
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry here is the site:

    http://www.davidkosak.vacau.com/mod8/

    Basically nothing works in firefox and IE. No colors, pictures backgrounds etc. In chrome it works fine. here is the coding for the home page if that helps





    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name= "viewport"
    content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
    <script src=" http://html5shim.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
    <title> Pacific Trails Resort </title>
    <meta charset="utf-8">
    <link href="pacific.css" type="style/css" rel="stylesheet" />
    </head>
    <body>

    <div id="wrapper">
    <header>
    <h1>Pacific Trails Resort</h1></header>

    <nav>
    <ul>
    <li><a href="index.html">Home</a></li> <li><a href="yurts.html">Yurts</a></li>
    <li><a href="activities.html">Activities</a></li> <li><a href="reservations.html">Reservations</a></li>
    </ul>
    </nav>
    <div id="content">

    <h2 class="resort"><strong>Enjoy Nature in Luxury</strong></h2>

    <img src="coast.jpg" alt="Coast View" />


    <p><span style="color:black"> Pacific Trails Resort</span> offers a special lodging experience
    on the California North Coast. Relax in serenity with panoramic view of the Pacific Ocean.</p>

    <ul>
    <li>Private yurts with decks overlooking the ocean</li>
    <li>Activities lodge with fireplace and gift shop</li>
    <li>Nightly fine dining at the Overlook Cafe</li>
    <li>Heated outdoor pool and whirlpool</li>
    <li>Guided hiking tours of the redwoods</li>
    </ul>


    <div id="contact">
    <span class="resort">Pacific Trails Resort</span><br>
    12010 Pacific Trails Road<br>
    Zephyr, CA 955555<br><br>
    <a id="mobile" href="tel:888-555-5555"> 888-555-5555<br><br></a> <span id= "desktop">888-555-5555</span>
    </div>

    <footer>
    Copyright &copy;2011 Pacific Trails Resort<br />
    <a href="mailto.david@kosak.com">david@kosak.com</a>

    </footer>
    </div><!-- #content -->
    </div><!-- #wrapper -->
    </body>
    </html>

  5. #5
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Check your link to your stylesheet. It should be:

    Code:
    <link rel="stylesheet" type="text/css" href="pacific.css">

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes as mentioned above you need to use this:

    type="text/css"

    and not :

    type="style/css"



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
  •