Hey, everyone.

I"m trying to build a new site layout to replace my old one, and I want to stick with validated XHTML and apply the W3C DOM, which means I don't want to use tables to form my layout.

So I got the layout looking how I wanted it, and then realized I was missing the definition tag. After I added it, the whole layout disintegrated.

I figured out the problem, though. I seems that there is blank space separating each of the DIV's in the layout. Other than using a hell of a lot of relative positioning, is there any way to make it so that the adjacent DIV's mesh together without any space separating them?

It's worth noting that margins and padding are set to 'zero' in all cases.

Here is the site:
http://www.forum-central.com/dewm/pcubed/

I tried changing how the DIV's were nested, but all that did was change the color of the blank space (in the current case, it's gray, which is the color of the background image, but if I unnest the DIV's, it's black - the page background color).

This is probably a really advanced, pain-in-the-arse question, but I can't seem to figure out the problem, and I would really appreciate the help.

Thanks a lot.

You are experiencing first hand why I chose to use table based layout even though W3C does not recommend it for XHTML 1.0/1.1 .

For one, it is hard. Not using <table> tags for layout and sticking with <div> coupled with CSS is very different for most designers. I tried it with my personal site, and only ran into problems. Not with the difficulty, read on.

Secondly, once you do have your layout done according to W3C specs and passes W3C validation, you load it up in IE. Chances are it will look like crap. IE's CSS implementation is more damaged than SCO's reputation. This leads to pages that look like utter crap when conforming "to W3C standards."

You actually have to hack up the CSS in order for IE to display the page correctly. Hacking up the CSS for IE usually breaks or changes the way the page looks in other, standards conforming browsers. So now you have a page that breaks standards and convention, looks like crap in standards conforming browsers, but looks nice in IE.

I said screw it, IE sucks, but CSS is a flawed system as well. I am going to use as much CSS as possible but keep <table> based layouts despite W3C saying "don't do that." Turns out to be the best decision I made. Page renders perfectly in all browsers and uses a helluva lot of CSS to boot.

I am not trying to turn you away from CSS based layout, but that is a wild front, and difficult to get looking decent.

The best resource I have found for CSS layout is below. After reading through the kludges one has to impose on the CSS to "fix" IE's broken box model and overall CSS implementation, I was done with using CSS for main layout.

http://glish.com/css/

-Weaver

your site looks fine to me,the code also looks fine to me.
You might consider on googling for HTML tidy which is basically a great program to convert your existing code into valid xhtml.Works like a charm if you get the hang of it

I just want to say that you can make your page a whole lot 'flashier' if you're using the hover thing with css.for instance your buttons-->
<style{
div.button{
background:url(name.gif);
size:80px;
height:20px;
}
div.button:hover{
background:url(name_of_hover_image.gif);
}
</style>

the hover will give the same effect as if you were having javascript to handle the rollovers.
it's really great!

Thanks for the tips. I'll definitely make use of them.

I originally had those "flashier" buttons that you were talking about, but JavaScript that Mozilla accepted would cause errors in IE, and vice versa. I thought about doing the DIV-based version like you suggested, and since I'm being advised to by a PRO, I probably will. :

You guys are a great group. It'll probably be a couple of eternities before I finish the site, but it's great to have the advice.

I'm not even near being a pro but i learned a lot bout css these days and i'm pssitive that css design is only restricted by your imagination.And it's W3c compliant so no need to worry about your validation
This is the god of css! Freaky css examples and free as hell

tachi wrote:

I'm not even near being a pro but i learned a lot bout css these days and i'm pssitive that css design is only restricted by your imagination.And it's W3c compliant so no need to worry about your validation This is the god of css! Freaky css examples and free as hell

Excellent link, thank you.

-Weaver