Need help with more completed layout

[cgacfox]

This is my second design I am attempting using CSS instead of tables. I am coming along ok but am now stuck. I am not sure why there is a gap between the middle border and the bottom border. Also I need to get the inner frames set and the content in them. The middle frame will be scrolling since I don't want the page too long.

The mock up can be seen at http://coloradofoxden.com/atlantica/...pic_site_1.png

The index page is http://coloradofoxden.com/atlantica/index.html

CSS code is at http://coloradofoxden.com/atlantica/css/epic.css

There will be 3 sections of content. The top will be the welcome stuff, the middle will be news, and the bottom will be for special info. The text needs to fit inside these frames. I need help getting the text in these frames and fixing the gap at the bottom between the mddle and the bottom border images. Please understand that I am still very new to CSS so please answer in a manner that I can understand being a newie to CSS. Do I need to do a wrapper even though I am not sure what a wrapper does? Thanks for being patient with me.

[dtm32236]

<h2 style="margin-bottom:0">This section is for our illustrious guild leader to add comments. </h2>

[cgacfox]

Nice! That worked. Now for the rest. However, I am a little confused as to why I am adding styles to the HTML. I have several pages that are going to require this fix.

[dtm32236]

Well, I just wanted to point out that it was the margin on your H2 block. But you're right, you'd be a lot better off putting that in your style sheet.

[cgacfox]

Well I have been playing with the CSS code and can't figure out how to fix it through the CSS. Hints?

[cgacfox]

Ok this is what frustrates me about CSS. I have tested in IE6, IE7, Firefox, Opera, and Safari. The colored scroller in IE6 and IE7 doesn't work in Firefox, Opera, and Safari, At the top of the page where the top border is there is a space in all but IE7. I can't get the bottom space to go away in any of them tweaking the CSS only. The nav section is centered in IE6 and IE7 but it's over to the right with the rest. Gettings PNGs to work in IE6 is almost impossible. I really need to learn to use CSS but at what price? The learning curve is huge and all the browsers are still not close to each other. I don't even want to think what IE8 will do to the page. Could someone with lots of patience walk me through fixing all my problems with the index page. After I get everything to work, I can move on to the rest of the site with ease. Thank you very much.

[dtm32236]

Well, what you should be doing is coding and testing with Firefox or Opera. Then test the pages in IE6, 7 and Safari. This is because FF and Op follow the W3C's standards more strictly than other browsers, meaning that if it works in FF or Op, your code will be 'correct'.

Then, test in the other browsers and 9 times out of 10, if something is wrong, it's the browser's fault. Not yours.

One hack that I find to be very useful is the underscore hack. With this, you'd place an underscore in front of your css, eg: width:100px; _width:105px; and IE6 will read the second one, not other browsers will. That will come in handy for you.

Of course, you can use IE conditional statements or even your own IE6/7 stylesheets (but I try to avoid doing that).

One other thing to do is to validate your code and fix any errors:
http://validator.w3.org/ (html)
http://jigsaw.w3.org/css-validator/ (css)

One other thing I would suggest, as far as design goes, is to avoid using those scroll bars in the middle of the page. If your content is unusually long you're better off breaking it up into different pages.

Anyway, code with FF and/or Op, test with IE6, 7 and Safari. That will reduce the amount of 'errors' dramatically.

Good luck with everything!

[oddz]

http://www.sme-s-key.com/atlantica/a...ca_online.html

Take a look at that and ask if you have any questions. Pay particular attention to how everything has been sliced up.