Help with newbie CSS, how to duplicate this?

I'm must be a complete moron.
Here's my test page
<a style='text-decoration: underline;' href="http://www.3dshoots.com/sched3/index.html" target="_blank">www.3dshoots.com/sched3/index.html</a>

I have a bunch of questions.
1) why doesn't the red background line "information.." not extend the
width of the box below it.

2) why doesn't the footer extend the width the box above it.

3) why does this page look so much different under netscape 7.1 &
mozilla. Under IE 6 most things end up where the should. Under
Mozilla you can even see the top have of the "Information" box.
Someone said earlier versions of netscape chopped off the top as well.

4) did I lay this out the wrong way?

Thanks for any advice



On Wed, 16 Jul 2003 21:02:59 +0100, "William Tasso" <ngx DeleteThis @tbdata.com>
wrote:

 >MeNotHome wrote:
  >> How do I duplicate the look of the "about box" on
<font color=green>  >> <a style='text-decoration: underline;' href="http://www.oscommerce.com</font" target="_blank">www.oscommerce.com</font</a>>
  >> using CSS
  >>
  >> I was looking at the html code for this page and they used tables for
  >> this.
  >>
  >> If I want to create this with <Div>'s how do I do this.
 >
 ><div id="about">
 > <p class="abouthead">about</p>
 > <ul>
 > <li>news</li>
 > <li>about</li>
 > <li>stuff</li>
 > </ul>
 ></div>
 >
 >add styles to suit and bake for 20 minutes at gas mark 5<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Help with newbie CSS, how to duplicate this? 

MeNotHome wrote:
[please don't top-post]
 > On Wed, 16 Jul 2003 21:02:59 +0100, "William Tasso" <ngx DeleteThis @tbdata.com>
 > wrote:
 >
  >> MeNotHome wrote:
   >>> How do I duplicate the look of the "about box" on
<font color=brown>   >>> <a style='text-decoration: underline;' href="http://www.oscommerce.com</font" target="_blank">www.oscommerce.com</font</a>>
   >>> using CSS
   >>>
   >>> I was looking at the html code for this page and they used tables
   >>> for this.
   >>>
   >>> If I want to create this with <Div>'s how do I do this.
  >>
  >> <div id="about">
  >> <p class="abouthead">about</p>
  >> <ul>
  >> <li>news</li>
  >> <li>about</li>
  >> <li>stuff</li>
  >> </ul>
  >> </div>
  >>
  >> add styles to suit and bake for 20 minutes at gas mark 5

 > I'm must be a complete moron.
 > Here's my test page
<font color=purple> > <a style='text-decoration: underline;' href="http://www.3dshoots.com/sched3/index.html</font" target="_blank">www.3dshoots.com/sched3/index.html</font</a>>
 >
 > I have a bunch of questions.
 > 1) why doesn't the red background line "information.." not extend the
 > width of the box below it.
 >
 > 2) why doesn't the footer extend the width the box above it.
 >
 > 3) why does this page look so much different under netscape 7.1 &
 > mozilla. Under IE 6 most things end up where the should. Under
 > Mozilla you can even see the top have of the "Information" box.
 > Someone said earlier versions of netscape chopped off the top as well.
 >
 > 4) did I lay this out the wrong way?
 >

not necessarily 'wrong' but you do appear to have made it a triffle more
complex than it needs to be.

try this methodology:
start a new test page
lay down some markup - with IDs and class names if you like
add some css styling - fiddle with it till you're happy
finally, add in some css positioning

in all your work: keep it simple

position:absolute is killing your page - let it float

there will be inconsistencies between browsers, decide if they are really
hurting your page - only developers will view your page in more than one
environment. If so you will need to research box model hacks to get the
result. for NN4 (and ie4) I would advise you simply hide the css with
@import so these browsers just get your markup - users of these browsers are
familiar with boring layouts

HTH - sorry I don't have time to go into more specific detail.

--
William Tasso - <a style='text-decoration: underline;' href="http://www.WilliamTasso.com" target="_blank">http://www.WilliamTasso.com</a><!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Help with newbie CSS, how to duplicate this?