View Full Version : Why the gaps??

02-10-2005, 12:23 AM
I have a page which is fully XHTML 1.0 Strict compatible, and on IE it is fine, but on Opera, FF and Netscape 7, it has gaps between some of the divs. instead of posting the code, i'll link to the files:

index.html (http://www.robowhizards.com/examples/cf/index.html)
style.css (http://www.robowhizards.com/examples/cf/style.css)

Any help gr8ly apreciated!


02-10-2005, 12:28 AM
What gaps? What's the page suppose to look like? Why do you have a "valid XHTML" badge when your page isn't valid XHTML, nor being served as XHTML?

02-10-2005, 12:35 AM
It is valdi XHTML, atleast according to the validator!

As for the gaps, sorry for being unclear. There are gray lines across the page in two locations that are not there on IE.

The first is between the dk blue header image and the rest of the page, but it is sort of covered by the menu.

The second is between the white content area and the yellow bar at the bottom. That is also not supposed to be there.


02-10-2005, 12:57 AM
div img
}The online validator misses the unencoded ampersand near the bottom of your page. You also have
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />at the top of your page. Also, just a suggestion (I realise you may be new and using a WYSIWYG editor), you should look at restructuring your pages, especially to introduce some semantics. Getting rid of the Javascript navigation menu is also a good idea.

02-10-2005, 06:31 PM
Sorry it took me SOOO long to get back to you, but thats how life is.

I'm not new, as far as HTML goes, but I am new to using divs for my layout. I used to use tables, til I found out that was a real no-no.

Would you mind giving a definition of what "semantics" exactly are? I thought it just meant using divs for your layout.

thanx 1,000,000


02-10-2005, 07:07 PM
Semantics comes with the complete seperation of the structure & content of your html document from it's appearance.

It means choosing the right html tag for the right content. The way I work now, and many others too, is to start marking up your content in a very simple way, based on what each snippet of content is. So you use h1 thru h6 for headings <p > for paragraphs etc etc - only then do I start throwing in divs and fiddling with the css to knock the page into some semblance of my photoshp mock up.


02-10-2005, 07:12 PM
I thought it just meant using divs for your layout.

Nope, divs are semantically meaningless, they are just used as hooks for your css.


02-10-2005, 07:14 PM
Thanx for the insight! I also found some stuff on W3C that helped, but your idea is great!

02-10-2005, 07:20 PM
Thanx for the insight! I also found some stuff on W3C that helped...

Hey, it was their idea in the first place ;)

02-10-2005, 07:31 PM
Would you mind giving a definition of what "semantics" exactly are? I thought it just meant using divs for your layout.

In these terms, semantics refers to using the html elements to make your mark-up meaningful. So that your top level heading is within <h1></h1> tags, paragraphs in <p></p> tags, etc.

It helps give context regardless of how you style the elements with your CSS. So no matter how it looks, the underlying structure will be friendly to search engines and non-graphical browsers.

A basic template might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Welcome to RAJetter.com

<h1>Page Subject</h1>

<!-- navigation -->
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

<h2>Subject for the following paragraphs</h2>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

<h3><a href="#">Contact me</a></h3>

<!-- footer -->
<li><a href="#">Copyright</a></li>
<li><a href="#">Top</a></li>