Solved

Inconsistency accross IE7 & Firefox 2.0

Posted on 2007-12-03
4
1,291 Views
Last Modified: 2013-12-07
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;
}
0
Comment
Question by:sergeiweerasuriya
  • 3
4 Comments
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20397012
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
 
LVL 3

Accepted Solution

by:
Mr_Splash earned 250 total points
ID: 20397085
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
 
LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 250 total points
ID: 20397172
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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20589913
Checking back to see if you had any progress?
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
push logos in footer up higher 5 23
Crazy text will not be removed no matter what I try! 13 30
Looking for magnifying glass wingding font 3 17
Box Locations 6 16
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question