[SOLVED] Clear:both does not works in IE6

[attila001122]

Hello,

I spent nights to do this...

I am creating a main menu, using CSS... there is two lines of links.
To make sure the second line is really going to the second line, I use
Clear:both as a separator.
It looks good on Firefox, but it looks like IE6 ignores it.

Any help would be VERY welcome !

I have "streamlined" the problem part and attached for those who may take a look. It is a small html and a CSS file.

Thanks

Attila

[Lchad]

After the first line of navigation and before the second line add this html:

Code: Select all

<div class="clear"></div>

CSS for that would be

Code: Select all

.clear {
    height:1px;
    margin:0 0 -1px 0;
    clear:both;
    overflow:hidden;
}

That should allow you to be sure they are on two separate lines.

[attila001122]

Hello Lchad,

Thanks for the quick reply !

Yes, your code did made the second line start in the second line.

But...
Just somewhere under the last word of the first line, so some of the links unfortunatley getting to the third line....

Maybe I do something really silly, but whatever I try I have problem to got the links right in the second line with IE 6...

In case you did not given up on me I upload the files.

Thanks

Attila

[Lchad]

What links are supposed to be on the first line and what links are on line 2?

[attila001122]

Hello,

" What links are supposed to be on the first line and what links are on line 2?"

This is an attempt to do a face lift to a website to promote scientific publications...

I prefer to have the menu on the top and not on the side.
So I need at least two lines for the menu. I guess later even more.

If you like to see, you can see the prototype on:
http://www.surgicaltechnology.com/On...oto2-index.htm

I also would like to use the project to understand more about CSS instead of redesign the site more simply or use ready made modules, because I know - I discovered - that there are many potholes if one wants to make his:her site look similar on most browsers...

[Lchad]

Sorry, you have lost me. Did you fix it?

[attila001122]

No...
...not yet.

I am sorry.
English is not my first language. And I was not exactly clear either.

The code you give me, gets me to the next line but not to the beginning of the line, rather towards to the end of it... so some links goes to the third line.

The link I have sent is just the site to see the "whole picture" in case you want to understand what is this needs to be.

I have just uploaded the "three line" result : (please see with IE6)
http://www.surgicaltechnology.com/Online/Menu-Show.html
and I have attached before the CSS file, to show how it looks now.


Thanks again for your efforts

Attila

ps: There is 01:45 (morning) in Europe here and I getting sleepy... I may not be able to read your reply before tomorrow.

[Lchad]

I've played with the code a bit but it's difficult to fix the problem because many of your items are graphics in a library. In IE6, it's obvious that the Home button (or clearning div) is getting hung up on the "contact us" button or the separator between the "register" and "contact us".

I would check the heights of all your graphics in the library. Making sure none of them exceed the 26 px height since that is the height of your separator.

Once you are able to move the "Home" and "instructions for authors" button to the left, the rest of the buttons will move to the second line.

Also check this code and see if you need the part in red.

Code: Select all

<div class="separator">
    <!-- sep -->
  </div>
   <div class="clear"></div>

I ran your code through the validator and it doesn't like that part. See validation results here.

Crossing my fingers for your!

[attila001122]

Hello Lchad !

Thanks for the time you spend on this.

You can not imagine how helpful you are.

Besides the site will work (eventually, I hope) you point to the weakest parts, and that helps me to learn CSS from my mistakes (the best way, apart of other peoples mistakes).

So I going to check and fix the validation errors and the graphics...
As soon I have any results I come back!

Thanks again !

Attila

[attila001122]

YES !

Ok, now it works !

Thanks for your advise.
It took some time, but I have learned a lot.
The problem was the little separator bars between the links.
Firefox was not so sensitve to their size as IE6...
The twist was on the thing that the navigation menu had a single line on the top row, and a double line on the bottom.

I guess without your hep I probably would have to make some ugly hacks, what I was used to, while working on Frontpage.

Exactly for that I am trying to learn CSS, to minimise the hacks.

Special thanks for the validating link !

Again, thanks, and have a very Happy New Year !

Attila

[Lchad]

Excellent job attilla!

That's the way to tackle how to learn css. One problem at a time.
I'm going to mark this thread solved!