A little CSS help

Amp34 · 1 Feb 2007 at 02:37

I'm putting together a website using CSS but am having trouble getting it to display properly. I can get it to work in either IE7 or FF but not both at the same time. :mad:

Here is the website, at the moment it is set to work with FF.

The problems I have are the image is slightly too short in FF if it fits in IE and destroys the page in IE if it fits FF.

The second major problem is the bar just below the picture either hides behind the picture in FF if it's in the right place in IE or is where its shown at the moment.

I want the site to eventually look a bit like this.

Here is the code.

CSS

Code:

body {
background-color:#CCCCCC;
}
#container {
width:770px;
margin-left: auto;
margin-right: auto;
}
#content {
background-color:#e1e1e1;
width:765px;
border-width:2px;
border-style:solid;
border-color:#000000;
}
#base {
margin-top:130px;
float:none;
height:25px;
border:2px solid black;
border-left:0px;
border-right:0px;
background-color:#444444
}
#topleft {
float:left;
width:130px;
height:130px;
border-right:2px solid black;
background-color:#444444;
}
#image {
float:right;
width:633px;
overflow:hidden;
}

HTML

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Andy</title>
<link rel="stylesheet" type="text/css" href="site.css" />
</head>

<body>
<div id="container">
  <div id="content" >
    <div id="topleft" > </div>
    <div id="image" ><img src="/images/website/main635.jpg" width="635" height="130"></div>
    <div id="base" >  </div>
    <p>centre of page</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p></p>
  </div>
</div>
</body>
</html>

Any help in sorting it would be greatly appreciated.

Thanks

Amp34 · 1 Feb 2007 at 14:41

Ah yeah thanks dude that works now.

Idiot me deleted that part accidently from the html file then didn't think to put it back... :rolleyes:

I have another couple of quick questions, probably no hopers but...

First one is that I want the background to be a gradient, problem is the pages will be different sizes so i cant use an image, I came across a way of doing it with a php file embedded but cant find the code. Does anyone know it?

Edit: I just found this code but cant get it do display on the whole page, it stops at the base of the main box, not the base of the page.

Code:

background-color:#666666;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#666666' ,endColorStr='#cccccc' ,gradientType= '0' );

http://skeletorscorpse.com/joomla/content/view/26/34/

What would I need to add to get it to go right to the bottom?

Second question, is there any way of making shadows in CSS? From articles i found in google it seems not but they all seem to be a year or to old, is the only option an image?

Thanks guys.

Amp34 · 1 Feb 2007 at 15:16

Is there any way I could make the image repeat so it follows the box size or would I need to do that manually, setting the length of shadow for each box?

A little CSS help

Amp34

Amp34

Amp34

Amp34

Amp34

Amp34