your wrapper has a width of 480px + 2 times 5px for your borders = 490 px
your picture is 480 px .... you can find the solution I think...

that's allready 1 problem solved ;)

theres one down, keep em comin! thanks man! :)

-koss

Does this fix one of the problems?

#bloglist {
margin: 0
}

I think the best way to fix your last problem is to get rid of the right border on your last link.

I don't get what you mean. I tried taking the right border off the blog list, but nothing happend. However, I did get the other things fixed, now I just need to move that thing up a little more. Any final suggestions are more than welcome. Thanks :)

-koss

try this

div#wrapper {
	width: 470px;
	border: 5px solid #000000;
	margin: 0;
	padding: 0;

}

I already got that part taken care of. Now its just a matter of having it connect with the top part. Thats the last problem I've got.

-koss

then how come this is still in your css file ?

div#wrapper {
width: 470px;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
border-top: 5px solid #000000;
border-left: 5px solid #000000;
margin: 0 auto;
padding: 0;
}

margin: 0 auto;

Alright, took that part out. Now it's pushed to the side, and still not connected to the top image.

-koss

It is connected in Firefox, just not in IE. IE tends to add some margin around certain elements if you don't specify that there be none. The <div> that your image is in does not have margins specified.

It could also be the script you are using to display your image at the top. You have this code:

<SCRIPT LANGUAGE="JavaScript">document.writeln('<TD'+'><IMG SRC="'+xoxo[choice]+'" HEIGHT=300 WIDTH=480 BORDER=0 ><'+'/TD>');</SCRIPT>

Which is generating TD tags, but there is no table for them to be in. It could be that IE is adding some margin around those TD elements.

Try changing that line to this:

<script language="JavaScript">document.writeln('<img src="'+xoxo[choice]+'" class="headerimage">');</script>

That will create the image without the TD tags, and assign it a class of "headerimage" (you can change that part if you want) so you can adjust properties via CSS. You may not actually need to add anything to your CSS file, but at least you now have the ability to do so.

Also, you could remove that line from the DIV that it is in (and remove that DIV), and put it just inside your "wrapper" DIV.

As an aside, you could remove the JavaScript and use a server-side PHP function to generate your random image. That way your image display would not be dependant on JavaScript (Scott will be so proud of me for this one :) ). There's a recent discussion of this with some links to a couple of scripts [url=http://forums.b2evolution.net/viewtopic.php?t=4204]here[/url].

Oh, yeah - you can put back the 'auto' - it was centering your page, as you have discovered. It shouldn't affect the top margin.

Okay. The final thing. I got everything fixed, now the blog list wont connect on the right!

-koss

This fixes the problem on the right and introduces a slightly less annoying problem on the left:

chang

border-rightt: 5px solid #000000;

to

border-left: 5px solid #000000;

in ul#bloglist li

There's probably a really smart, elegant change you can make to get it exactly how you want it, but I can't figure out what it would be. If it was me I would probably replace the include for the bloglist with some hard-coded text. I'm having a problem getting the text to do what I want when it's enclosed in li tags.

I just said to hell with the bloglist. It's become more trouble than it's worth. lol. Thanks EVERYONE for all of your help :).

-koss