CSS Menu problem with IE all versions

I;m n ot sure what you want that footer to look like but surely those icons should be next to each other without margins?

e.g.


div#footer-wrapper div#footer {
   /* height: 126px;*/
    margin: 0 auto;
    overflow: hidden;/* clear:floats*/
    text-align: left;
    width: 898px;
}

div#footer-wrapper div#footer img {
    float: left;
}

No need to call everything a div#footer as #footer is unique.

these logos will be different from each other and I want them to be on the center and under that copyright text. You’re right about #footer but I copied that from somewhere, so I need to give them new names.

Then don’t float the images and just put text-align center on the #footer and the images will center (as long as they are still display:inline) and so will the text.

I don’t know what I’m doing wrong but cannot get it…maybe they both are in the same line, I mean both logos and text.

How do I position footer bg fixed? I don’t want it to float up.

I guess this is what you mean:


div#footer-wrapper div#footer img{
float:none;
margin:0
}

div#footer-wrapper div#footer ul{float:none;margin:25px 0 0;}


div#footer-wrapper div#footer{
text-align:center;
}


There is no need to use 2 ids to identify an item as ids are unique and it makes no sense to have such a long path because once you start you have to keep doing it or run into specificity issues.

How do I position footer bg fixed

You’ll have to explain that a bit for me as I’m not sure whether you are talking about fixed positioning or something else.

So when there’s no posts in the middle, when blank, footer goes up and theres only background image on top of the footer and as well as under it.

Ill try to re-name these ids.

I think you are talking about a sticky footer but it may be a step too far for you at the moment as there is a lot to take in and a lot to get wrong. Read the link above which explains how to implement it but you have to be careful with all the details and the footer needs to be a fixed height which is the main drawback of the method.

Maybe a different solution??

for ex: http://bit.ly/szJ0pm
and: http://bit.ly/pOXOGe

I have the same footer.php for both. However the effect different. Height of the footer is different in the 1st page.

My bad, fount out what was wrong there. it turned to be a wrong div placement error. Whoever has written this php was a poor guy :S

What’s wrong with footer logos? Why they’re still not in the center? I belive copyright text is in the middle, so it looks messed up with logos floated to left.

And when I try to use

	behavior: url(images/PIE.htc);
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;

CSS Validator gives error both in 2.1 and 3rd versions. When I take them off, everything seems to be fine, except I dont get any borders.

As I said above don’t float them :slight_smile: It looks like you have fixed this now anyway.

And when I try to use

	behavior: url(images/PIE.htc);
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;

CSS Validator gives error both in 2.1 and 3rd versions. When I take them off, everything seems to be fine, except I dont get any borders.

Vendor prefixes are not valid css and won’t validate because the validator know nothing about them. Vendor prefixes are anything that starts with -moz, -webkit, -0, -ms etc. They are experimental styles until they are adopted as a proper spec. e.g border-radius.

Therefore they won’t validate and you have to be careful in your choice as some vendor extensions are widely experimental and not supported n the same way cross browser. Most of the common ones are pretty safe though such as the aforementioned border-radus bit make sure the final rule is the real css property.

e.g.


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

The IE behaviour rule is IE only and won’t validate. Unlike the vendor prefix it does not follow the correct structure for experimental properties and won’t be adopted by other browsers. However, it’s been around for a while and will do no harm.

As I said above don’t float them :slight_smile: It looks like you have fixed this now anyway.

And when I try to use

	behavior: url(images/PIE.htc);
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;

CSS Validator gives error both in 2.1 and 3rd versions. When I take them off, everything seems to be fine, except I dont get any borders.

Vendor prefixes are not valid css and won’t validate because the validator know nothing about them. Vendor prefixes are anything that starts with -moz, -webkit, -0, -ms etc. They are experimental styles until they are adopted as a proper spec. e.g border-radius.

Therefore they won’t validate and you have to be careful in your choice as some vendor extensions are widely experimental and not supported n the same way cross browser. Most of the common ones are pretty safe though such as the aforementioned border-radus bit make sure the final rule is the real css property.

e.g.


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

The IE behaviour rule is IE only and won’t validate. Unlike the vendor prefix it does not follow the correct structure for experimental properties and won’t be adopted by other browsers. However, it’s been around for a while and will do no harm.

does it look like that validator logos are in the center? and why would someone place validator icons to his or her site?

They are few pixels out because you have 30px margin on the left and 20px margin on the right. If you made the margin 25px on the left and right they would be exactly centred.

Not many people do these days as it means nothing to those that know about these things and it also means nothing to those that don’t. It only means something to those that half know about it :wink:

Validation is a means to an end and not some badge that you wear.

Where’s that on my CSS? I don’t have number 30 in my CSS file :S

On this page at line 1017 in style.css:


div#footer-wrapper div#footer img {
    margin-left: 30px;
    margin-right: 20px;
    margin-top: 25px;
    text-align: center;
}

Thank you very much for your help! Appreciate your patience and prompt solutions master. I have also tried to use CSS sprite for menu items. However, I don’t know if its appropriate to use sprite for non-fixed items as well. What do you think?

Mr. Paul, my footer does not fit the body part for some reason. Any ideas?

Have you got a link to the page in question?