Hey all,
I'm doing a Science page for my school's web site, the 'beta' version of which can be seen here (http://www.tidalflame.net/dev/chss)

The problem, as you can probably tell, is that the background image I'm using as a border isn't showing up correctly. In Firefox it doesn't show up at all, and in IE it sort of goes to the middle of the page. I'm clueless as to why this is. Any help would be appreciated.

I don't quite see the background you mean -- the only difference I see between IE and Firefox is that the contents are a bit shifted to the left in IE. I couldn't find the background code in your source either... perhaps you could paste that section of your coding?

That's a lovely site by the way :)

Thanks... here's the relevant CSS (it's in an extenrnal file):


#holder
{
margin: 0px;
padding: 0px;
border: 0px;
background:white url("white.gif") repeat-y;
}

#mainleft
{
background-color: transparent;
width: 16%;
height: 100%;
padding: 2px;
margin: 0px;
float: left;
}

#mainright
{
background-color: transparent;
width: 82%;
height: 100%;
padding: 2px;
margin: 0px;
float: right;
}


and here's the relvant HTML (this starts right below the top links bar):


<div id="holder">
<div id="mainleft">

(Where the menu would be)

</div>
<div id="mainright">

(Main content goes here)

</div>
<div style="clear: both;"></div>
</div>


So as you can see, the background is applied to the holder div and should show under the other two in the top left... hence creating a fake border between the menu and the main content div. It doesn't work though =/

(I can't seem to edit my post -_- so I guess I'll have to double post...)

In case it's relevant, it works fine if I put the background on the right side, but then I have to make the image much longer and (despite the fact that as a compressed GIF it's < 100 bytes) loading gets slow in Firefox, plus the background doesn't display properly sometimes because the page loads before the image does...

I think it's a problem with that left (menu) div, but I'm not sure...

you can only edit for 5 minutes after posting.

i think it should be:

background-image:url(white.gif);
background:white;
background-repeat: repeat-y;

I don't know if you can put it all in one line like you did.

Thanks, but that's not it... as I said, the same code works fine if I put the image on the right, but then the image is too big and hence slow to load.

If you don't believe me, check here (http://www.w3schools.com/css/css_background.asp)

background: A shorthand property for setting all background properties in one declaration (background-color, background-image, background-repeat, background-attachment, background-position)

Sorry if that sounded rude... just pointing that out

like i said, i wasn't sure....

this may or may not help...

you are using a background image to create a border effect.

it seems a more logical solution would be to use an actual border color on your holder/mainleft/mainright areas instead. this will probably solve the current problem as well as conform nicer in different resolutions and browsers.

Yes, it would seem that way, but the problem is that AFAIK it's impossible to make either of those divs stretch to match the height of the other, which results in the border not going all the way down the main div if I do it that way... hence, it has to be done with a background image... if I'm wrong about that, please tell me, though