PDA

View Full Version : Validation woes, and question with float

pardicity3
02-01-2003, 10:23 PM
Hello all,

I have a new page I am currently working on. Originally it was a table layout, but now I have converted it to a div layout. The page can be found here:
http://www.mikesadventures.net/trial2/trial_1.html

I just attempted to validate the html--with w3.org's html validator--and I got a couple off errors. First, it said that my closing </head> tag was not allowed because it was never opened...then because of this error it said that my opening <body> tag wasn't allowed either. The problem is, as far as I can tell, I have both opened and closed these tags properly.

My second problem is that for my header div I use float:left to get my image to align to the left of the div. The only problem is that in IE5/mac the whole div floats left instead of just the image. Is there a problem with using float:left in an image?

Also, I don't know if this problem is related, but in Opera 6/win the alignment is just a little bit off. I know my navigation image containers are kind of a bad idea, but they seem to work everywhere but Opera 6, maybe that has something to do with the afforementioned problems?

Thanks for all your help.

p.s. If you need it here is the link to my css:
http://www.mikesadventures.net/trial2/styles.css
meow
02-01-2003, 11:13 PM
Get rid of all the closing slashes in empty element tags. You are writing HTML, not XHTML. I know many 'tutorials' recommend this as a transitional stage but it is wrong. You won't get errors for those within body but take them out anyway.
pardicity3
02-01-2003, 11:16 PM
The problem with not closing the empty tags is that I was going to go for XHTML validation. I was just trying out the HTML validator to make sure I didn't have any major problems.
meow
02-01-2003, 11:19 PM
Well, that is caused your problem. ;)
pardicity3
02-01-2003, 11:26 PM
Hah! I get it, I still had the HTML 4.0 transitional doctype in there. You were right then, taking out the /> for empty tags will solve the problem.

I guess my only problem now is the float: left.
brothercake
02-01-2003, 11:34 PM
Wouldn't it make more sense to keep the /> and use an XHTML doctype ...
pardicity3
02-02-2003, 06:31 AM
It makes plenty more sense and that is exactly what I did. I had this page somewhat made and just sitting on my hard drive for a while and when I was making it I was clueless as to what XHTML was, and because of that I had the html 4.0 doctype in there. Anyway, I have changed the page and it is now XHTML validated.

I guess the only question that is left is the problem with IE5/mac and the float: left in the image tag.
brothercake
02-02-2003, 02:20 PM
My guess would be that, since float: allows content to flow around it, mac/ie5 thinks there's enough space and tries to do just that.

Try clear:both on the div - that might do it;
pardicity3
02-03-2003, 04:06 AM
Hmm, brothercake, I thought that clear would do it too, but it doesn't work. I have found though that if I do text-align: left it works and keeps the layout the way it should be. But of course when I go back to float:left in the image it doesn't work. I have always felt it wrong to use text-align: left to align images but it works. Dillemas, dillemas.
ronaldb66
02-03-2003, 01:52 PM
In the flow of a document, an image is inline content and should be treated the same way as text, so text-align for an image is ok. Not for block-level elements though.
Catman
02-03-2003, 03:09 PM
Mac IE doesn't quite understand clear. Try putting a <br /> tag after the div container -- that shouldn't affect other browsers but might solve the wrap problem with Mac IE.
brothercake
02-03-2003, 03:31 PM
You could also try full width with an explicit height - something like

<div style="width:100%;height:100px"> ...


even if the content is taller than this, I've found situations where expressing full width, and the minimum height as a pixel value, forces adjacent content to go underneath
pardicity3
02-05-2003, 04:00 AM
Just a little update, I tried everything that was suggested and the only thing that worked was using text-align: left in the div tag.

Catman...
As odd as it seems putting a <br /> tag after the div did mess up the alignment. It but an extra line of white space between my two divs. It seemed quite odd that this would happen, but who knows?

brothercake...
I must admit I was a little baffled as to how your solution might work. I already had the div specified at 96% width and 95 px height so I didn't feel to good about changing those values, as that's what I needed to keep the layout looking right.

Oh well, in the end it worked...though I must say that Opera 6 is still having trouble with my new error free (yeah right!) page. I will get to that in a little while though.

¡Adios! y ¡Gracias!