Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

IE & Firefox Descrepancy

Posted on 2011-09-12
17
Medium Priority
?
460 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 1600 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 400 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

926 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