[SOLVED] Internet Explorer Compatability

Shiny_Charizard · January 6, 2009

Can you guys tell me what I should do to make this layout compatible with internet explorer?

Here is the layout:

http://www.flamezinteractive.cn

Style Sheet:

a:link {color: #A50000; text-decoration: none;}
a:active {color:#A50000; text-decoration: none;}
a:visited {color:#A50000; text-decoration: none;}
a:hover {color: #E25A00;}

body {

background-color: #FF7519;
font-family:franklin gothic medium;
font-size:11px;
}

#header_left {
background-image: url('http://img.flamezinteractive.cn/layout/left_header.png');
width: 91px;
height:113px;	
}

#header_right {
background-image: url('http://img.flamezinteractive.cn/layout/right_header.png');
width: 91px;
height:113px;	
}

#header_middle {
background-image: url('http://img.flamezinteractive.cn/layout/header_rep.png');
width:600px;
height:113px;
background-repeat: repeat-x;
font-family:Lucina medium;
}

#menu {
border-left: 2px solid #404040;
border-bottom: 2px solid #404040;
background-image: url('http://img.flamezinteractive.cn/layout/unhovered_menu.png');
height:	40px;
background-repeat: repeat-x;
color: #E25A00;
text-align: center;
}

#n_menu {
border-left: 2px solid #404040;
border-bottom: 2px solid #404040;
background-image: url('http://img.flamezinteractive.cn/layout/unhovered_menu.png');
height:	40px;
background-repeat: repeat-x;
color: #E25A00;
text-align: center;
}

#menu:hover {
border-left: 2px solid #404040;
border-bottom: 2px solid #404040;
background-image: url('http://img.flamezinteractive.cn/layout/hovered_menu.png');
height: 40px;
background-repeat: repeat-x;
color: black;
text-align: center;
}

#content_side_l {
border-right: 2px solid #686868;
background-image: url('http://img.flamezinteractive.cn/layout/content_sides.png');
width: 86px;
background-repeat: repeat-y;
}

#content_side_r {
border-right: 2px solid #686868;
background-image: url('http://img.flamezinteractive.cn/layout/content_sides.png');
width: 87px;
background-repeat: repeat-y;
}

#content {
background-color: #8E8E8E;
width: 600px;
color: #C40000;
}

#footer_left {
background-image: url('http://img.flamezinteractive.cn/layout/left_footer.png');
width: 91px;
height:113px;	
}

#footer_right {
background-image: url('http://img.flamezinteractive.cn/layout/right_footer.png');
width: 91px;
height:113px;	
}

#footer_middle {
background-image: url('http://img.flamezinteractive.cn/layout/footer_rep.png');
width:600px;
height:113px;
background-repeat: repeat-x;
}

img {
border: 0;
}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Home :: Flamez Interactive</title>
<meta name="description" content="Flamez Interactive - Websites, Software, and more!" />
<meta name="keywords" content="websites, software, games, video games, auto insurance, credit score, credit report, debt consolidation" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<center>
<table rules='rows' border='0'>
<tr border='0'>
<td id='header_left' border='0'></td>
<td id='header_middle' border='0'> 
<img src='http://img.flamezinteractive.cn/fi_logo.png' width='130' height='80' alt='Flamez Interactive Logo' />
 <font size='6'>Flamez</font>  <font size='3'>Interactive</font>

</td>
<td id='header_right' border='0'></td>
</tr>
</table>
<!-- Menu START -->
<table rules='rows' border='0'>
<tr border='0'>
<td id='n_menu' border='0' width='85px'> </td>
<td id='menu' border='0'> <a href='?location=index'>Home</a> </td>
<td id='menu' border='0'> <a href='?location=games'>Games</a> </td>
<td id='menu' border='0'> <a href='?location=websites'>Websites</a> </td>
<td id='menu' border='0'> <a href='?location=software'>Software</a> </td>
<td id='menu' border='0'> <a href='?location=contact_us'>Contact Us</a> </td>

<td id='menu' border='0'> <a href='?location=staff'>Staff</a> </td>
<td id='n_menu' border='0' width='319px'> </td>
<td id='n_menu' border='0' width='85px' style='border-right: 2px solid #404040;'> </td>
</tr>
</table>
<!-- Menu END -->
<table rules='rows' border='0'>
<tr border='0'>
<td id='content_side_l' border='0'> </td>
<td id='content' border='0'>
<!-- AdSense START -->
<center>
<script type="text/javascript"><!--
google_ad_client = "pub-0302984311616959";
/* Content (468x60, created 12/23/08) */
google_ad_slot = "3728975617";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</center>
<!-- AdSense END -->
<br />
<br />
<!-- Content START -->
<center><b><u>News</u></b><br /><br />
<small><i>December 20, 2008 (9:57pm):</i> The layout is completed.</small>
</center>
<!-- Content END -->
<br /><br /><br />
</td>
<td id='content_side_r' border='0'> </td>
</tr>
</table>

<!-- Footer START -->
<table rules='rows' border='0'>
<tr border='0'>
<td id='footer_left' border='0'></td>
<td id='footer_middle' border='0'><center> &copy 2008-2009 Norberto Hernández. All Rights Reserved.</center></td>
<td id='footer_right' border='0'></td>
</tr>
</table>
<!-- Footer END -->
<br />
</center>
</body>
</html>

Thanks a lot!

Shiny_Charizard · January 7, 2009

*bump*

richrock · January 7, 2009

I tend to reset everything and start from scratch with CSS...

Here's my master reset CSS (I work with Joomla sometimes, so I've included both). Hope this helps!

/* Full Reset - adapted. */
/* README - THIS IS IMPORTANT!!!! */
/*
The first listing is for Joomla systems, the second is for HTML pages/PHP scripts, etc.
*/
/* provides complete reset for all browsers */
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, .contentpaneopen, .contentheading {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
outline:none;
}


/* provides complete reset for all browsers */
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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
outline:none;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

td {
font-family: Arial, Helvetica, sans-serif;
}

th {
font-family: Arial, Helvetica, sans-serif;
}

TheFilmGod · January 7, 2009

Why not just say

* {

margin: 0;

padding: 0;

... ...

}

Instead of listing all the elemnts seprately?

Shiny_Charizard · January 7, 2009

It looks messed up on Firefox and it looks the same on IE.

richrock · January 7, 2009

Like I said, this resets everything to start from scratch. What this means is that, for example, IE adds a border at the top of the browser in <body>, yet FF doesn't. So the reset CSS I use makes sure that both IE and FF (and Safari, Konqueror, Opera, etc) all start from the same point. When I now set any definitions on the <body> tag as above, it means I get it right on all browsers. This cuts down my build times, and also testing times on each browser platform.

This is what I do. That code I suggested has saved clients hundreds of pounds in expenditure when having new sites built.

Hope that explains things.

The reason I list all the elements is so that I have absolute control and can add/remove them depending on the site I build and it's intended use. For instance, I quite often remove

abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,

Because I use them very little. It's easier to do that rather than write them every time because I've done it like you suggested with a * { ... }

YMMV, and I am only suggesting my own method, which works very well for me. Best of luck!

Rich

richrock · January 7, 2009

And another tip:

Code for IE. Firefox has less hassle with CSS and layouts than IE, which tends to interpret code a little more literally.

Is there a specific problem with the site? I can't see anything drastically wrong in FF, nor in IE7

Shiny_Charizard · January 8, 2009

Thanks, I'll restart it then.

No, there isn't really a problem with the site, I just want the layout to look just right.

Thanks again.

Sign In

[SOLVED] Internet Explorer Compatability

Recommended Posts

Shiny_Charizard

Link to comment

Share on other sites

Shiny_Charizard

Link to comment

Share on other sites

richrock

Link to comment

Share on other sites

TheFilmGod

Link to comment

Share on other sites

Shiny_Charizard

Link to comment

Share on other sites

richrock

Link to comment

Share on other sites

richrock

Link to comment

Share on other sites

Shiny_Charizard

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information