Inconsistency accross IE7 & Firefox 2.0

If you view the following website on IE 7 & Firefox 2 you will see some difference. www.etech.net/dea. Obviously I will have to use 2 style sheets one for IE & one for Firefox. I know how to do that. But I can't figure out what styles to change.

Following are the styles I have used.

body {
text-align: center;
}

IMG
{
    border:none;
}

#Wrapper{
margin: 0 auto;
width:800px;
}

#LoginBox{
width: 492px;
height: 325px;
background: url(images/loginback.jpg) no-repeat left top;
margin-top: 40px;
text-align: left;
}

.LoginTxt1{ margin: 116px 0px 0px 203px; width: 180px; display: block;}

.LoginTxt2{ margin: 21px 0px 10px 203px; width: 180px; display: block;}

.Checkbox {
color:#46474c;
font-size:12px;
font:Calibri;
font-weight:800;
margin: 0px 0px 0px 203px;
padding-top: 3px;
}


.btn
{
    margin: 21px 0px 10px 225px;
    display: block;
}
sergeiweerasuriyaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Göran AnderssonCommented:
As always, when Internet Explorer and Firefox renders a page differently, Firefox renders it correctly and IE gets it all wrong.

Your layout relies on rendering errors in IE, so it will not render the same in any other browser, as they don't have the same rendering errors.

A quick look at your code quickly revieled two IE bugs that you use:

1. text-align is applied to block elements. Although block elements should not be affected by text alginment, IE centers block elements in a block where the text is centered.

2. css class and id names are case sensetive. You have specified a style for the id "Wrapper", and IE also applied this to the id "wrapper".

I'll have a look at your css and see if I can fix it. You should absolutely not have to have separate styles for something simple as this.
0
Mr_SplashCommented:
The following will work in both browsers.

You don't require the separate stylesheets
<style type="text/css" media="all">
<!--
body {
  text-align: center; background: #fff;
}
 
IMG {
  border:none;
}
 
#Wrapper{
  margin: 0 auto;
  width:800px;
}
 
#LoginBox{
  width: 292px;  height: 325px;
  background: url(images/loginback.jpg) no-repeat left top;
  margin: 40px auto;
  text-align: left;
  padding: 120px 0 0 200px;
}
 
.LoginTxt1, .LoginTxt2 {width: 180px; float: left; clear: both; margin-bottom: 23px;}
 
.Checkbox {
  color:#46474c;
  font-size:12px; font:Calibri; font-weight:800;
  float: left; clear: both;
  margin-bottom: 10px;
}
 
.btn {
  float: left; clear: both;
}
-->
</style>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Göran AnderssonCommented:
This css works fine with both IE 7 and Firefox 2.

Some notes:

Different browsers have different default page margin, so you need to specify it if you want it to look the same. Opera uses padding instead of margin for the body (which actually is more logical), so you have to specify both.

Changed #Wrapper to #wrapper. Applied centering (margin auto) to the LoginBox style instead.

If you use top margin on LoginTxt1, it will collapse with the margin of the LoginBox, so use padding-top in the LoginBox instead. IE doesn't collapse these margins correctly.

When specifying the font family, use the font-family style, not font. Also, as not all users have the Calibri font, specify some similar looking fallbacks. Specify a generic font like sans-serif as the last alternative.

body {
	margin: 0;
	padding: 0;
}
 
img {
	border:none;
}
 
#wrapper{}
 
#LoginBox{
	margin: 50px auto 0 auto;
	width: 492px;
	height: 209px;
	padding: 116px 0 0 0;
	background: url(http://www.etech.net/DEA/images/loginback.jpg) no-repeat left top;
}
 
.LoginTxt1{
	display: block;
	margin: 0 0 0 203px;
	width: 180px;
}
 
.LoginTxt2{
	display: block;
	margin: 23px 0 10px 203px;
	width: 180px;
}
 
.Checkbox {
	color: #46474c;
	font-family: Calibri, Tahoma, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 800;
	margin: 0 0 0 203px;
	padding-top: 3px;
}
 
.btn {
	display: block;
	margin: 21px 0 0 225px;
}

Open in new window

0
Göran AnderssonCommented:
Checking back to see if you had any progress?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.