Buggered CSS(?)

pingu

Fledgling Freddie
Joined
Oct 10, 2005
Messages
8
Hi!

As I have a blog myself which needs a new site design. I went on designing it in Photoshop, then spliced it then put it together in CSS+XHTML. However, my main browser is Firefox which shows CSS the right way anyway. The site looks screwed and not proper. In IE it is another story however! I'm flabbergasted because the CSS looks proper and correct! Any help would be appreciated!

http://www.gibbed.org/~james/shiny/new/stuff/here/too/index.html

layout.css
Code:
body {
		background-color: #EFEFEF;
		margin: 0px;
		font-family: Arial, Verdana;
		font-size: 11px;
		}
		
h1,h2,h3,h4,h5,h6,h7 {
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-size: 14px;
		color: #C80000;
		}
		
#container {
		width: 780px;
		padding: 0px;
		background-color: #E9E8C5;
		background-image: url(images/bg.png);
		margin: 0 auto 0 auto;
		height: 100%;
		}

#header {
		float: left;
		width: 780px;
		background-image: url(images/header.png);
		height: 70px;
		}

#menu {
		float: left;
		width: 780px;
		background-color: #800000;
		background-image: url(images/navigation.png);
		height: 21px;
		}

#lcolumn {
		float: left;
		width: 52px;
		}

#content {
		padding-top: 10px;
		float: left;
		width: 640px;
		}

#rcolumn {
		float: left;
		width: 88px;
		height: 92px;
		background-image: url(images/gradient.png);
		background-repeat: repeat-x;
		}

#footer	{
		float: left;
		width: 780px;
		color: #990000;
		font-size: 8px;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		text-align: center;
		padding-bottom: 2px;
		}
 

Penguin

Fledgling Freddie
Joined
May 11, 2005
Messages
375
Working on it atm, firstly though, for the background to display in the content divide, you will need to give it the background property.
 

Penguin

Fledgling Freddie
Joined
May 11, 2005
Messages
375
Okay - Displays properly in Firefox and IE now i believe.

I removed the "lcolumn" Divide - It didn't appear to have a use aside from padding? So i added left padding to the content divide. I changed the width of the content divide also and placed the "rcolumn" divide inside it. To position it right i removed the top padding in the content divide and added a new divide "toppadding" to replace it.

layout.css:
Code:
body {
        background-color: #EFEFEF;
        margin: 0px;
        font-family: Arial, Verdana;
        font-size: 11px;
        }
        
h1,h2,h3,h4,h5,h6,h7 {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 14px;
        color: #C80000;
        }
        
#container {
        width: 780px;
        padding: 0px;
        background-color: #E9E8C5;
        background-image: url(images/bg.png);
        margin: 0 auto 0 auto;
        height: 100%;
        }

#header {
        float: left;
        width: 780px;
        background-image: url(images/header.png);
        height: 70px;
        }

#menu {
        float: left;
        width: 780px;
        background-color: #800000;
        background-image: url(images/navigation.png);
        height: 21px;
        }
#toppadding {
        float: left;
        width: 640px;
        height: 10px;
        }
#content {
        float: left;
        width: 728px;
        height: 100%;
        background-image: url(images/bg.png);
        padding-left: 52px;
        }

#rcolumn {
        float: right;
        width: 88px;
        height: 92px;
        background-image: url(images/gradient.png);
        background-repeat: repeat-x;
        }

#footer    {
        float: left;
        width: 780px;
        color: #990000;
        font-size: 8px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        text-align: center;
        padding-bottom: 2px;
        }

index.html:
Code:
<!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=iso-8859-1" />
<title>quiffy</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <div id="container">
        <div id="header"></div>
        <div id="menu"></div>
                <div id="content">
                    <div id="toppadding"></div>
                    <div id="rcolumn"></div>        
                <h3>a nursery rhyme...</h3>
                <p>Humpty Dumpty sat on a wall,
                <br />
                  Humpty Dumpty had a great fall,
                <br />
                  All the king's horses and all the king's men,
                <br />
                  Couldn't put Humpty together again.</p>
                <br />

                  <br />
                  <br />
                  <br />
                  <br />
                  <br />
                  <br />
                  <br />
                  <br />
                  <br />

                  <br />
                  <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />

                  <br />
                  <br />
                  <br />
                  <br />
                  <br />
                  <br />
                  <br />
                  <br />
                  </div>

        <div id="footer">powered by iridescent omnipotent slaves</div>
    </div>

</body>
</html>
Hope that helps.

- Penguin.
 

pingu

Fledgling Freddie
Joined
Oct 10, 2005
Messages
8
Yeah it does. Much appreciated. Will look into it in-depth now and understand how it all works. I thought I had a solid understanding of CSS but you learn something new every day I guess!

Next on the step is to tackle wordpress!
 

Penguin

Fledgling Freddie
Joined
May 11, 2005
Messages
375
Most welcome. I'm only just getting the hang of divides, at the moment i still use tables. It was good practice. :p

- Penguin.
 

Users who are viewing this thread

Top Bottom