Float and clear / Image issue on IE

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!

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;
}

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).

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. :smile:

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

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.

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;
}

.

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!

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.:rotflmao:

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!

FireFox is always going to be the winner in the "Best of Show" category for CSS rendering. That's where I develop and THEN look at it in IE.

One thing that might help is putting ```php
height: 1%;

There's also a couple of very interesting articles at [http://nanobox.chipx86.com/blog/2006/04/easy-css-hacks-for-ie7.php](http://nanobox.chipx86.com/blog/2006/04/easy-css-hacks-for-ie7.php)

Also, he has an interesting way of doing rounded corners in IE (see the :before and :after article).

thanks for the article.

any clue about the picture issue? i seem to be getting this border around the pic and i can not get rid of it by setting the border to 0.

tekram:

thanks for the article.

any clue about the picture issue? i seem to be getting this border around the pic and i can not get rid of it by setting the border to 0.

usually, adding the following declaration to your stylesheet:

img {border:none;}

takes care of this problem.

i have that in my css and it does not seem to help. :(

it only does it on ie7.

even setting the border to 0 on each pic does not seem to help.

is the image clickable or link to a pop-up?

If so then try:

img a {border:none}

i have that in my css also. i get this border on images that are links and not links.
you can see it when you compare firefox to ie.

ghazalis.com
the main menu bar at the top and the picture in the midde that says "Welcome to ghazali books" both have a border. on is a normal pis and the other is a link.

You have so many stylesheets loading that it's nearly impossible to figure out which one is in control of what.

Just checked your site and didn't notice any borders around the images

checked in ie6, firefox, opera and netscape

I also have to agree with dbltoe, why so many stylesheets?

I did compare stylesheet_old and stylesheet.css and they are identical why not delete one of them.

Could it be the borders you have for the navColumnOne and navColumnTwo in both the stylesheet.css and stylesheet_old.css. Each will create a white border on either side of the Welcome to... image.