XHTML validation & IE6 layout problems

[philaweb]

Well, have been playing with this layout (http://www.lettonica.info/postcards/czarist/) for a couple of hours now.

Two unsolved problems:
[list=1]
XHTML validation attempt gives 4 errors on the nested menu list. I'm really lost at this. What am I doing wrong?
For some odd reason there is a 20px margin at the right edge of the gallery in IE6. Both Moz FF 0.8, Opera 7.32, NS 7.01 shows as coded. How can I fix this?
[/list=1]

Edit: Link update

[96turnerri]

you havnt ended all of your <li> that will fix all your xhtml validation problems, then valid css

[philaweb]

96turnerri,

Thanks for having a look. :)

After I took a break from computing (10 minutes, tops!), the missing tag was obvious to me. :rolleyes:
Then, trying to validate the page again I found the Doctype was not all correct (that's what you get when buying on-line software... :rolleyes: )

This problem has now been eliminated...

Anyone care to have a stab at problem no. 2? :)

[96turnerri]

im not sure im not a css pro, i looked at it at first couldnt see anything wrong then noticed what you meant but looking at current css wasnt sure, vladdy is good with css as is lavalamp

[David Harrison]

With your pop-up links I see this:target="picture" onclick="window.open('','picture','whatever');"There's no need for that, you can just do this:onclick="window.open(this.href,'picture','whatever');return false;"That will remove a depreciated attribute from your source and also shorten it slightly. ;)

Also, with your images you have done <img></img> if you do that then older browsers may display one image and then try and show another. Just do this <img /> and that will work.

As for your 20px gap, I suspect that you are assuming IE6 uses the correct box model, I'm afraid that the xml decleration throws IE into quirks mode when it uses the same box model as IE5. Taking the xml decleration out is not a solution though, you'll just have to try and get it to display properly, possibly with hacks, but try and stay away from them.

Edit:Originally posted by 96turnerri
vladdy is good with css as is lavalampWow, that's made my day, thanks! :D

[96turnerri]

Originally posted by lavalamp
Edit:Wow, that's made my day, thanks! :D

your welcome, might catch you online later if not busy for a game of minesweeper flags ;)

[philaweb]

Originally posted by lavalamp
With your pop-up links I see this:target="picture" onclick="window.open('','picture','whatever');"There's no need for that, you can just do this:onclick="window.open(this.href,'picture','whatever');return false;"That will remove a depreciated attribute from your source and also shorten it slightly.
The change of code also brings some sort of hyperlink image below the gallery images, since you've changed the code above highlighted in red.
Originally posted by lavalamp
Also, with your images you have done <img></img> if you do that then older browsers may display one image and then try and show another. Just do this <img /> and that will work.
Aha... Thanks! I was a bit bewildered about XHTML (first try at validation). :)
Originally posted by lavalamp
As for your 20px gap, I suspect that you are assuming IE6 uses the correct box model, I'm afraid that the xml decleration throws IE into quirks mode when it uses the same box model as IE5. Taking the xml decleration out is not a solution though, you'll just have to try and get it to display properly, possibly with hacks, but try and stay away from them.
Well, I'm not that savvy, yet. :( Didn't even know that the xml declaration has to with it (don't hardly know what xml is :) ).
Any suggestions?

[David Harrison]

Maybe I wasn't clear before about the images, instead of having <img></img> just have <img /> The tag is opened and closed all in the same <>. Like this:<img style="border:0" src="images/TN_ab_01.JPG" alt="Click thumbnail image to see enlarged image of picture postcard" title="Click thumbnail image to see enlarged image of picture postcard" />This also goes for: <br /> <hr /> <meta /> <link />And any more empty tags there are.
The blue area is because you have in effect created a new image underneath your existiing one with the <img/ >.

I'll have a look through your CSS to see what can be done. I suspect that you have used padding on something and specified a width, in IE5 and IE6(quirks) the padding is incorporated into the width you specify (as well as the border).

Another edit: The xml decleration is this by the way:

<?xml version="1.0" encoding="iso-8859-1"?>

While I was copying and pasting your xml decleration, I noticed that you have a mixed DTD:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-strict.dtd">

It's half transitional, half strict. Pick one from this list (http://www.w3.org/QA/2002/04/valid-dtd-list.html).

[Fang]

Your link and image elements have no closing tags.
The DTD needs to be changed to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In #footer change the width to:
width: 628px !important; width: 647px
It looks alright in IE, Moz. and FF, but Opera is not quite right.
A simpler layout would have been easier to deal with.

[David Harrison]

At this point I think that hack that Fang posted is probably the only way to fix the bug, otherwise I'd have to recode it so that I know how everything works.

You should be using an unordered list for those images rather than lots of <div> tags, oh and you haven't given them dimentions or unique alt attributes.

[philaweb]

Originally posted by lavalamp
Maybe I wasn't clear before about the images, instead of having <img></img> just have <img /> The tag is opened and closed all in the same <>. Like this:<img style="border:0" src="images/TN_ab_01.JPG" alt="Click thumbnail image to see enlarged image of picture postcard" title="Click thumbnail image to see enlarged image of picture postcard" />This also goes for: <br /> <hr /> <meta /> <link />And any more empty tags there are.
The blue area is because you have in effect created a new image underneath your existiing one with the <img/ >.
:rolleyes: Well, I am learning... Fixed... :)
Originally posted by lavalamp
Another edit: The xml decleration is this by the way:

<?xml version="1.0" encoding="iso-8859-1"?>
OK. :) I'm sure I'll learn what that's supposed to do one day. For the time being I'm quite involved in getting this layout to work... But, I love to learn new stuff.
Originally posted by lavalamp
It's half transitional, half strict. Pick one from this list (http://www.w3.org/QA/2002/04/valid-dtd-list.html).
Yeah, that one slipped my attention... :) Fixed.

Originally posted by Fang
In #footer change the width to:
width: 628px !important; width: 647px
It looks alright in IE, Moz. and FF, but Opera is not quite right.
A simpler layout would have been easier to deal with.
Changed to your suggestion, and guess what? Works great! :)

Simpler layout? :D Ehem, was trying to be as simple as possible... Am all ears though... :)

Originally posted by lavalamp
You should be using an unordered list for those images rather than lots of <div> tags, oh and you haven't given them dimentions or unique alt attributes.
Can I use an unordered list for images? :confused:
Well, dimensions is unfortunately not something I've regulated. The PHP script simply orders all thumbnails to identical size and shape, even though the vertical images should be higher according to thumbnail dimensions. Alt attributes are for later when I begin authoring the text files used for this script.

[philaweb]

Originally posted by lavalamp
...oh and you haven't given them dimentions...

Ah, now I get the picture. :rolleyes:

Forget about what I wrote on the script... Yes, the thumbnails are all in the same size and I have added dimensions to the thumbnails.

Looks neat when the scope of the container is outlined prior to download of images.

Many thanks for your help... lavalamp and Fang!

[David Harrison]

Originally posted by philaweb
Can I use an unordered list for images? :confused:Yes, you have a list of images so you should mark them up as a list, you have a list of links at the top for your ultimate dropdown menu.

Simply replace your <div class="thumnail"></div>'s with <li></li>'s and put all of the <li>'s inside a <ul>.

[philaweb]

Originally posted by lavalamp
Yes, you have a list of images so you should mark them up as a list, you have a list of links at the top for your ultimate dropdown menu.

Simply replace your <div class="thumbnail"></div>'s with <li></li>'s and put all of the <li>'s inside a <ul>.

*hehe* Simply... ;)

Well, that must be another day since those galleries runs on two PHP files and 4 HTML templates. I've had my turn of brain exercise today reorganising, redesigning the galleries. :)

If I'm lucky at stabbing at the job, I'll do it when I've learned how to do PHP include - then I'll squash two bugs in one move. :)

Many thanks for your time.