No CSS in IE

shammy2007 · #1 Feb 14th, 2008, 02:06

Now this is strange. Ive made several site before using XHTML/CSS and they work fine in IE. I use firefox but went to test my own personal site there now and the Skin is not showing up at all in IE.
But its fine in firefox. Ive tried searching here but did not find any answers, im pretty tired also so thats also an issue lol.

here is my CSS code.

Code: Select all

body {
    margin: 0;
    padding: 0;
    background: #333333 url(images/image01.gif)repeat-x;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #666666;
}

h1, h2, h3 {
    margin-top: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1em;
}

ul {
    list-style-image: url(images/img07.gif);
}

a {
    color: #333333;
}

a:hover {
    text-decoration: none;
    color: #000000;
}

a img {
    border: none;
}

img.left {
    float: left;
    margin: 0 20px 0 0;
}

img.right {
    float: right;
    margin: 0 0 0 20px;
}

/* Header */

#logo {
    width: 750px;
    height: 65px;
    margin: 0 auto;
}

#logo h1, #logo p {
    margin: 0;
    color: #FFFFFF;
}

#logo h1 {
    float: left;
    padding-top: 30px;
}

#logo p {
    float: right;
    padding-top: 39px;
    font-size: 1.2em;
}

#logo a {
    text-decoration: none;
    color: #FFFFFF;
}

/* Menu */

#menu {
    width: 778px;
    height: 45px;
    margin: 0 auto;
    background: #F6F6F6 url(images/img02.gif) no-repeat;
}

#menu ul {
    margin: 0;
    padding: 5px 0 0 14px;
    list-style: none;
}

#menu li {
    display: inline;
}

#menu a {
    display: block;
    float: left;
    height: 29px;
    padding: 11px 30px 0 30px;
    text-decoration: none;
    font-weight: bold;
    color: #333333;
}

#menu a:hover {
    text-decoration: underline;
    color: #000000;
}

#menu .current_page_item a {
    background: url(images/img06.gif) repeat-x;
}

/* Page */

#page {
    width: 778px;
    margin: 0 auto;
    background: #FFFFFF url(images/img05.gif) repeat-y;
}

#page-bg {
    padding: 11px 24px;
    background: url() no-repeat;
}

/* Latest Post */

#latest-post {
    padding: 20px;
    border: 1px solid #E7E7E7;
}

/* Content */

#content {
    float: left;
    width: 420px;
    padding: 20px 0 0 20px;
}

.post {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #E7E7E7;
}

.title {
    margin: 0;
}

.title a {
    text-decoration: none;
}

.title a:hover {
    border-bottom: 1px dotted #999999;
}

.byline {
    margin: 0 0 20px 0;
}

.entry {
}

.links {
    padding-top: 10px;
    text-align: right;
    font-weight: bold;
}

/* Sidebar */

#sidebar {
    float: right;
    width: 230px;
    padding-right: 20px;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar li {
}

#sidebar li ul {
    margin-bottom: 10px;
    padding-bottom: 10px;
}

#sidebar li li {
    padding: 5px 20px 5px 35px;
    background: url(images/img07.gif) no-repeat 20px 50%;
    border-bottom: 1px solid #F3F3F3;
}

#sidebar h2 {
    margin: 0;
    padding: 24px 0 3px 20px;
    border-bottom: 1px solid #E7E7E7;
    letter-spacing: -1px;
    font-size: 1.2em;
    font-weight: bold;
}

#sidebar a {
    text-decoration: none;
}

#sidebar a:hover {
    text-decoration: underline;
}

/* Footer */

#footer {
    width: 750px;
    margin: 0 auto;
    padding: 20px 0;
    background: url(images/img08.gif) no-repeat;
}

#footer p {
    margin: 0;
    text-align: center;
    font-size: smaller;
    color: #666666;
}

#footer a {
    color: #666666;
}

Im clearly missing something, just cant find what it is.
I hate it when this happens.

Monie · #2 Feb 14th, 2008, 02:27

This kind of problem is not related to your CSS file.
It could be the link to your CSS file is incorrect! Could you post the link to your HTML header?

shammy2007 · #3 Feb 14th, 2008, 02:52

Here is the header in my HTML.

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--


-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MY WEBSITE</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="logo" style="width: 750px; height: 72px">
    <h1><img src="http://www.webforumz.com/images/head.gif" width="400" height="40">
    </h1>
    
</div>
<div id="menu">
    <ul>
        <li class="current_page_item"><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">VIDEOS</a></li>
        <li><a href="#">ABOUT ME</a></li>
        <li><a href="#">MAIL ME</a></li>
    </ul>
</div>
<!-- end header -->

Monie · #4 Feb 14th, 2008, 03:15

What do you mean by It is not showing in IE? The CSS style?
Do you have this hosted somewhere? Your code seems fine with me..

shammy2007 · #5 Feb 14th, 2008, 17:02

I know my question sounded like im insane lol. Ive posted up 2 screenshots, the one screenshot with the color background is in firefox and how my site is meant to look. And the other is a screenshot from Internet Explorer.

This is the only time ive ever had this happen. Kindda just weird.

Aso · #6 Feb 14th, 2008, 17:05

You're not using @import's in default.css are you? That can throw off IE.

shammy2007 · #7 Feb 14th, 2008, 17:12

I dont know. The css is called default and i have posted the css in the very first thread at the top of this page. I have it set up they way i have all my other CSS set up. Totally confused

Aso · #8 Feb 14th, 2008, 18:03

Try putting a space between your background image url and repeat-x declaration. Like

Code: Select all

background: #333333 url(images/image01.gif) repeat-x;

shammy2007 · #9 Feb 14th, 2008, 23:57

Yes thank you very much. That just fixed the problem. I cant believe It was that simple. Thanks

Monie · #10 Feb 15th, 2008, 03:26

How good and genius FF are and see how bad IE are in interpreting the small code mistake

Nice eyes there aso186! I missed the code myself, LOL..

MikeHopley · #11 Feb 15th, 2008, 11:03

And the moral of the story?

Validate your CSS.

shammy2007 · #12 Feb 16th, 2008, 01:28

I cant believe I never validated my code. I think I may have got a bit cocky with the site. Thanks for all the replies.

Monie · #13 Feb 16th, 2008, 01:55

This is when the validating process comes helpful when detecting small mistake like this

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
No CSS in IE