Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy Website works in FF but not in IE - any ideas?

    Hi

    Since this is my first post I will try not to sound like a n00b that doesn't know what he is on about.

    Ive have made my website www.steammaps.com/uni/index.html

    Now problem is that you members that open it with firefox probably won't see anything wrong.
    Open it in internet explorer and you will see the difference.

    I have checked my code with a html validator but I simply cannot get it to work or look the same. Here is my code:

    CSS
    Code:
    body {
    	background-color: #262626;
     	font-family: verdana, arial, sans-serif;
     	font-size: 14px;
     	margin: 0px;
     	padding: 0px;
    	tab
     }
     
     /*Fillers*/
     
    #topleftfiller {
     	background-image:url(img/project_03.gif);
    	margin: 0px;
     	padding: 0px;
    	}
    	
    	
    #bottomleftfiller {
     	background-image:url(img/project_14.gif);
    	margin: 0px;
     	padding: 0px;
    	}
     
     /*Main Content*/
     
     
     	/*Content Tables*/
     
     #maincontent {
     border-color:#1cac05;
     cellpadding:50px;
     width:300px;
     margin:70px;
     }
     
     #adverts{
      border-color:#1cac05;
     cellpadding:50px;
     width:200px;
     margin:70px;
     }
     
     /*main*/
     
    #mainTable {
    	width:auto;
    	margin: 0 auto;
    	/*/*/line-height: 1.5em; /* */
    }
    	
    #logo {
    	background-image:url(img/project_04.gif);
    	margin:0px;
    	padding: 0px;
    	height: 108px;
    	width:783px;
    	background-repeat:no-repeat;
    	}
    
    #maincontent {
    	background-image:url(img/project_06.gif);
    	margin:0px;
    	padding: 0px;
    	height: 567px;
    	width:783px;
    }
    
    #rightside {
    	background-image:url(img/project_07.gif);
    	margin:0px;
    	padding: 0px;
    	height: 567px;
    	width:243px;
    }
    
    /*Buttons*/
    
    #homebutton
     {
    	background-image:url(img/project_08.gif);
    	background-repeat:no-repeat;
    	margin:0px;
    	padding: 0px;
    	height: 77px;
    	width:126px;
    	}
    
    
    	
    #ssbutton {
    	background-image:url(img/project_09.gif);
    	background-repeat:no-repeat;
    	margin:0px;
    	padding: 0px;
    	height: 79px;
    	width:126px;
    	}
    	
    #calcbutton {
    	background-image:url(img/project_10.gif);
    	background-repeat:no-repeat;
    	margin:0px;
    	padding: 0px;
    	height: 79px;
    	width:126px;
    	}
    
    #xmlbutton {
    	background-image:url(img/project_11.gif);
    	background-repeat:no-repeat;
    	margin:0px;
    	padding: 0px;
    	height: 79px;
    	width:126px;
    	}
    
    #contactbutton {
    	background-image:url(img/project_12.gif);
    	background-repeat:no-repeat;
    	margin:0px;
    	padding: 0px;
    	height: 79px;
    	width:126px;
    	}
    #reportbutton {
    	background-image:url(img/project_13.gif);
    	background-repeat:no-repeat;
    	margin:0px;
    	padding: 0px;
    	height: 87px;
    	width:126px;
    	}
    	
    /*Footer*/
    
    #footer {
    	background-image:url(img/project_15.gif);
    	margin:0px;
    	padding: 0px;
    	height: 64px;
    	width:783px;
    	}
    	
    /*Divs*/
    
    #apDiv1 {
    	position:static;
    	left:276px;
    	top:127px;
    	width:447px;
    	height:424px;
    	z-index:1;
    }.bodytext {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	width: 250px;
    }
    
    .c1 {overflow:auto; width:100%; height:500px}
    
    
    /*Font*/
    
    .H1 {

    HTML
    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=utf-8" />
    <meta name="Content-Script-Type" content="text/javascript" />
    <title>Project 1 :: Home</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="favicon.ico" rel="SHORTCUT ICON" />
    
    </head>
    <body>
    <table border="0" align="center" cellpadding="20" cellspacing="0">
    <tr>
    <td id="topleftfiller"> </td>
    <td id="logo"> </td>
    </tr>
    <tr>
    <td id="homebutton" onclick="window.location='index.html'"> </td>
    <td rowspan="7" valign="top" id="maincontent">
    <table width="63%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td height="14"><img src="img/spacer.gif" width="396" height="1" alt="Spacer Image" /></td>
    <td><img src="img/spacer.gif" width="50" height="4" alt="Spacer Image" /></td>
    <td><img src="img/spacer.gif" width="250" height="4" alt="Spacer Image" /></td>
    </tr>
    <tr>
    <td height="499" valign="top" class="bodytext">
    <div class="c1">
    <p>Lorem ipsum dolor sit amet,<br />
    consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.<br />
    Sed et lectus in massa imperdiet tincidunt.<br />
    <br />
    Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.<br />
    <br />
    Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.<br />
    <br />
    Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo.ed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo.luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo.ed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo.luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo.ed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo.luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo.ed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo.</p>
    </div>
    <p> </p>
    </td>
    <td width="7%"> </td>
    <td width="37%" valign="top" class="bodytext">Lorem ipsum dolor sit amet,<br />
    consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.<br />
    <br />
    Sed et lectus in massa imperdiet tincidunt.<br />
    Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.<br />
    Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla.</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td id="ssbutton" onclick="window.location='slideshow.html'"> </td>
    </tr>
    <tr>
    <td id="calcbutton" onclick="window.location='calc.html'"> </td>
    </tr>
    <tr>
    <td id="xmlbutton" onclick="window.location='xml.html'"> </td>
    </tr>
    <tr>
    <td id="contactbutton" onclick="window.location='contact.html'"> </td>
    </tr>
    <tr>
    <td id="reportbutton" onclick="window.location='report.html'"> </td>
    </tr>
    <tr>
    <td rowspan="2" id="bottomleftfiller"></td>
    </tr>
    <tr>
    <td id="footer"></td>
    </tr>
    </table>
    </body>
    </html>

    If anyone could help me, I would greatly appreciate it. Thanks

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,468
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    You've got a classic situation here where you should not be using tables.
    If you used <div> instead of <table> and properly sized them, it would make
    the layouts work better. Using <div> would also allow better controlling of
    padding on the left and right of the content.

    In a case where you have browser differences that cannot be avoided,
    I like to direct people to this site:
    http://www.positioniseverything.net/explorer.html

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This is one simple thing that confuses me. What is the difference between a div and a table?

  • #4
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,468
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    Tables are for displaying tabular data, like a calendar, or data taken out
    of a database (grids, charts, etc.)

    <div> define "divisions" on a page where you can assign properties to each division.
    They can be placed anywhere, floated, padded, etc. and may or may not be
    dependent on each other, like tables, where all cells are related.

    Nested tables become a real issue because each cell affects the adjacent cells.
    Things can become not only a mess, but difficult to troubleshoot.

    Divs solve that problem by having the ability to define size and position on your page.
    They can even be overlapped if you wish.

    Some "old table users" sometimes get frustrated when learning CSS and using Divs,
    but with time, it becomes automatic.

    There is still a place for tables in the design world. Working with databases and
    displaying information often uses tables (for tabular data). They work very nice for
    their intended purpose.

    A search on Google would probably yield a better explanation than I can muster.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •