FF to IE Difference Help

Here's my link: http://7-dokibun.darkgamer.com/Atom/

The page looks fine in FF and Safari, but the text under the header images is way over in IE and Google Chrome. Any help? Here's the code...

<div style="height: 90px; margin-left: 160px;">
<a href="/">
<img style="border: medium none ; vertical-align: middle; float: left; margin-top: 

6px;" src="http://7-dokibun.darkgamer.com/Atom/images/elementalist.png" 

alt="Elementalist"/>
</a>
<a href="/">
<img style="border: medium none ; vertical-align: middle; float: left; margin-top: 

80px; margin-left: -265px;" src="http://7-dokibun.darkgamer.com/Atom/images/logo-

dg.png" alt="DarkGamer" />
</a>
<a href="/">
<img style="border: medium none ; margin-top: 80px; margin-left: -190px;" 

src="http://7-dokibun.darkgamer.com/Atom/images/logo-text.png" alt="DarkGamer" />
</a>
<br/>
<span style="color: #FFFFFF; margin-left: 86px; text-align: left;">[PHP]<? echo $slogan; ?

>[/PHP]</span>
</div>

Code (markup):

 

In my experience with trying to make a site's CSS work with both IE and FF, I usually have to use padding and margin both to make it work.

 

Trey has it right.

I'm not sure who messes up what (coughiecough) but in your body, tables, tds, divs, and Ps set style="margin: 0px; padding: 0px;"

I just struggled with all this two days ago fixing up a new layout... its a pain in the ass when one browser does it right and the other is one noticable pixel off - and it ALWAYS ends up that way for me.

Best of luck!

 

NEW URL:
alter.darkgamer.com

I tried adding

padding-right: XXpx

Code (markup):

to the style tags of the quotes, specifically. And it didn't change much in IE.

@tguillea
My CSS is already default to

margin: 0px; padding 0px;

Code (markup):

for the things you specified.

 

IE is weird. I'm not sure if IE8 is as weird as other versions but still.

Try to use some conditionals for IE

<!--[if IE 6]>
code here
<link href="style.css" type="text/css" rel="stylesheet" />
<![endif]-->

<!--[if LTE IE 6]>
<style type="text/css">
code
</style>
<![endif]-->

<!--[if LT IE 6]>
code here
<![endif]-->

<!--[if GT IE 6]>
code here
<![endif]-->

Choose one of them.

You can also try to use !important right after the value:

..
padding: 10px !important;
..

and it will override other values

There are tons of ways to make IE listen to you

 

The [if IE] comment tags really helped, cause now it looks fine in IE. The only problem is there are now two quote sections displayed, due to the rule I left for the firefox version. Is there a way to have that code output for firefox and the other for ie, respectively? Of for browsers, in general.

EDIT:

Solved it with

<!--[if IE]>
<span style="color: #FFFFFF; margin-left: -186px;"><? echo $slogan; ?></span>
<![endif]-->
<!--[if !IE]><!-->
<span style="color: #FFFFFF; margin-left: 86px;"><? echo $slogan; ?></span>
<![endif]-->

Code (markup):

Just wondering, not that important but

<![endif]-->

Code (markup):

comes up as invalid when trying to validate my page through w3c standards. Is there any way to hide this or prevent that?

 

Yes.. use javascript

 

// JavaScript Document

var agt=navigator.userAgent.toLowerCase();
var isIE6 = (agt.indexOf('msie 6.')!=-1);
var isIE7 = (agt.indexOf("msie 7.")!=-1);
var is_chrome = (agt.indexOf("chrome")!=-1);
if (isIE6) {
document.write("<link href=\"css/ie6.css\" rel=\"stylesheet\" type=\"text/css\" title=\"Default\" />");
} else {
if (isIE7) {
document.write("<link href=\"css/defaultie.css\" rel=\"stylesheet\" type=\"text/css\" title=\"Default\" />");
// alert("Internet Explorer 7 Browser Used");
} else {
document.write("<link href=\"css/default.css\" rel=\"stylesheet\" type=\"text/css\" title=\"Default\" />");
// alert("Firefox Browser Used");
}
}
if (is_chrome) {
document.write('<link href="css/chrome.css" rel="stylesheet" type="text/css" />');
// alert("Chrome Browser Used");
}

 

Well the problem with creating a CSS file for each browser, or any, altogether would be that I only need to change the style for THAT span. I already have another style set for all other spans. Or am I not understanding what to do here?

 

Look. Use that javascript code that I wrote. Create a general css file to use for every browser and then create particular files for each browser where you'll set styles for divs or whatever don't works good for the specific browser.

 

Well, I just gave that span a class of "quote"

created

span.quote {CSS}

in seperate files.

Only seems to work in FF.

I have

span.quote {
color: #FFFFFF; margin-left: -186px;
}

for IE, IE6, and chrome.css files.

And

span.quote {
color: #FFFFFF; margin-left: 86px;
}

for DEFAULT.css

following the javascript you gave me.

EDIT:

After using the Javascript my page errors jumped from ten to 33. It doesn't seem to like the forward slashes that protect those quotes. Hmm....

 

I think I have come up with the answer for you.

It seems IE elements (at least TDs) that are nested within other elements take on the "parent" element's styles in terms of padding, margin, and/or alignment.

I'm not really sure if I just saw this weird phenomenon, but that theory gave me my answer just now.

So for example, if a parent element has a specified padding, IE might apply that to the child element as well for some reason.

 

use a css reset to set defaults for some items which could make things display wrong in different browsers.

 

Already have a css reset value set. I believe tguillea is correct, but it would help if he could work with the code I've posted. Cippo_ro also, has been a great help... wish I could get that javascript to work. As of now I have the site cross-browser (IE & FF) using this quick fix:

<!--[if IE]>
and
<!--[if !IE]>

fixes, but I'm not sure if that's safe to use as the javascript may be better. Also getting two w3c validation errors on my page. Both from this one closing:

<![endif]-->

I don't see why, because I have the exact same tag just a few lines above that one and it doesn't even pull that into question.

 

Do you have a problem just with ie6 or with all ie's?

 

Actually, I use IE8, and the problem was in there. So it seemed to be fixed with that. I really haven't tested it in other browsers, though. I hear Safari, it looks fine. And I'm not sure about others. I'll have to ask colleagues. But from what I gathered my first time around, chrome, and IE were displaying it the same. And FF had it the way I wanted it.

 

Try using a CSS reset statement
This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
Hope this helps

 

Like I said, I already have a CSS reset value set.

 

IE adds gaps when you use floating element (float:left or float:right) with non floating one, also a couple of pixels below the photo. Firefox renders block wrongly when it has only floating elements within (you have to use element with clear:both attribute a the bottom of that block to fix it). They render things a bit different; however IE8 works very similar to latest Firefox...

 

Didn't realize the subtle differences, could you modify my code cause I'm not exactly sure what you meant about my block.

EDIT:

Nevermind, I started messing around with that clear: both; attribute and it works wonders for cross browser! Thanks for that suggestion! Really appreciate it! And the help everyone else has provided also, thanks much everyone.