CSS works in design view and live view but not browser preview
Sep 15, 2012 8:20 PM
Hello,
My web page looks great in Design view - everything just where I want it. When I click on Live View, things look really messed up and nowhere near as good and I'll have to fix that somehow. But the main problem I'm having is when I preview the page in a browser. Either Firefox or Internet Explorer, it just looks like it's not finding the CSS file. So I manually typed in the code in the header and that didn't work. So then I clicked the "link" button and browsed to find the CSS file and that didn't work. So then I opened just the CSS file, saved it as a CSS document, and it still didn't work. So I opened a page I know works correctly and compared the two and there just isn't a difference. Nothing is wrong with the paths or the code. In fact, I was getting so frustrated that I took down the regular "index.html" of a live website I have access to and replaced it with the one I'm having problems with. I uploaded my new css file and all my images, and even this webpage looks like it can't find the CSS. www.semaltra.com Below are the screenshots of what I see and I've also pasted my code. Can someone figure this puzzle out? It's been very frustrating!
here is the HTML code...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-9" />
<meta http-equiv="Content-Type" content="cache" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="keywords" content="Enter Keywords" />
<meta name="description" content="Description Here" />
<title>Conrad - Music, Life, Thoughts</title>
<!-- Google Analytics Code Goes Below Here -->
<!-- End Google Analytics Code -->
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
<img src="images/ConradLogo01.jpg" />
</div>
<div id="outer">
<div id="wrapper">
<div id="topnav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="music.html">MUSIC</a></li>
<li><a href="videos.html">VIDEOS</a></li>
<li><a href="bio.html">BIO</a></li>
<li><a href="photos.html">PHOTOS</a></li>
</ul>
</div>
<div id="banner">
<img src="images/ConradBanner01.jpg" />
</div>
<div id="leftnav"><h1>hhhhhhhhhhhhh</h1><br>
<p>This is some text that needs to be indented and stuff....</p>
</div>
<div id="content">
</div>
<div id="rightside">
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
and here is the CSS code...
@charset "utf-8";
/* CSS Document */
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike (
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
}
ol, ul { list-style: none; }
/* Global */
html { }
body { background-image:url(../images/background04.jpg); background-repeat:no-repeat }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #FFF; }
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
/* Text Elements */
p { color:#FFF; font-size:14px; line-height:150%; }
p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; }
a { color: #FFF; text-decoration:none; }
a:link { color: #FFF; }
a:visited { color: #FFF; }
a:active { color: #FFF; }
a:focus { color: #666; }
a:hover { color: #03F; }
blockquote { color: #000; font-size:12px; }
strong { font-weight: bold; }
em { font-style: italic; }
/* Images */
/* Lists */
ul { }
ol { list-style-type:decimal; }
ul li { color:#FFF; font-size:16px; }
ul li { color:#FFF; font-size:16px; }
dl { }
dt { }
dd { }
/* Containers */
#logo { width:586px; margin:150px 170px 0px 10px; float:right; }
#sprybanner { }
#sprybar {
position: relative;
}
#check_menu {
position: absolute;
left: 95px;
top: 580px;
right: 0px;
bottom: 0px;
}
#outer { width:1100px; margin:400px auto; background-color:#838383; background-image:url(../images/wrapper6.jpg); }
#wrapper { width:910px; margin:0 auto; }
#social-media-icons { }
#topnav { clear:both; }
#topnav ul { border-top:1px #000 solid; border-bottom:1px #000 solid;
margin:10px 0; padding:3px 0; }
#topnav ul li { display:inline; }
#topnav ul li a { padding:0 20px; }
#topnav a:link { color: #FFF; font-weight:bold; }
#topnav a:visited { color: #FFF; }
#topnav a:active { color: #FFF; }
#topnav a:focus { color: #666; }
#topnav a:hover { color: #03F; }
#topnav {background-color:#000; }
#banner { margin:40px auto; }
#rightside { }
#content { width:750px; margin:100px auto; }
#footer { clear:both; }
#leftnav { }
#box1 { }
#box2 { }
#box3 { }
#box4 { }
#box5 { }
#box6 { }
Any help would be appreciated, thanks in advance.
