...

View Full Version : Why the gaps??



whizard
02-09-2005, 11:23 PM
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!

Dan

hemebond
02-09-2005, 11:28 PM
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?

whizard
02-09-2005, 11:35 PM
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.

Dan

hemebond
02-09-2005, 11:57 PM
div img
{
display:block;
}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.

whizard
02-10-2005, 05: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

Dan

Graft-Creative
02-10-2005, 06: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.

Gary

Graft-Creative
02-10-2005, 06: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.

Gary

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

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

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

mcdougals4all
02-10-2005, 06: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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


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

<h1>Page Subject</h1>

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

<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 -->
<ul>
<li><a href="#">Copyright</a></li>
<li><a href="#">Top</a></li>
</ul>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum