Solved

IE & Firefox Descrepancy

Posted on 2011-09-12
17
446 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
ID: 36526477
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
ID: 36526483
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
ID: 36526525
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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

Author Comment

by:Richard Korts
ID: 36526576
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
ID: 36526655
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
ID: 36526677
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
ID: 36526706
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
ID: 36526718
Is this the only page with a table in the main content area with a form on it?
0
 

Author Comment

by:Richard Korts
ID: 36527109
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
ID: 36529237
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
ID: 36530053
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
ID: 36531694
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
ID: 36531705
No solution was presented.

I am awarding points for effort.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 36532234
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
ID: 36532827
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
ID: 36532867
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
ID: 36533227
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

786 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