-1

Hi,

I have a very simple HTML and CSS combination which behaves differently in IE browsers and Firefox. Just wondering if anyone can explain why I'm seeing extra space allocated in IE browsers.

I've tried everything I can to remove it but can't figure out how.

Here's the HTML

<html>
    <head>
        <link rel="stylesheet" title="Test" type="Text/css" media="all" href="spacing2.css">
    </head>
    <body>
        <div id="mapInfoTabBorder">
            <div class="TabBorderTabs">
                <div class="TabBorderInactiveTab">
                    <input name="TabSubmit" value="Karte" type="submit">
                </div>
                <div class="TabBorderActiveTab">
                    Info
                </div>
                <div class="TabBorderInactiveTab">
                    <input name="TabSubmit_0"  value="Adresse" type="submit">
                </div>
                <div class="TabBorderInactiveTab">
                    <input name="TabSubmit_1" value="Adressenliste" type="submit">
                </div>
            </div>
        </div>
    </body>
</html>

and here's the CSS

#mapInfoTabBorder div.TabBorderInactiveTab {
	color: #ffffff;
	padding: 0;
	margin: 0;
	background: yellow;
	border: none;
}

#mapInfoTabBorder div.TabBorderInactiveTab input {
	color: #FFFFFF;
	margin: 0;
	padding: 0;
	border: none;
	background: green;
	text-align: left;
}

If you view this in IE6 or IE8 and then compare with Firefox, you'll see what I mean.

Thanks,

Stuart.

3
Contributors
6
Replies
7
Views
8 Years
Discussion Span
Last Post by prachipote
0

The unwanted space is the green space after the text...

0

Because the default width of the submit button was not same in both IE and FF. And the text align property for button or submit can't apply in FF, only in IE. So you see the white space. You can set the exceed width for the button to see both IE and FF with the same result. I don't know how much text do you wanna put in the button and it depends on you.
Here is example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#mapInfoTabBorder div.TabBorderInactiveTab {
	color: #ffffff;
	padding: 0;
	margin: 0;
	background: yellow;
	border: none;
	}
#mapInfoTabBorder div.TabBorderInactiveTab input {
	background: green;
	color: #FFF;
        width: 67px;
	border: 1px solid #eee;
	-moz-border-radius: 7px /* IE can't understand */
	}
</style>
</head>
<body>
	<div id="mapInfoTabBorder">
		<div class="TabBorderTabs">
			<div class="TabBorderInactiveTab">
			<input name="TabSubmit" value="Submit" type="submit" 

/>
			</div>
			<div class="TabBorderActiveTab">
			Info
			</div>
			<div class="TabBorderInactiveTab">
			<input name="TabSubmit_0" value="Reset" type="submit" 

/>
			</div>
			<div class="TabBorderInactiveTab">
			<input name="TabSubmit_1" value="Cancel" type="submit" 

/>
			</div>
		</div>
	</div>
</body>
</html>

Good luck.. and forgive my English skill.

0

Because the default width of the submit button was not same in both IE and FF. And the text align property for button or submit can't apply in FF, only in IE. So you see the white space. You can set the exceed width for the button to see both IE and FF with the same result. I don't know how much text do you wanna put in the button and it depends on you.
Here is example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#mapInfoTabBorder div.TabBorderInactiveTab {
	color: #ffffff;
	padding: 0;
	margin: 0;
	background: yellow;
	border: none;
	}
#mapInfoTabBorder div.TabBorderInactiveTab input {
	background: green;
	color: #FFF;
        width: 67px;
	border: 1px solid #eee;
	-moz-border-radius: 7px /* IE can't understand */
	}
</style>
</head>
<body>
	<div id="mapInfoTabBorder">
		<div class="TabBorderTabs">
			<div class="TabBorderInactiveTab">
			<input name="TabSubmit" value="Submit" type="submit" 

/>
			</div>
			<div class="TabBorderActiveTab">
			Info
			</div>
			<div class="TabBorderInactiveTab">
			<input name="TabSubmit_0" value="Reset" type="submit" 

/>
			</div>
			<div class="TabBorderInactiveTab">
			<input name="TabSubmit_1" value="Cancel" type="submit" 

/>
			</div>
		</div>
	</div>
</body>
</html>

Good luck.. and forgive my English skill.

0

Thanks for taking the time to reply to my post Zero13 but unfortunately it doesn't solve my problem. The text on each submit button has different lenght. If I assign a fixed width then on the buttons with shorter text, I'll still see the whitespace.

Ideally, I'd like to have control over the left and write padding values of the submit button but I'm not sure if this is possible. Does anyone know of any trick or hack that could help me?

...and your English was fine!

0

Thank sbarlow. I don't think there is solution for this problem. The buttons was formed depends on the browser, and every browsers have different style of buttons. My solution was using another inline elements as button, likes anchor link or span. Anchor link is better, because it can carry information likes form. Here is example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<title>Button With Style</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font: normal 11pt/100% Arial,Verdana,Sans-serif;
	color: #1b1b1b
	}
a {
	text-decoration: none;
	color: #FFF;
	background: #000;
	padding: 4pt 7pt;
	margin: 1.4em 3pt 0;
	float: left; 
	display: block 
	}
a:hover {
	background: #494949 }
</style>
</head>
<body>
	<a href="javascript:void(0)" onclick="alert('Button With 

Style');return false;">Submit</a><a href="javascript:void(0)" 

onclick="alert('Button With Style');return false;">Cancel</a>
</body>
</html>

Thank a lot for reply. I hope you'll enjoy it.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.