Buggered CSS(?)

pingu · Jan 22, 2006

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 · Jan 22, 2006

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 · Jan 22, 2006

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 · Jan 22, 2006

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 · Jan 22, 2006

Most welcome. I'm only just getting the hang of divides, at the moment i still use tables. It was good practice.

- Penguin.

Buggered CSS(?)

pingu

Fledgling Freddie

Penguin

Fledgling Freddie

Penguin

Fledgling Freddie

pingu

Fledgling Freddie

Penguin

Fledgling Freddie

Users who are viewing this thread