Extra unwanted whitespace - IE Browser

Question

sbarlow 0 Newbie Poster

14 Years Ago

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.

web-design

3 Contributors
6 Replies
89 Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by prachipote

All 6 Replies

ko ko 97 Practically a Master Poster

14 Years Ago

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.

ko ko 97 Practically a Master Poster

14 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sbarlow 0 Newbie Poster · Answer 1 · 2009-10-22T21:08:45+00:00

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

sbarlow 0 Newbie Poster · Answer 2 · 2009-10-23T15:08:06+00:00

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!

ko ko 97 Practically a Master Poster · Answer 3 · 2009-10-24T16:55:25+00:00

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.

prachipote 0 Newbie Poster · Answer 4 · 2009-10-27T17:11:09+00:00

try to give inline dont use much css style it gives problem in cross browsimg

Extra unwanted whitespace - IE Browser

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers