Solved

IE & Firefox Descrepancy

Posted on 2011-09-12
17
440 Views
Last Modified: 2012-05-12
Please view the two attached images. These are the IE & FireFox versions of the same HTML.

Obviously, the FireFox one is the desired result.

Also attached is HTML & css.

Why the difference
job-list-IE.htm
mainr3.css
job-list-sel-ff.jpg
job-list-sel-ie.jpg
0
Comment
Question by:Richard Korts
17 Comments
 
LVL 17

Expert Comment

by:nanharbison
Comment Utility
IE uses some built in margins or padding in certain html elements. See this article:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

I generally use suggestion 3, make conditional style sheets that only IE will see, and I change values of html elements in that style sheet so the site works in IE.
0
 
LVL 17

Accepted Solution

by:
nanharbison earned 400 total points
Comment Utility
Or, I just remembered this, you can also use some CSS that sets all the margins and padding to zero to start with at the beginning of your css, Here is a CSS reset script that someone pointed me to
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}

Open in new window

0
 

Author Comment

by:Richard Korts
Comment Utility
To nanharbison:

I have seen that reset css too, I didn't know what it does.

Two comments.

(1) There are maybe a HUNDRED other pages on this site that work fine in both IE & FF (using SAME css). See whasocal.org.

(2) Are you suggesting I include the reset.css together with the existing css?. Which one is first?

Thanks

0
 

Author Comment

by:Richard Korts
Comment Utility
To nanharbison:

I used the reset you provided (as a separate css file BEFORE the regular one).

It made it worse.

See attached.

I really think it's something else since the css works in IE everywhere else.
job-list-sel-worse.jpg
0
 
LVL 17

Expert Comment

by:nanharbison
Comment Utility
I guess the time to use this reset code is when you are just getting started  on building a website! Something must be off in the HTML on this one page then. I will look at it.
0
 
LVL 17

Expert Comment

by:nanharbison
Comment Utility
Which page is it that looks like this in IE? And what version of IE does this look bad in?
0
 

Expert Comment

by:escottx
Comment Utility
I think you're better off using nanharbison's first suggestion and create an IE-specific stylesheet. I know you said the other pages are fine, but without seeing the markup in each of those other files, it would be hard to tell you what's going on. And if you're going to do a reset, put it in the same file before the rest of the CSS.
0
 
LVL 17

Expert Comment

by:nanharbison
Comment Utility
Is this the only page with a table in the main content area with a form on it?
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:Richard Korts
Comment Utility
To nanharbison:

The site is primairly php scripts. The page in question is member only so it's not accessible to the general public. I can set you up with a temp password, etc., but I'd rather not have to do that. That's why I captured the generated HTML & sent it.

I am using IE 8.0

ALL the pages have tables like the one in question.

Thanks
0
 
LVL 8

Assisted Solution

by:PagodNaUtak
PagodNaUtak earned 100 total points
Comment Utility
Hi!

Put text-align:center in the body then put text-align:left in the #bodyText.

Uploaded the modified css...

Cheers,

Jehova is Great!
/************************************************* These are some things to keep in mind when working with CSS

CSS Specificity: Each #ID = 100, Each .Class = 10, Each <Tag> = 1. Thus: #someID.someClass li = 111.

The Following Attributes are Inheritable: border-collapse, border-spacing, caption-side, color, cursor, direction, empty-cells, font, 
font-family, font-stretch, font-size, font-size-adjust, font-style, font-variant, font-weight, letter-spacing, line-height, list-style, 
list-style-image, list-style-type, quotes, text-align, text-indent, text-transform, white-space, word-spacing.     */

body {
   margin-top: 0px;
   background-color: #540021;
   font-family: Arial, Helvetica, sans-serif;
   text-align:center;
}

h1 {
   font-size: 1.4em;
   margin-top: 5px;
   color: #011E3C;
   font-weight: bold;
   margin-bottom: 0px;
}

h1.gold {
   font-size: 1.5em;
   margin-top: 5px;
   color: #94693C;
   font-weight: bold;
   margin-bottom: 0px;
}

h2 {
   font-size: 1em;
   color: #011E3C;
   margin-top: -0.5em;
   font-weight: normal;
}

h2.gold {
   font-size: 1.3em;
   color: #94693C;
   margin-top: -0.5em;
   font-weight: normal;
}

h2.big {
   font-size: 1.1em;
   color: #011E3C;
   margin-top: -0.5em;
   font-weight: bold;
}

h3 {
   font-size: 0.9em;
   color: #540021;
   margin-top: 15px;
   line-height: 1.5em;
   margin-bottom: 1.7em;
}

h4 {
   font-size: 0.9em;
   color: #666;
   line-height: 1.5em;
}

h5 {
   font-size: 0.8em;
   color: #FFF;
   text-align: center;
   line-height: 1.5em;
}

p {
   margin-top: -1em;
   margin-bottom: 1.5em;
   font-size: 16px;
   line-height: 1.3em;
   color: #011E3C;
}

img {
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
}

a:link {
   color: #001D3B;
   margin-bottom: 0.5em;
   line-height: 1em;
}

a:visited { color: #001D3B; }

a:hover { color: #4E6C8E; }

a:active { color: #001D3B; }

.italic { font-style: italic; }

/*  Font Coloring *******************************************************************/

a:link.wheat { color: #CAB69E; }

a:visited.wheat { color: #CAB69E; }

a:hover.wheat { color: #FFFFFF; }

a:active.wheat { color: #001D3B; }

a:link.white { color: #FFFFFF; }

a:visited.white { color: #FFFFFF; }

a:hover.white{ color: #FFFFFF; }

a:active.white { color: #FFFFFF; }

#bodyText {
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   text-align:left;
}
.pt8  {font-size: 11px; font-family: Arial; color: #011E3C}
.f7em {font-size: .8em; font-family: Arial; color: #011E3C}
.pt9  {font-size: 12px; font-family: Arial; color: #011E3C}
.px14 {font-size: 14px; font-family: Arial; color: #011E3C}	
.pt9wh  {font-size: .9em; font-family: Arial; color: #CAB69E}	
.pt8w  {font-size: .7em; color: white; font-family: Arial}	
.pt7  {font-size: 7pt; font-family: Arial}
.pt11 {font-size: 1.2em; font-family: Arial}
.pt12 {font-size: 1.3em; font-family: Arial}
.pt10 {font-size: 16px; font-family: Arial; color: #011E3C}
.pt8br  {font-size: .7em; color: #86633A; font-family: Arial}	
.pt11s {font-size: 11pt; font-family: Arial; color: #144D74}
.pt11r {font-size: 11pt; font-family: Arial; color: #011E3C}
.pt12s {font-size: 12pt; font-family: Arial; color: #144D74}
.pt14s {font-size: 14pt; font-family: Arial; color: #144D74}
.pt14 {font-size: 14pt; font-family: Arial}
.gold {font-size: 1.3em; font-family: Arial; color: #86633A}

ul {
   font-size: 16px;
   line-height: 1.3em;
   color: #011E3C;
}
ul.sm {
   font-size: 16px;
   color: #011E3C;
}

ul.wheat 
{
   margin-top: -1em;
   margin-bottom: 1em;
   font-size: .9em;
   line-height: 1.3em;
   color: #CAB69E;
}
ul.norm

{
   font-size: 16px;
   line-height: 1.3em;
   color: #011E3C;
}
ul.thin

{
   font-size: 16px;
   line-height: 1.3em;
  	margin-top: 2px;
	margin-bottom: 2px;
	padding-top:0;
	padding-bottom:0; 
   color: #011E3C;
}
ul.links

{
   font-size: 16px;
   line-height: 1.3em;
  	margin-top: 4px;
	margin-bottom: 10px;
	padding-top:0;
	padding-bottom:0; 
   color: #011E3C;
}
a:link.bronze { color: #86633A; }

a:visited.bronze { color: #86633A; }

a:hover.bronze { color: #FFFFFF; }

a:active.bronze { color: #001D3B; }

#mainWrapper {
   width: 1000px;
   margin-top: 9px;
   margin-right: auto;
   margin-left: auto;
   background-color: #540021;
   background-image: url(../images/BkgDecor.jpg);
   background-repeat: no-repeat;
}

#homeWrapper {
   width: 1000px;
   margin-top: 9px;
   margin-right: auto;
   margin-left: auto;
   background-color: #540021;
   background-image: url(../images/MainBkgDecor.jpg);
   background-repeat: no-repeat;
}
#homeWrappert {
   width: 1000px;
   margin-top: 9px;
   margin-right: auto;
   margin-left: auto;
   background-color: #FFFFFF;
   background-image: url(../images/MainBkgDecor.jpg);
   background-repeat: no-repeat;
}
#headerWrapper {
   float: none;
   height: 234px;
   background-repeat: no-repeat;
   margin-right: auto;
   margin-left: auto;
   width: 960px;
}

#headerLogo {
   float: left;
   width: 697px;
}

#headerRight {
   float: right;
   width: 263px;
}

#headerSearch {
   float: left;
   height: 48px;
   width: 263px;
}

#headerJoin {
   float: left;
   height: 40px;
   width: 183px;
   font-size: .98em;
   font-style: normal;
   color: #BBAC9B;
   text-align: center;
   padding-left: 80px;
}

#headerLogin {
   float: left;
   height: 135px;
   width: 263px;
}

#bodyWrapper {
   width: 960px;
   height: auto;
   margin-left: auto;
   margin-right: auto;
   background-color: #FFFFFF;
}

#sampleText {
   width: 920px;
   margin-left: auto;
   margin-right: auto;
}

#roundedBottom {
   height: 17px;
   margin-right: auto;
   padding-left: 20px;
}

#footerWrapper {
   width: 960px;
   height: auto;
   margin: 0 auto;
   text-align: center;
   color: #FFF;
}

#socialLinks {
   width: 80px;
   float: left;
   background-repeat: no-repeat;
   height: 40px;
   padding-top: 4px;
   padding-left: 20px;
   margin-top: -40px;
}

#footerMenu {
   height: 40px;
   font-size: 0.8em;
   width: 960px;
   text-align: center;
   margin: 0 auto;
}

#footerMenu li {
   list-style: none;
   padding-right: 10px;
   padding-left: 10px;
   padding-top: 5px;
   float: left;
   border-top: 1px #fff;
   border-right: 1px solid #fff;
   border-bottom: 1px #fff;
   border-left-width: 1px #fff;
}

#footerMenu ul{list-style: none; margin: 0 auto; padding-left: 160px;}
#footerMenu li.last { border-right-style: none; }

#footerMenu a:link {
   color: #FFF;
   text-decoration: none;
   list-style-type: none;
}

#footerMenu a:visited {
   color: #FFF;
   text-decoration: none;
   list-style-type: none;
}

#footerMenu a:hover {
   color: #FFF;
   text-decoration: underline;
   list-style-type: none;
}

#footerMenu a:active {
   color: #FFF;
   text-decoration: none;
   list-style-type: none;
}

#footerCopyright {
   margin-right: auto;
   margin-left: auto;
   text-align: center;
   font-size: 0.7em;
   color: #FFF;
   padding-top: 5px;
   margin-top: -10px;
}
#footerCopyright a:link {
   color: #FFF;
   text-decoration: none;
   list-style-type: none;
}

#footerCopyright a:visited {
   color: #FFF;
   text-decoration: none;
   list-style-type: none;
}

#footerCopyright a:hover {
   color: #FFF;
   text-decoration: underline;
   list-style-type: none;
}

#footerCopyright a:active {
   color: #FFF;
   text-decoration: none;
   list-style-type: none;
}


#headerNav {
   font-size: 0.85em;
   color: #666;
   text-transform: uppercase;
   margin-top: 4px;
   text-align: center;
   line-height: 1.7em;
}

.eventTitles {
   text-transform: uppercase;
   text-align: center;
   line-height: 1.2em;
   font-weight: bold;
}

.presenting {
   font-size: 1.4em;
   text-transform: uppercase;
   color: #9A7A53;
}

.blueSubHeader {
   color: #cab69e;
   text-transform: uppercase;
   font-size: 2em;
   text-align: center;
   background-color: #011E3C;
   padding-top: 2px;
   padding-bottom: 2px;
}

.platinum {
   font-size: 1.8em;
   line-height: 1em;
}

.gold {
   font-size: 1.5em;
   line-height: 1em;
}

.silver {
   font-size: 1.2em;
   line-height: 1em;
}

.bronze {
   font-size: 1em;
   line-height: 1em;
}

.dividerHoriontal {
   height: 2.5px;
   width: auto;
   background-color: #94693C;
}

Open in new window

mainr3.css
0
 

Author Comment

by:Richard Korts
Comment Utility
To PagodNaUtak:

That helps some, but doesn't fix it and it "unfixes" it in FireFox.

See attached.

FYI, I only applied the changed css to this ONE file, so the others are probably still OK.

I suspect it's mismatched <div>'s or something like that that FireFox "forgives" but IE doesn't.

If one of you can find that, it would be MOST helpful.
jls-ff.jpg
jls-ie.jpg
0
 

Author Comment

by:Richard Korts
Comment Utility
To all,

I fixed the problem. I don't know how, but I did.

In cases like this, where it is seemingly impossible, I start with an essentially empty page template & start building, piece by piece to reach the failing page.

I did that here. At first it failed when I pasted in the top php code (which has NOTHING to do with the page layout). So I took out ALL the php code & started putting it back in a little at a time.

I did it in about 5 steps, it never failed.

So I went with that & replaced the other page. There were actually 2, did the exact same procedure to the 2nd one, same (good) result.
0
 

Author Closing Comment

by:Richard Korts
Comment Utility
No solution was presented.

I am awarding points for effort.
0
 
LVL 17

Expert Comment

by:nanharbison
Comment Utility
Thaks for the points, I was out all day until now. So here is one problem, the roundedtottom div has padding of 20ox on the left, and IE pushes that 20px over to the right from the main content.
0
 
LVL 17

Expert Comment

by:nanharbison
Comment Utility
Did you try starting with the html from another page and replacing the content in the main content area with the table with the job search?
0
 

Author Comment

by:Richard Korts
Comment Utility
To nanharbison:

Yes, I started with a very simple fixed text page, then replaced the "body" with the body from the job search page. When I say "body" I don't mean literally HTML body, I mean the main content area. Since it's a php page, it's a little more complicated than that.

The page I started with worked correctly (style wise) in BOTH IE & FireFox.

I have used this technique MANY times before, I was just hoping that an expert could see something, it's tedious to go through all that & prone to error.
0
 
LVL 17

Expert Comment

by:nanharbison
Comment Utility
I didn't understand why IE didn't obey the margin:auto CSS! It was weird. I tried several things that didn't help, and only came up with how the padding was moving the roundedbottom over. I am not sure you need that padding since you are using auto margins.
Glad you figured it out, sorry I wasn't around today to continue working on it.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

763 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now