CSS design won't show in browser but shows in Dreamweaver??

Hello,

I am having problems getting my CSS design to show on my browser. When I am in dreamweaver i can see the design perfectly but when I try to view it in firefox or safari there is absolutely no design, just the basic layout. This is the first time using a program like this and I am so confused!

Here is the HTML & CSS....please help!

Expand|Select|Wrap|Line Numbers

 <!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>About Me</title>

<link href="/main.css" rel="stylesheet" type="text/css">

<style type="text/css">

a:link {

    text-decoration: none;

}

a:visited {

    text-decoration: none;

}

a:hover {

    text-decoration: none;

}

a:active {

    text-decoration: none;

}

</style>

</head>
 
<body>

<div id="wrapper">

  <header id="top">

    <h1 class="thispage">Jana Chanelle</h1>

    <nav id="mainnav">

      <ul>

        <h2><a href="home.html" class="thispage">HOME</a></h2>

        <h2><a href="about_me.html">BIO</a></h2>

        <h2><a href="portfolio.html">MUSIC</a></h2>

        <h2><a href="gallery.html">GALLERY</a></h2>

        <h2><a href="contact me.html">CONTACT ME</a></h2>

        </ul>

    </nav>

    <article id="mainarticle">

      <p><img src="/Jana Mustang.jpg" alt="" width="612" height="413" id="jana"/></p>

      <p style="font-size: x-large; text-align: center; font-weight: 500; color: #4AAAD6; margin-top: 50px;"><br>

      BIO</p>

      <p>TEXT

      <p>Jana is currently working on an original album which she plans to release late 2015.    </p>

      <p>&nbsp;</p>

      <p>&nbsp;</p>

      <p>&nbsp;</p>

    </article>

  </header>

  <footer>&copy; Jana Chanelle 2014 </footer>

</div>

</body>

</html>
 
CSS
 
@charset "UTF-8";

body {

    margin-top: 10px;

    margin-right: 10px;

    margin-bottom: 10px;

    margin-left: 10px;

    color: #151515;

    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;

    background-color: #EFF5F8;

    text-decoration: none;

}

#wrapper {

    background-color: #FFFFFF;

    width: 100%;

    min-width: 740px;

    max-width: 1000px;

    margin-top: auto;

    margin-right: auto;

    margin-bottom: auto;

    margin-left: auto;

    clear: both;

    text-decoration: none;

    color: #FF6500;

    top: 5%;

}

#hero {

    clear: left;

}

#hero article {

    width: 36%;

    padding-right: 10px;

    padding-left: 10px;

    clear: left;

    border-radius: 15px;

}

#hero img {

    max-width: 100%;

    background-color: #314137;

}

h1, h2 {

    color: #3399CC;

    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;

    font-style: normal;

    font-weight: 600;

    margin-top: auto;

    text-decoration: none;

    background-color: #FFFFFF;

}

h1 {

    font-size: 72px;

    margin-top: -15px;

    text-align: center;

    clear: both;

    text-decoration: none;

    height: 20%;

    min-height: 20px;

    max-height: 20%;

    top: 0%;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    margin-right: -15px;

    margin-bottom: -15px;

    margin-left: -15px;

}

#main {

    width: 323px;

    float: left;

    margin-left: 2%;

    text-decoration: none;

    position: absolute;

    left: 588px;

    top: 283px;

    height: 148px;

    color: #FFFFFF;

    background-color: #4AAAD6;

    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;

    font-size: xx-large;

    text-align: center;

    border-radius: 15px;

    display: block;

}

#sidebar {

    width: 34%;

    margin-left: 4%;

    float: left;

}

#footer {

    clear: left;

    padding-top: 2%;

    padding-bottom: 2%;

}

#wrapper footer {

    padding-top: 2%;

    padding-bottom: 2%;

    clear: left;

    background-color: #43A6CB;

    color: #FFFFFF;

    text-align: center;

}

A:link {

    color: #F86300;

}

A:hover, A:focus, A:active {

    color: #7F3300;

}

#mainnav ul {

    list-style-type: none;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    margin-left: 0px;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 0px;

}

#mainnav a {

    width: 20%;

    display: block;

    padding-top: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    padding-left: 0px;

    margin-top: 0%;

    margin-right: 0%;

    margin-bottom: 0%;

    margin-left: 0%;

    background-color: #4D4D4D;

    height: 20%;

    max-height: 5%;

    float: left;

    color: #FFFFFF;

    text-align: center;

}

#top {

    background-color: #FFFFFF;

    max-height: 20%;

    min-height: 10%;

    bottom: 90%;

    -webkit-box-sizing: inherit;

    -moz-box-sizing: inherit;

    box-sizing: inherit;

}

#mainnav a:hover, #mainnav a:active, #mainnav a:focus #mainnav a.thispage {

    text-decoration: none;

    background-color: #43A6CB;

}

#mainnav a:active, a.thispage {

    background-color: #43A6CB;

}

#mainarticle {

    background-color: #EFF5F8;

    color: #000000;

    font-size: large;

}

#mainarticle p img {

    margin-top: 5px;

    margin-right: 5px;

    margin-bottom: 5px;

    margin-left: 5px;

    float: right;

}

#top #mainarticle p {

    margin-left: 15px;

    margin-top: 15px;

    margin-right: 15px;

    margin-bottom: 15px;

}

#mainarticle p img {

    float: right;

}

#mainarticle p .milhouse {

    float: left;

}

#mainarticle p #jana {

}

Sep 1 '14 #1

Subscribe Post Reply

1227

by: David van der kooij | last post by:

Hi, I have a webservice that returns an xmldocument. I write some processing isntructions to this xmldocument like this XmlProcessingInstruction myPI3; PItext = "progid='InfoPath.Document'";...

.NET Framework

Object browser shows pointer instead of reference

by: C# Expert | last post by:

I am using managed c++ code. I have created i function with one argument that is reference to double. fun(double& d) When I see it in object browser in visual studio 2005, it shows pointer...

C# / C Sharp

How to SHOW/HIDE a dreamweaver layer from a flash button?

by: a1000car | last post by:

I have almost 2 weeks tying to find a solution for this. Please help -How can you SHOW/HIDE an thml-dreamweaver layer from a flash movie button. My html layer name is LAYER1, and my FlashMC...

Flash / Actionscript

Show layer in Dreamweaver after 5 seconds

by: Jim | last post by:

How can I use Javascript to show a layer named "callout" after the page has been delayed for 5 seconds? Using the onLoad behavior to execute a "Call Javascript" action. What is the correct...

Javascript

ShowHelp wont show my Topic?

by: =?Utf-8?B?VHJhY2tz?= | last post by:

I want to show a specific help page in a .chm file from vb.net. This code shows the .chm file but it just goes to the first page or shows an error on the page: Help.ShowHelp(Me, "myhelp.chm",...

Visual Basic .NET

Line wont show up

by: qutspan | last post by:

When I create taskbox on the form the line beside the box wont show up. it show up untill I have MouseEnter event occur. Also when I have 2 taskbox on the form it does draw the line around the...

.NET Framework

JavaScript won't show ASP.NET var current value

by: Cirene | last post by:

I have javascript code that does an alert on a public asp.net var... alert("<%=strMessage%>"); The code runs whenever my ajax related code completes. I declared the public var like this......

ASP.NET

.gif wont show with image control

by: Andy B | last post by:

I have images in app_data folder. For some reason, the image control never shows them. What do I do?

ASP.NET

Video controls wont show in Firefox

by: KeredDrahcir | last post by:

I'm using the object tag to show a video. In IE it shows the controls but in Firefox it doesn't. Does anyone know why, and how I can show the controls? <object type='video/x-ms-wmv'...

HTML / CSS

Tumblr embedded swf wont show up in browsers, please help!

by: the goldn life | last post by:

Hi, im very very new to this stuff, and i dont really have a clue what im doing. basically, i have made an animation using flash cs5 using some gifs from the internet playing behind a cut out image...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

CSS design won't show in browser but shows in Dreamweaver??

Similar topics