edd9139

http://www.photo-archive.jumbahost.com/edd2/index.php

I'm working on a simple template for a new site, and have encountered several problems. It was looking alright in html/css, and then after I inserted a php menu and converted the site to php, the layout started to get screwed up. So oculd anyone please tell me/show me how to fix the below issues.

Issue 1: The navigational vertical line is over too far to the right, and should be where the red dots are to line up with the horizontal lines. This was fine before I changed it to PHP. So how do I get it to align up with the horizontal lines again?

The blue dots on the image occurred when taking the image at low quality, they do not appear on site.

http://img148.imageshack.us/img148/1...eprob010vk.gif

http://img148.imageshack.us/img148/7...eprob027vn.gif

Image 1 shows where it is, and where it should be. Image 2 shows again where it should be.

Issue 2: This can be seen in http://img148.imageshack.us/img148/7...eprob027vn.gif The box (div???) on the left of the words ‘Filler’ should not be there, and again I do not know why it is there. So what do I do to remove this?

Issue 3: http://img208.imageshack.us/img208/1...eprob037rb.gif

In the red circle on the left, the rounded corner should not be there, and should in fact be where I circled blue, and I just cannot work out how to get it there, and where I’m going wrong. So what do I need to adjust?

Issue 4: At the top of the page, there is a 50px green area, and I wish to have one at the bottom, except have tried several different ways and just can’t seem to do it right. So how do I make a 50px green space at the bottom, to mirror the one at the top?

Any help is appreciated thanks.

Shorty

I can solve issue 2 right away.

Open the source and find:
<div class="style14" id="pageNav"></div>That div is empty and unneeded, i'm pretty sure thats the extra box. I'd like to point out it wasnt appearing in firefox and I was puzzled for a sec...it shows in IE though.

Anyway, I checked out issue 1 and to me it looks like you've already solved that, it's where you indicated it should be as I see it.

Issue 3: Your problems are actually bigger than that, view it in FireFox. They're actually in the right places in IE but not in FireFox. I'm not entirely sure this will work, but give it a try. Chances are i'm wrong, this thing normally requires a lot of trial and error.

Find <div class="relatedLinks"> and then find the </div> that closes the div, after all the links you've got. Try putting this directly after it:
<div style="background: url(bl.gif) no-repeat; width: 10px; height: 10px; float: left"></div>

Issue 4. If you look in your source code you've got <div id="pagecell1">. I looked into your css and here's the code for it:

#pagecell1{
position: absolute;top: 50px;bottom: 50px;
height: 90%;left: 2%;right: 2%;width:95.6%;background-color: #ffffff;
}

All you need is a new div along the same lines, but without position absolute. I'd suggest the following:

#bottomblock {
height:50;
background-color: #ffffff;
color:#ffffff;
}

And then at the bottom of your document simply have: <div id="bottomblock">.</div>

If I made any errors just reply here again and i'll fix them, good luck with it.