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

joeyjojo · 1 Feb 2007 at 07:33

If this was IE6 I would suggest it's an issue with borders. IE6 doesn't work out borders and widths/heights the same way as ff/opera etc. It adds the border onto the width, whereas ff includes it or something like that(?) But this is IE7.

Augmented · 1 Feb 2007 at 09:20

joeyjojo said:
If this was IE6 I would suggest it's an issue with borders. IE6 doesn't work out borders and widths/heights the same way as ff/opera etc. It adds the border onto the width, whereas ff includes it or something like that(?) But this is IE7.

The incorrect box model issue in IE6 is related the rendering mode the browser is in i.e. quirks = broken IE5 box-model, standards = correct box-model.

Mode is switched with the doctype, and so without one in the markup, the site is being rendered in quirks mode. I'd recommend first giving the site a doctype to place it in standards mode across all browsers, giving a level-ground to work with. Add:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or

Code:

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

before your <head> depending on whether you're using XHTML or HTML (the markup posted is a mixture of both).

More info: http://www.satzansatz.de/cssd/quirksmode.html

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.

LazyManc · 1 Feb 2007 at 14:51

Unless you want a solid colour shadow then you'll have to use an image, but you can position it using css.

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?

LazyManc · 1 Feb 2007 at 15:45

Amp34 said:
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?

If you make it a background image, then yes, you can use the background-repeat property.

joeyjojo · 1 Feb 2007 at 17:16

Yep, just make it 1 pixel wide for example:

Code:

#gradientdiv{background:url(gradient.gif) top left repeat-x;}