This should be the last of a series of problems...hopefully !

When my site is viewed in Firefox, the main text appears in the correct place, but when viewed with IE the main text seems stuck to the bottom of the page. Does anyone know how to fix this?

The Site

Your Website looks good in Opera 9, Safari 2 and Camino on Mac OS as well. And ieCapture tells me that the page looks just fine in Windows Internet Explorer 7 too.

This seams to be an Microsoft Internet Explorer 6 related bug. I looked at your code, but could not find what causes this.

I think it's because of the way IE handles the box model. I think if you reduce the width of the main content area to account for any borders or padding you've added to it you'll find it jumps back into place.

How do i fix that then?

Chrisy: add float: left; to your #lcontent div.

#lcontent
{
position: relative;
float: left;
font-size: 10px;
padding: 0px 15px 0px 15px;
}

I put in the float: left; but it appears to have either not worked, or i have put it in the wrong place, can someone tell me exactly where to put this code. Or do it for me so i can copy and paste it in.

Hi Chrisy,

Here are some issues that I see that may or may not have anything to do with
your question, but, they should be fixed.

1) This is in between the head container. You should drag it down right below your
open body tag...

<center> <a href="http://www.freewebs.com/extreme-soundz"
target="_top"><img 
src="http://img220.imageshack.us/img220/4682/bannerav2.gif"
width=686 height=200 border=0 ALT="Back to Homepage"></a>
</center>

2) What is this?

<background="http://img228.imageshack.us/img228/2042/bguy7.gif">

3) Viewing the page in Firefox/1.5.0.6 the text isn't at the bottom of the page, but
it doesn't line up correctly.

4) I haven't look real close at your css code, but what you might want to try is
doing some math.

If you have 2 divs side-by-side, nested within another div. If the 2 nested divs are
too wide to fit into the the holding div the one one too the right usually will kick
down and show below.. You need to take into account borders, padding, and
margins...

For instance, if you have 2 divs that are 200 pixels each side by side they equal
400 pixels. If they are nested in a div 400pix wide, no problem. Unless that div has
a margin, padding, or a border. These factors will decrease the inside space and if
set to more than 0, the right nested div will not fit and shift below. (Hope this
makes sense.)

Like I said I didn't do the math. So this may not be the problem. Many times it is...

If you persist with the problem. A great way to trouble shoot is to start at the
bottom and remove an element at a time and see what happens as you remove
each. This may isolate where the problem begins..

If you are going to use Float, then you MUST give the floated element a defined width.

Add a proper DOCTYPE of at LEAST HTML 4.01 strict to your document.

You've got a <p> INSIDE a <ul> .. that is not proper html, you cannot put block elements inside a list like that. Use a real list for your menu and drop out the <p>. You can also get the rollover effect without javascript.

On your hover/rollover state, your color contrast isn't good. The text almost disappears and becomes barely readable. This would be a big problem for someone who has colorblindess conditions.

You do have some alignment issues, your text on the right is overlapping your menu. You are definitely getting float-drop in IE, which is why the right-side content is dropping under your menu. Make sure the total for the box width, plus margins, plus padding is not wider than the container it sits in (what Chip said basically).

Originally Posted by ChipJohns

Hi Chrisy,

Here are some issues that I see that may or may not have anything to do with
your question, but, they should be fixed.

1) This is in between the head container. You should drag it down right below your
open body tag...

<center> <a href="http://www.freewebs.com/extreme-soundz"
target="_top"><img 
src="http://img220.imageshack.us/img220/4682/bannerav2.gif"
width=686 height=200 border=0 ALT="Back to Homepage"></a>
</center>

2) What is this?

<background="http://img228.imageshack.us/img228/2042/bguy7.gif">

3) Viewing the page in Firefox/1.5.0.6 the text isn't at the bottom of the page, but
it doesn't line up correctly.

4) I haven't look real close at your css code, but what you might want to try is
doing some math.

If you have 2 divs side-by-side, nested within another div. If the 2 nested divs are
too wide to fit into the the holding div the one one too the right usually will kick
down and show below.. You need to take into account borders, padding, and
margins...

For instance, if you have 2 divs that are 200 pixels each side by side they equal
400 pixels. If they are nested in a div 400pix wide, no problem. Unless that div has
a margin, padding, or a border. These factors will decrease the inside space and if
set to more than 0, the right nested div will not fit and shift below. (Hope this
makes sense.)

Like I said I didn't do the math. So this may not be the problem. Many times it is...

If you persist with the problem. A great way to trouble shoot is to start at the
bottom and remove an element at a time and see what happens as you remove
each. This may isolate where the problem begins..

I have fixed problems 1 and 2, but i am still at a loss to problem 3.

Originally Posted by LadynRed

If you are going to use Float, then you MUST give the floated element a defined width.

Add a proper DOCTYPE of at LEAST HTML 4.01 strict to your document.

You've got a <p> INSIDE a <ul> .. that is not proper html, you cannot put block elements inside a list like that. Use a real list for your menu and drop out the <p>. You can also get the rollover effect without javascript.

On your hover/rollover state, your color contrast isn't good. The text almost disappears and becomes barely readable. This would be a big problem for someone who has colorblindess conditions.

You do have some alignment issues, your text on the right is overlapping your menu. You are definitely getting float-drop in IE, which is why the right-side content is dropping under your menu. Make sure the total for the box width, plus margins, plus padding is not wider than the container it sits in (what Chip said basically).

How do i add a proper DOCTYPE of at least HTML 4.01 strict?

I have dropped out the <p>

Like i have said before, im very new to all this, so please help!

I have fixed the alignment issue, with this bit of code.

margin: 5px 0px 0px 40px;

Not sure if that was the best way to do it, but it seems like it works.

very nice design

DOCTYPES: A List Apart: Articles: Fix Your Site With the Right DOCTYPE!

You dropped the <p> out of your <ul> but you have no list ! If you're going to use <ul> then the elements that make up your list must each be enclosed in <li></li>.

I'm still not clear on your problem in #3.

Originally Posted by LadynRed

DOCTYPES: A List Apart: Articles: Fix Your Site With the Right DOCTYPE!

You dropped the <p> out of your <ul> but you have no list ! If you're going to use <ul> then the elements that make up your list must each be enclosed in <li></li>.

I'm still not clear on your problem in #3.

Fixed Thanks