IE viewing CSS Problem, Help!

[LogiK]

Hello.
I am having a slight problem with the effect of my css in Internet Explorer.
The CSS works how i want it to in FireFox but when testing it in Internet Explorer the border is too big!

Take A Look:

Here is the CSS Code:

input.button{
        font-size: 11px;
        font-family: Verdana;
        color: #FFFFFF;
        background-color: #333333;
	border-style: solid;
        border-color: #000000;
        border-width: 1px;
}

Its a petty thing but i want it to be perfect, all help is apprichiated.
Thanks

 

[Shorty]

That is quite strange, I can't see why that would display differently at all.

All I can suggest is perhaps changing the syntax of your border code to the shorter version:

border: 1px solid #000000;

And see if that might make any difference.

 

[LogiK]

Thanks for replying.
I tried with no change

 

[LogiK]

Anybody, Im boggled?

 

[Flubber]

I hate it when these kind of things happen.

Try adding an if conditional to your page (In the head near the default css file):

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_style.css" />
<![endif]-->

Then in ie_style.css reiterate the border style for the concerning element.

If that doesn't work, it may have something to do with how you're naming/calling the element. What's your code for the button?

 

[enlytend]

What doctype declaration are you using?
Does your page's HTML validate? Does the CSS validate? Could something else be overriding the input.button styles?

It's impossible to diagnose these flakey problems from just one CSS element because they usually are caused by something else - if you post or PM me the page link I'll take a look.

 

[tm]

IE and FireFox always fight each other in CSS issues - if it's that important (and tbh it doesn't look that important), I'd try and fiddle with it until it shows as 1px in IE (no matter what it looks like in FF), then seperate that off using Flubber's suggestion.

 

[Richieboy67]

Did you run it through a validator either with dreamweaver or at http://validator.w3.org/

 

[enlytend]

Top 3 reasons why IE (current versions) and FF render a page differently ...

1 - Invalid HTML or CSS code (run it through the w3C validators)
2 - Quirks mode (no doctype, incomplete doctype, in IE7 putting an xml prolog or a comment before the doctype statement also triggers quirks mode ...)
3 - Conflicting CSS styles applied to the same page element

 

[DylanButler]

You must be clicking inside the form in IE. IE likes to outline the submit button again for you if you have any of the inputs as the active focus.