logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-15-2009, 02:18 AM   #1
skot4th
 
Join Date: Feb 2009
Posts: 5
Exclamation Website displaying differently in Firefox / IE

Morning,

After a bit of help if anyone can.

I've just finished designing my site [http://oneeighttwo.net/] 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

Code:
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

Code:
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;
}
Code:
<!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>

Last edited by skot4th; 02-15-2009 at 02:37 AM..
skot4th is offline   Reply With Quote
Old 02-15-2009, 02:35 AM   #2
Cary
Cary's Avatar
 
Join Date: Apr 2007
Location: San Diego, CA
Posts: 723
Default

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"
Cary is offline   Reply With Quote
Old 02-15-2009, 03:01 AM   #3
skot4th
 
Join Date: Feb 2009
Posts: 5
Default

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
skot4th is offline   Reply With Quote
Old 02-15-2009, 07:49 AM   #4
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,105
Default

Quote:
Originally Posted by skot4th View Post
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?
Corrosive is offline   Reply With Quote
Old 02-15-2009, 01:35 PM   #5
skot4th
 
Join Date: Feb 2009
Posts: 5
Default

Quote:
Originally Posted by Corrosive View Post
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?
skot4th is offline   Reply With Quote
Old 02-15-2009, 04:42 PM   #6
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,710
Default

Tested in IE7/Win, Looks good to me. No difference between IE and other browsers.
domedia is offline   Reply With Quote
Old 02-15-2009, 05:13 PM   #7
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,105
Default

Quote:
Originally Posted by domedia View Post
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.
Corrosive is offline   Reply With Quote
Old 02-15-2009, 05:36 PM   #8
skot4th
 
Join Date: Feb 2009
Posts: 5
Default

Cheers fellas. I sorted the CSS out using

Code:
border-collapse: separate;
border-spacing: 0;
*border-collapse: collapse; /* hack is needed for IE7 */
Code:
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
skot4th is offline   Reply With Quote
Old 08-24-2009, 07:58 PM   #9
I'm a Dutch Mac
I'm a Dutch Mac's Avatar
 
Join Date: Aug 2009
Location: Brabant - The Netherlands - south
Posts: 2
Default

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 is offline   Reply With Quote
Old 08-24-2009, 08:40 PM   #10
I'm a Dutch Mac
I'm a Dutch Mac's Avatar
 
Join Date: Aug 2009
Location: Brabant - The Netherlands - south
Posts: 2
Default

Quote:
Originally Posted by I'm a Dutch Mac View Post
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?
I'm a Dutch Mac is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:36 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com