Float and clear / Image issue on IE

[tekram]

First Q:

The first question is related with float and clear. I am trying to have three divs be side by side but i can not seem to get it to work properly on firefox. it looks fine on on ie. the website is ghazalis.com. the layers i am referring to are on the way bottom that contain the links "Home | Featured Products | All Products | Book Request | Contact Us | About Us" and the copyright message below which should be on the left and the layer containing "Shipping & Return Policy, Newsletter Unsubscribe, Privacy " on the right. the picture below shows the way i would like it to look and the red indicates what happens on firefox.

there are basically two layers on the left and on on the right.
here are the css for the layers (the first two are the ones for the left and the last for the right:

#copyright{
margin: 0em;
background-color: #ffffff;
padding: 0em;
padding-bottom:0.4em;
padding-left:200px;
font-weight: bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #93937B;
width: 597px;
float:left;
clear:left;
text-align:left;
}

#navSuppWrapper {
margin: 0em;
margin-top:3px;
background-color: #D7D7B5;
padding: 0em;
padding-bottom:0.4em;
font-weight: bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
width: 597px;
float:left;
clear:left;

}

#infolinks{
width:150px;
margin: 0em;
margin-top:3px;
background-color: #D7D7B5;
float:right;
clear:right;
text-align:left;

}

Second Q

I am using an image as the menu header at the top. In ie, there is this border around the image that i can not get rid of. the second picture shows where the border is obvious (when compare to what is below but the border goes all the way around). on firefox the menu is flush up against the layer below it.

Thanks!

[seethrou]

For your Q #1

#infolinks{
width:150px;
margin: 0em;
margin-top:3px; 
background-color: #D7D7B5;
float:right;
clear:right;
text-align:left;

}

May try the following as first step

#infolinks{
width:150px;
margin:-4.6em 0;  /* note: here use negative value for margin-top */
background-color: #D7D7B5;
float:right;
clear:right;
text-align:left;
}

[tekram]

i tried that. it fixes it on firefox but then it gets messed up on ie. it becomes two high from where i want it. (ie if i leave it as is it is fine on ie but messed up on firefox).

[seethrou]

May try the following as 2nd step

#infolinks{
width:150px;
margin: -4.6em 0;  /* note: here use negative value for margin-top */
background-color: #D7D7B5;
float:right;
clear:right;
text-align:left;
}

/* For IE only */
* html #infolinks{
width:150px;
margin: 3px 0;
background-color: #D7D7B5;
float:right;
clear:right;
text-align:left;
}

Hope this help.

[tekram]

i tried it but it gave me the same result as the above one.

is the second declaration suppose to be for ie specifically? if i could get that to work, that would a lot of things easier especially when comes to the bugs of ie6. right now, i end up making a seperate css sheet for ie6 and then using
<!--[if lte IE 6]> "rel code" <![endif]--> to call the css sheet specific for ie6.

[seethrou]

Yes, it is for IE only.

A more simple one is use Underscore and you may try.

[code]#infolinks{
width:150px;
margin: -4.6em 0; /* note: here use negative value for margin-top */
_margin: 3px 0; /* note: use Underscore for IE only for the margin-top */
background-color: #D7D7B5;
float:right;
clear:right;
text-align:left;
}[/color]

Follow up, the above seems work for me in my remote test.
Hope this helps.

[seethrou]

Oops!

Pressed the wrong buttom, and the above code should be:

#infolinks{
width:150px;
margin: -4.6em 0;  /* note: here use negative value for margin-top */
_margin: 3px 0; /* note: use Underscore for IE only for the margin-top */
background-color: #D7D7B5;
float:right;
clear:right;
text-align:left;
}

.

[tekram]

i tried that too but does not seem to work.

when i said ie what i meant was ie7. that is what i have been testing on and using for design. does this syntax also work for ie7? i have a seperate css sheet for ie6. so ie6 is not the on issue.

thanks for your help.

by the way. i downloaded those css tools you linked too. wow, that is some cool and useful stuff. thanks!

[dbltoe]

Seven is NOT a lucky number. Al they have really fixed that I can see is they have turned off the ability to use workarounds to make CSS at least resemble what it should.

Of course, after thousands of complaints the folks in Redmond will mend their ways.

[tekram]

so the behaviour i am getting with firefox is the appropriate one and not the ie 7 one (with reference to the positioning of layer infolinks)

so no work around for ie7 or firefox??

is there an equivalent of <!--[if lte IE 6]> "rel code" <![endif]--> for ie7 or firefox?

thanks!