PDA

View Full Version : Website displaying differently in Firefox / IE


skot4th
02-15-2009, 03:18 AM
Morning,

After a bit of help if anyone can.

I've just finished designing my site [http://oneeighttwo.net/] (http://oneeighttwo.net/%5D) and I'm ready to start filling it with the content.

When I test the site in Firefox the pages display exactly as I want them too. Using the Firefox developer tools there are no errors with the CSS.

However when I view in IE the tables / borders do not display properly.

I think I have identified the issue to being the CSS tag

border-spacing:Which dreamweaver says isn't supported by IE 5+. However Firefox NEEDS this to display the page how I want it. If I remove it then it looks just as bad as IE does.

Is there any other tag that can get around this issue to creat the look I want?

Cheers

Scott

P.S For refrence here is my CSS / HTML

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
cursor: crosshair;
background-image: url('http://oneeighttwo.net/_images/bg/index.php');
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 20px;
}

a {
color: #FF3300;
text-decoration: none;
}

a:hover {
cursor: help;
color: #D2D2D2;
text-decoration: underline;
}

a:active {
cursor: help;
color: #D2D2D2;
text-decoration: underline;
}

a.menu {
color: #FF3300;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
cursor: crosshair;
}

a.menu:hover {
color: #d2d2d2;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
cursor: crosshair;
}

table.one {
text-align: center;
vertical-align: top;
border-style: solid;
border-spacing: 0px;
border-width: 0px;
padding: 5px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}

table.two {
vertical-align: top;
overflow: scroll;
background-color: #000000;
border-color: #FFFFFF;
border-style: solid;
border-spacing: 5px;
border-width: 10px;
padding: 5px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}

table.three {
text-align: center;
vertical-align: top;
background-color: #000000;
border-color: #ffffff;
border-style: solid;
border-spacing: 0px;
border-width: 10px;
padding: 0px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}

table.header {
vertical-align: top;
border-style: none;
border-spacing: 0px;
border-width: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}

table.copyright {
vertical-align: top;
overflow: scroll;
background-color: #000000;
border-color: #FFFFFF;
border-style: solid;
border-spacing: 5px;
border-width: 10px;
padding: 5px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}

table.news {
vertical-align: top;
background-color: #000000;
border-color: #FFFFFF;
border-style: solid;
border-spacing: 0px;
border-width: 0px;
padding: 5px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}

td.header {
vertical-align: top;
background-image: url('http://oneeighttwo.net/_images/header/index.php');
border-style: none;
border-spacing: 0px;
border-width: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
}

td.menu {
vertical-align: middle;
background-image: url('http://oneeighttwo.net/_images/menu_bar2.jpg');
border-style: none;
border-spacing: 0px;
border-width: 0px;
padding: 5px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 19px;
color: #FFFFFF;
}

td.main {
vertical-align: top;
border-style: none;
border-spacing: 0px;
border-width: 0px;
padding: 0px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}

td.bold {
vertical-align: top;
border-style: none;
border-spacing: 0px;
border-width: 0px;
padding: 0px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

td.text {
vertical-align: top;
border-style: none;
border-spacing: 0px;
border-width: 0px;
padding: 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}

td.title {
vertical-align: top;
border-style: none;
border-spacing: 0px;
border-width: 0px;
padding: 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
color: #FF3300;
font-size: 18px;
font-weight: bold;
}

td.news_title {
vertical-align: top;
border-style: none;
border-spacing: 0px;
border-width: 0px;
padding: 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
color: #FF3300;
font-size: 14px;
font-weight: bold;
}

td.right {
text-align: right;
}<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ONEEIGHTTWO.net // Blink 182</title>
</head>

<STYLE TYPE="text/css">
@import url("css.css");
</STYLE>



<body>
<center>
<table class="header" width="850">
<tr>
<td width="354">&nbsp;</td>
<td width="484">&nbsp;</td>
</tr>
<tr>
<td colspan="2">


<table class="three" width="825">
<tr>
<td>
<table class="header" width="803">
<tr>
<td height="300" class="header"></td>
</tr>
<tr>
<td class="menu" height="40">
<a class="menu" href="http://oneeighttwo.net">Home</a>&nbsp;&nbsp;
<a class="menu" href="http://boards.oneeighttwo.net" title="The Red Room" target="_blank">Boards</a>&nbsp;&nbsp;
<a class="menu" href="go.php?page=disc">Discography</a>&nbsp;&nbsp;
<a class="menu" href="go.php?page=downloads">Downloads</a>&nbsp;&nbsp;
<a class="menu" href="go.php?page=lyrics">Lyrics</a>&nbsp;&nbsp;
<a class="menu" href="go.php?page=videos">Videos</a>
</td>
</tr>
</table> </td>
</tr>
</table> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><table class="two" width="95%" >
<tr>
<td colspan="2" class="title">Welcome...</td>
</tr>
<tr>
<td colspan="2" class="text">...to OneEightTwo.Net, formerly Blink182UK.
We were gone, but like all great websites [and bands] have decided to put
the past behind us and move forward, being even greater than we were before.
<br />
<br />
Here you can find all thinks Blink-182 related, catch up on the latest news,
download files or browse the
<a href="http://boards.oneeighttwo.net/" target="_blank">message boards</a>.
<br />
</td>
</tr>
<tr>
<td class="text" width="100px">
<img src="_images/firefox.gif" alt="firefox" /></td>
<td class="text">
<br />
OneEightTwo.Net is best viewed using <a href="http://getfirefox.com" target="_blank">Mozilla Firefox</a>.
<br />
<br />
Infact, the site currently looks pretty shite if you browse it using Micro$oft Internet Explore.
This will be fixed, at some point...
</td>
</tr>
</table>
<br/>
<br/>

<table class="two" width="95%" >
<tr>
<td class="title">Featured Artist</td>
</tr>
<tr>
<td class="text">Coming Soon...</td>
</tr>
</table> </td>
<td class="main" rowspan="4"><table class="two" width="95%" >
<tr>
<td class="title">Current News </td>
</tr>
<tr>
<td>

<?PHP
include("/home/mkoccom/public_html/oneeighttwo/news/show_news.php");
?>

</td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">


<table class="copyright" width="825px" >
<tr>
<td>
Copyright 2009 OneEightTwo.net. All Rights Reserved.
<a href="mailto:theteam@oneeighttwo.net?subject=Contact">Contact Us</a>.
</td>
<td class="right">
<a href="./news/" target="_blank">Post News</a> |
<a href="http://boards.oneeighttwo.net/adm/" target="_blank">Admin Control Panel</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>

Cary
02-15-2009, 03:35 AM
I'm not sure if this will fix the problem, but you should explicitly set some of the table attributes by adding this within your opening table tags:

border="0" cellpadding="0" cellspacing="0"

skot4th
02-15-2009, 04:01 AM
Just tried that. Althought it solved on of the issues with IE being that the header image had a thick black border. It didn't solve the problem of the Navigation bar height being too tall.

It also made some errors appear with Firefox and the borders around the header so I have removed the

border="0" cellpadding="0" cellspacing="0"

again

Corrosive
02-15-2009, 08:49 AM
Just tried that. Althought it solved on of the issues with IE being that the header image had a thick black border. It didn't solve the problem of the Navigation bar height being too tall.

It also made some errors appear with Firefox and the borders around the header so I have removed the

border="0" cellpadding="0" cellspacing="0"

again

You are using tables for design which are not ideal for getting sites to display correctly across browsers. Have you looked at CSS based designs at all? Also, are you sure you need to worry about IE5.5? Do you know that some of your viewers will have a browser as old (and sh*t) as this?

skot4th
02-15-2009, 02:35 PM
You are using tables for design which are not ideal for getting sites to display correctly across browsers. Have you looked at CSS based designs at all? Also, are you sure you need to worry about IE5.5? Do you know that some of your viewers will have a browser as old (and sh*t) as this?
I've updated my ie to IE8 and still have the same issue in IE 8 as I did in IE 7 and dreamweaver said it would be an issue with earlier IEs too.

Any suggestions on how I should lay out the design to stop the problem happening? Is there a CSS feature to place the content where I need it to be?

domedia
02-15-2009, 05:42 PM
Tested in IE7/Win, Looks good to me. No difference between IE and other browsers.

Corrosive
02-15-2009, 06:13 PM
Tested in IE7/Win, Looks good to me. No difference between IE and other browsers.

Yes, and me. Looks the same in IE7 and Chrome.

skot4th
02-15-2009, 06:36 PM
Cheers fellas. I sorted the CSS out using

border-collapse: separate;
border-spacing: 0;
*border-collapse: collapse; /* hack is needed for IE7 */

border-collapse: separate;
border-spacing: 5px;
*border-collapse: expression('separate', cellSpacing = '5px');As a quick fix I have increased the size of the background image from 40px to 60px so even though it doesn't display as I want it too in IE, it looks like it does as the image doesn't repeat.

Thanks for the help anyway 8-)

I'm a Dutch Mac
08-24-2009, 08:58 PM
What about the absence of the CSS2.1 'border-spacing' tag in the CSS Styles Window? Is that Mac specific or specific for all systems?

I'm a Dutch Mac
08-24-2009, 09:40 PM
What about the absence of the CSS2.1 'border-spacing' tag in the CSS Styles Window? Is that Mac specific or specific for all systems?

Sorry. The right phrase is: What about the absence of the CSS2.1 'border-spacing' td tag property in the CSS Styles Window? Is that Mac specific or specific for all systems?8-)

domedia
08-25-2009, 12:01 AM
border-spacing has no support in IE, any version.

SaSync
08-31-2009, 07:16 PM
When editing with firefox, any codes get riped off... only html codes stay ok. Javascript, php includes... and more get... vanished.

IF NOW, you edit your website with internet explorer everything runs as normal.

Why this is happening??
Has anyone notice this??