css on IE7

[cssdbts]

am using a css class as below, it is working fine on IE6 but it is not coming properly on IE7. Please advise some one on this...

Thanks in advance....!!!

.movebutton
{
BORDER-TOP-WIDTH: 1px;
FONT-WEIGHT: bold;
BORDER-LEFT-WIDTH: 1px;
FONT-SIZE: 8pt;
BORDER-LEFT-COLOR: white;
BACKGROUND: url(../Images/movebutton.bmp) fixed repeat-x center 50%;
BORDER-BOTTOM-WIDTH: 1px;
BORDER-BOTTOM-COLOR: white;
TEXT-TRANSFORM: capitalize;
WIDTH: 20px;
COLOR: white;
BORDER-TOP-COLOR: white;
FONT-FAMILY: "Verdana";
HEIGHT: 20px;
TEXT-ALIGN: center;
BORDER-RIGHT-WIDTH: 1px;
BORDER-RIGHT-COLOR: white
}

[alexjewell]

What's going wrong in IE7?

You might want to try IE Conditional statements:
http://msdn2.microsoft.com/en-us/library/ms537512.aspx

[Twey]

First of all, all CSS properties are lower-case. Error-correction may occur, but strictly speaking, all of that should be completely ignored.

FONT-SIZE: 8pt;

Don't use points for on-screen font sizes. They're fine for printing, but they fail to take the user's preferences into account, so are a bad choice for more flexible media. Ems are a better choice.

BACKGROUND: url(../Images/movebutton.bmp) fixed repeat-x center 50%;

Don't use the BMP format for images. Firstly, I think Windows and Mac OS have two different BMP formats, and each is unable to read the other's format -- correct me if I'm wrong, graphics experts. Secondly, both formats are completely uncompressed, meaning that the image is much, much bigger than it needs to be -- usually the filesize can be reduced by 60-80% using a lossless compression format such as GIF or PNG (GIFs are pretty much outdated for all but animations though; I suggest PNG) or 70-95% using a lossy format such as JPEG (but be aware that image quality will be lost if you take this route).

WIDTH: 20px;

Since this element contains text, whose size will vary depending on several factors, it's a bad idea to define its size in terms of pixels. Try ems.

FONT-FAMILY: "Verdana";

Two mistakes here: you should specify a generic font family as a last resort in case the user doesn't have the font you'd prefer, and you should avoid using Verdana, since it is proportionately larger than other fonts and many problems may arise for users who don't have it or for whom the font size is different from that you may have anticipated.

[mwinter]

First of all, all CSS properties are lower-case.

Not true. The vast majority of style sheet content is case-insensitive.

All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

-- From 4.1.3, Characters and case, CSS 2

[alexjewell]

Oh, and to make your stylesheet more organized, I condensed it a bit:

.movebutton{
color: white;
font-size: 1em;
font-family: "Verdana";
font-weight: bold;
text-transform: capitalize;
text-align: center;
width: 20px;
height: 20px;
border: 1px solid white;
background: transparent url(../Images/movebutton.bmp) fixed repeat-x center 50%;}

And don't forget Twey's comments referring to font-family and the background image. I changed the font-size to 1em automatically for you.

Isn't that much better now - more organized?

[broox]

I am having problems adjusting my CSS to make it work for IE. Anytime that I view my site in IE the CSS for the type becomes centered and the navigation gets totally messed up. Could someone give me some pointers?

The URL for the site is <a href="http://www.proctorproductions.com/htdocs3/index.htm">www.proctorproductions.com/htdocs3/index.htm></a>

... and the link for the CSS is <a href="http://www.proctorproductions.com/htdocs3/css/proctor.css">www.proctorproductions.com/htdocs3/css/proctor.css</a>

Any help would be extremely appreciated.

[cssdbts]

thanx alexjewell......

but am still facing the same problem....image is disturbed in IE7.

I have attached two images here
1) Actual(IE6).bmp --- this is the actual image
2) IE7.bmp -- actual image looking in IE7

can u suggest y its not coming.....

[tech_support]

Don't use points for on-screen font sizes. They're fine for printing, but they fail to take the user's preferences into account, so are a bad choice for more flexible media. Ems are a better choice.

How about percentages?

[Twey]

Oh -- I forgot about IE's problems with ems for a moment there. Percentages are actually the preferred choice, my error.