Somethings don't look right and page won't validate.

[Jill Gordon]

Can somebody take a look at this page of my site:

http://jillgordondesig ns.com/gallery.html

I'm having several issues and I'm not sure if they're all related or what's going on.

1. In Internet Explorer the divs for #newspaperads and #miscellaneous projects don't open in the same place as the content for the #greeting cards div (see the same page in Safari and Firefox to see the effect I am trying to get)

2. In Safari and Firefox there is a gap between the content and the footer (see all my other pages in all 3 browsers for the desired effect)

3. Page won't validate. The following is the information from the W3C validator that I cannot seem to locate in my code as incorrect to fix.

Validation Output: 4 Errors

1. Error Line 152, Column 7: end tag for "div" omitted, but OMITTAG NO was specified

</body>

✉

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
2. Info Line 100, Column 1: start tag was here

<div id="wrapper">

3. Error Line 152, Column 7: Opening and ending tag mismatch: div line 100 and body

</body>

✉
4. Error Line 153, Column 27: Opening and ending tag mismatch: body line 97 and html

<!-- InstanceEnd --></html>

✉
5. Error Line 153, Column 27: Premature end of data in tag html line 2

<!-- InstanceEnd --></html>

✉

I'll continue to add content to this page locally until someone is able to help me fix these problems before sending images that won't be seen by IE users out to the remote site. Thanks in advance for any help

[Dormilich]

the XHTML errors originate in a <div> you forgot to close.

[Jill Gordon]

the XHTML errors originate in a <div> you forgot to close.

Thanks. I figured out which <div> wasn't closed. The page finally validates now but that didn't solve the issues of the gaps on Safari and Firefox or the <div>s not loading in the appropriate place in IE.

[JKing]

It looks to me like the gap is being generated because of the fixed heights you have given to some of your divs.

#gallerybackgro und is set to 600px then stuffed inside it is your #thumbnailscont ent with 700px. I believe that is where your 100px gap is coming from. Also note that your #greetingcards is set to 600px but above it is an h2 tag so it really is taking up more space than the alloted 600px from #gallerybackgro und.

[Jill Gordon]

I tried changing the heights of the <div>s you mentioned and the gap is still there in Firefox and Safari. It looks fine in IE other than the fact that #newspaperads and #miscellaneousp rojects don't open in the same place as #greetingcards

[JKing]

I just tested changing the heights myself and it worked for me. I commented out the height line in your css as shown below.

#thumbnailscontent {
	position: relative;
	/*height: 700px;*/
	width: 75%;
	float: right;
}

What version of IE are you using? The divs appear the same for me using IE 8.

[Jill Gordon]

What height did you make #thumbnails content? I tried making it 600px so it was the same as the #gallery content and that didn't work. I also tried making #gallery 800px to allow extra room for everything and I still had the gap. I even thought about my margins and changing those didn't help either.

Perhaps the <div>s not loading in the same spot has to do with screen size? I too have IE 8 on my PC and I also tested on IE for Mac version 5.2. Both versions show #newspaperads and #miscellaneousp rojects launching lower and further to the right than #greetingcards does.

As you say it loads fine for you, do you recommend adding the rest of the content and releasing my site to the public as is?

[JKing]

I just commented out the height. Though values of 600px worked for me.

Are you sure you are refreshing after updates and/or copying the correct files over if you are using FTP?

I just noticed you have both #newspaperads and #miscellaneousp rojects nested within #greetingcards. That would account for the divs appearing slightly lower.

[Jill Gordon]

Thank you for your help JKing. I did manage to get rid of the gaps in all browsers.

I do indeed have those three divs nested simply because I could not recall/locate clear instructions as to how to have multiple divs hide/show in the exact same location. I used the only XHTML I knew to position those divs. They do open close enough together to appear the same in Safari and Firefox. As I said for some reason on my 2 computers IE opens them more than "slightly" lower.
My content can be seen but it requires much scrolling down and right.

[JKing]

You may have missed what I said. I think your intention is to nest #greetingcards, #newspaperads and #miscellaneousp rojects inside #thumbnailconte nt but #newspaperads and #miscellaneousp rojects have both been nested inside #greetingcards which is then nested in #thumbnailconte nt this does create about a 10px gap in display position.

Also you may want to have a look at this link CSS Display and Visibility

[Jill Gordon]

Thank you, JKing. It works perfectly now. I still have the 10px jog but it's hardly noticeable versus the problem I first posted about. I appreciate all your help. Thank you for taking the time to respond to my issues.