IE & Firefox Descrepancy

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
Richard KortsAsked:
Who is Participating?
 
nanharbisonConnect With a Mentor Commented:
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
 
nanharbisonCommented:
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
 
Richard KortsAuthor Commented:
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
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
Richard KortsAuthor Commented:
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
 
nanharbisonCommented:
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
 
nanharbisonCommented:
Which page is it that looks like this in IE? And what version of IE does this look bad in?
0
 
escottxCommented:
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
 
nanharbisonCommented:
Is this the only page with a table in the main content area with a form on it?
0
 
Richard KortsAuthor Commented:
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
 
PagodNaUtakConnect With a Mentor Commented:
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
 
Richard KortsAuthor Commented:
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
 
Richard KortsAuthor Commented:
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
 
Richard KortsAuthor Commented:
No solution was presented.

I am awarding points for effort.
0
 
nanharbisonCommented:
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
 
nanharbisonCommented:
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
 
Richard KortsAuthor Commented:
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
 
nanharbisonCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.