Stylesheets - Problem page IE clear float problem, Opera/FF header problem and N4

Author

Problem page IE clear float problem, Opera/FF header problem and N4

ima

2005-09-11, 7:29 pm

http://www.kencoffman.com/templates.htm

I've been experimenting with float:left and I've been able to clear
those floats as far as Opera 8.02 and Firefox 1.0.6 but IE6 is a
problem. I've researched a bit and read about a hack but for some
reason I've been unable to get it to work. Perhaps I've missed some
subtle requirement like placed it in the wrong place in my css file.

If you view the page with Opera or Firefox, you'll notice another
smaller annoyance. A strip of white above the header. Maybe someone
can explain how that happens.

The N4 interpretation is ugly. The worst problem is that the right
column moves on top of the left column. I have no clue how to turn
this problem into page that could be read.

I've been told not to post code here so here is a link to a sample page
maybe that will be enough to give someone a clue as to what I've done
wrong. Thanks for your help.

Rincewind

2005-09-11, 7:29 pm

On 11 Sep 2005 13:27:55 -0700, ima wrote:

> If you view the page with Opera or Firefox, you'll notice another
> smaller annoyance. A strip of white above the header. Maybe someone
> can explain how that happens.

change div#container {position:relative; to div#container
{position:absolute; top: 0;

Why have you set a max-width of 1000px on my display that means I get a
white line down the right hand side, setting it to 100% would sort it out.

There are a lot of validation errors on the page,
http://validator.w3.org/check?verbo...m/templates.htm
sorting them out might help especially as you have defined a CSS "id" more
than once, something you can't do, you can however set "class" as often as
you like

ima

2005-09-11, 11:21 pm

Thanks a lot for taking the time to look. I'm still learning and the
max-width was part of an example that I had. Your suggestion of 100%
makes much more sense to me. I can't think of any reason why anyone
would want to stretch a window larger that their monitor screen. As
for "id", it was my understanding that I could use multiple "id"s if
there were declared in a css file but I could only declare one within
the <Style> tags of html. Did I misunderstand???

ima

2005-09-11, 11:21 pm

Thanks for taking the time to point out that link. I found out that
the vast majority of the errors were due to a habit of typing tags in
caps (which doesn't work so well with css). I've cleaned up the errors
that I could understand but I still have 8 errors which are suppose to
be missing quotes or tags but those quotes and tags are already there,
so I'm not sure what I can do to convince the validator that they are
there. I finally realized that the id that you were referring to was
mainimage which I did try to call several times. I've tried to change
that to a class but no I've lost my float left (along the image) format
in ALL browser versions.

Rincewind

2005-09-12, 7:22 am

On 11 Sep 2005 16:29:10 -0700, ima wrote:
> As
> for "id", it was my understanding that I could use multiple "id"s if
> there were declared in a css file but I could only declare one within
> the <Style> tags of html. Did I misunderstand???

Firstly Remember to quote what you are replying to.

You can use class as often as you like, you can only define an id once.

Rincewind

2005-09-12, 7:22 am

On 11 Sep 2005 17:41:33 -0700, ima wrote:

> Thanks for taking the time to point out that link. I found out that
> the vast majority of the errors were due to a habit of typing tags in
> caps (which doesn't work so well with css).

As far as i'm aware that doesn't make any difference.

> I've cleaned up the errors
> that I could understand but I still have 8 errors which are suppose to
> be missing quotes or tags but those quotes and tags are already there,
> so I'm not sure what I can do to convince the validator that they are
> there.

It hasn't helped that you have changed your Doctype declaration and not
really understood why, you have therefore left bits of XHTML in there that
are now causing problems.

Change your top 2 lines:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

as they are not compatable. I would suggest you go for a strict doctype,
such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
doing that and replacing the XHTML end tags " />" with HTML tags ">" will
sort all but three of the problems.

These are because your misusing the "a" tag, you can't have two "alt" 's
alt is for an alternative text if the pic doesn't display for whatever
reason. All your links should look like <a href="picture_path.jpg"><img
src="picture_name.jpg" alt="Alternative Text for Picture Here" width ="91"
height ="121"></a><p class="caption">Your_ Caption_Here</p></div>
Remember also to remove the spaces between " and 91" and " and 121
throughout your document, it will then validate.

>I finally realized that the id that you were referring to was
> mainimage which I did try to call several times. I've tried to change
> that to a class but no I've lost my float left (along the image) format
> in ALL browser versions.

Yes but you also have to change your CSS file, an id is prefixed with a #
a class is prefixed with a . and I notice that there are now no references
to id="mainimage" in your HTML file but that they are still in your CSS
file all you needed to do was change the repeated ID #'s for class .'s

ima

2005-09-12, 11:19 pm

Rincewind, I REALLY appreciate your patience. I do have a book on CSS
which I really did read cover to cover but some things are still a bit
confusing. The author recommended "Strict" but included a line for
"Transitional" and "Frameset" so I used "Transitional" when I the
validator said that my code did not comply with "Strict".
Unfortunately, there was no explanation of options within those DOCTYPE
declaration lines. So you're quite correct that I don't yet know the
various option combinations. Then the book goes on to an example of
declaring an XML namespace. It was the only example and did not
mention how it would be different for "Transitional" or "Frameset"
DOCTYPE. Thanks for bringing that discrepancy to my attention. I'll
need to research that topic further since making the changes that you
suggested, I'm still getting validator errors in that section.

I knew that I had to have alt titles for each image but I made the
wrong assumption that images linked to images would also require them.
I've removed those.

I could find no spaces between quotes and numbers for width and height
but in desperation, I did remove spaces from between the "=" and the
quotes with numbers.

> Yes but you also have to change your CSS file, an id is prefixed with a #
> a class is prefixed with a . and I notice that there are now no references
> to id="mainimage" in your HTML file but that they are still in your CSS
> file all you needed to do was change the repeated ID #'s for class .'s

I attempted to create a new class to float my multiple images and text
to the left but I see that the declaration in the css did not get
"saved". Rather than try again, I took your suggestion and tried to
just change the "id" to a class.

After all the changes above, I still have eight errors according to the
validator. Two of them are in the first couple lines again and the
rest are phantom spaces before numbers and now the inside the closing
img tags. I tried retyping line 27 and validator still comes up with
three errors (spaces that show up nowhere other than the validator
display).

The end result is that now none of the browsers display my floats
correctly. Somehow making all these corrections has had the opposite
effect that I had hoped for. Now I'm hoping that once the errors in
the first couple lines are corrected (and I don't have a clue as to
what the validator wants me to do about those) but eventually, it will
all fall into place and display properly at least in FireFox and Opera
like when I started this adventure. It is important for me to learn
these rules (particularly regarding the DOCTYPE declarations etc. ) so
I do hope you'll keep those suggestions coming to get me to that point.