PDA

View Full Version : Gaps in table when tested in firefox


boltneck
01-27-2009, 08:39 PM
Hi, my name is Ben and I was hoping someone could help me.

I am building a website, and I have used tables, it doesn't have to be a complicated a website and for what I want to do i have found tables to be a fast and effective method.

The problem is that the first table at the top of my site that holds the navigation, the bottom row which is split in to 5 columns double spaces in firefox and it looks terrible, starting part of the background image again.

The website is here (http://www.bpccomputers.co.uk/test2.html)

You will see that in IE it looks fine, however firefox different.

My apologies in advance if this has already been posted, but I have been to countless forums looking for the answer, and none of it making sense because each situation has been different somehow.,


Thank you,

Ben.

This is my code BTW

<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-attachment: fixed;
background-image: url();
background-repeat: no-repeat;
background-position: center center;
background-color: #598EB0;
}
body {
background-attachment: fixed;
background-color: #598EB0;
background-image: url();
background-repeat: no-repeat;
background-position: center center;
}
body,td,th {
font-family: Century Gothic;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
.style7 {font-size: 18px}
.style9 {color: #FFFFFF}
a:hover {
font-family: "Century Gothic";
font-size: 14px;
font-weight: bold;
color: #2C4176;
}
-->
</style>
</head>
<body>
<table width="800" border="0" align="center" background="../My Documents/B-PC Computers/New beta site/ICU-Computers-Nav-Bar.jpg">
<tr>
<td height="19" colspan="5"><span class="style7">ICU Computers</span></td>
</tr>
<tr>
<td height="106" colspan="5">&nbsp;</td>
</tr>
<tr>
<td width="97" height="21"> <div align="justify">
<p>&nbsp;</p>
</div></td>
<td width="175"><div align="left"><a href="http://www.bpccomputers.co.uk" class="style9">HOME</a></div></td>
<td width="176"><div align="left">SERVICES</div></td>
<td width="175"><div align="left">CONTACT</div></td>
<td width="175"><div align="left">INFORMATION</div></td>
</tr>
</table>
<table width="800" height="257" border="0" align="center" background="../My Documents/B-PC Computers/New beta site/BackGround.jpg">
<tr>
<td width="97" height="247"><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
<td width="694" valign="top"> <p align="justify"><br />BPC Computers is a small company based in Ilkeston, and we want to always provide the best quality computer maintenance service to home users that we can and try to supersede that of our competitors. With a range of services from <strong><a href="<A href="http://www.bpccomputers.co.uk/services.html">Hardware">http://www.bpccomputers.co.uk/services.html">Hardware &amp; Software Installation</a></strong><a href="http://www.bpccomputers.co.uk/services.html"> to <strong>Spyware/Malware/Adware &amp; Virus removal</strong></a>, we can identify a problem you have and offer a fast cost effective solution. <a href="<A href="http://www.bpccomputers.co.uk/contact.html"><strong>Contact</strong></a">http://www.bpccomputers.co.uk/contact.html"><strong>Contact</strong></a> us for details.</p>
<p align="justify">With our <a href="<A href="http://www.bpccomputers.co.uk/services.html#freecallout"><strong>Free">http://www.bpccomputers.co.uk/services.html#freecallout"><strong>Free Call Out</strong></a> service having your computer fixed has never been easier (free call out service is only within the Ilkeston area, see please <a href="<A href="http://www.bpccomputers.co.uk/services.html#freecallout"><strong>services</strong></a">http://www.bpccomputers.co.uk/services.html#freecallout"><strong>services</strong></a> for details of cost outside Ilkeston).</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table>
<table width="800" border="0" align="center" background="../My Documents/B-PC Computers/New beta site/BottomBar.jpg">
<tr>
<td width="97" height="18">&nbsp;</td>
<td height="18">&nbsp;</td>
</tr>
</table>
<br />
<br />
</body>
</html>

Corrosive
01-27-2009, 08:58 PM
for what I want to do i have found tables to be a fast and effective method.

...and now your site is broken...sorry, but even for a basic site you should use CSS and div tags to build it. Tables may seem like an easy option but they break so easily in different browsers as you have found out.

You'll have fun learning CSS and we can help you.

Welcome to DWC Ben

boltneck
01-27-2009, 09:20 PM
What do you mean broken?

Cary
01-28-2009, 03:08 AM
You will see that in IE it looks fine, however firefox different.

That is what is meant by it being broken.

My apologies in advance if this has already been posted, but I have been to countless forums looking for the answer, and none of it making sense because each situation has been different somehow.,

This will be different as well. There are different ways to make a page like this, and I'm not sure how you can fix your broken layout without using CSS, and if you are going to do that then you might as well do the whole page with CSS. The code below is one way to do it. There are plenty of resources on the web for learning CSS and figuring out how the code below does what it does. Have fun!

<!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" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #598EB0;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
font-size: 100%;
color: #FFFFFF;
font-weight: bold;
margin: 0;
padding: 0;
}
* html body { /* base font-size for IE 6 */
font-size:80%;
}
#wrapper {
margin:0 auto;
width:800px;
background: url(BackGround.jpg) repeat-y 0 0;
}
h1 {
font-size: 1.4em;
margin:0;
padding:5px 0 0 5px;
width:795px; /* 800px - 5px = 795px */
height:132px; /* 137px - 5px = 132px */
background: url(ICU-Computers-Nav-Bar.jpg) no-repeat 0 0;
}
#nav {
background: url(BottomBar.jpg) no-repeat 0 0;
float: left;
width: 703px; /* 800px - 97px = 703px */
list-style:none;
padding:0 0 0 97px;
margin:0;
}
#nav li {
float:left;
width:175px;
height: 27px; /* height of background image */
}
#nav li a {
display:block;
line-height: 27px;
padding: 0;
margin: 0;
color: #FFFFFF;
font-size: 0.9em;
}
#content {
clear: both;
padding-left: 97px;
}
#content p {
line-height: 1.5;
padding: 0;
margin: .2em 0;
}
#footer {
height: 27px;
background: url(BottomBar.jpg) no-repeat 0 0;
padding-left: 97px;
}
#footer p {
line-height: 27px;
padding: 0;
margin: 0;
font-size: .9em;
}
a:hover {
color: #2C4176;
}
</style>

</head>
<body>
<div id="wrapper">
<h1>ICU Computers</h1>
<ul id="nav">
<li><a href="http://www.bpccomputers.co.uk">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">INFORMATION</a></li>
</ul>
<div id="content">
<p>Some content here</p>
<br />
<br />
<br />
<br />
</div>
<div id="footer">
<p>The Footer</p>
</div>
</div>
</body>
</html>

urbanrays
01-28-2009, 09:28 AM
Just to add to the comments on being "broken" your site looks broken in chrome too.
Whenever you do any testing you should never just rely on what FF and IE look like, even if they are the most popular browsers, as you see below Chrome is starting to take a strong hold in the short period of time it has been released, you may say its only 3.6% but 3.6% of 54million people works out to be quite a few. And I believe this is still there BETA test version. That has been out since July'ish-August

ie7 26.1%
ie6 19.6%
Chrome 3.6%
Firefox 44.4%
Safari 2.7%
Opera 2.4%

So when you do any testing go to browsershots.org and be prepared to weep it is sometimes not a nice experience. (Especially when using tables)

Hope this helps.

Corrosive
01-28-2009, 02:32 PM
ie6 19.6%


These people should be put out of their (and my) misery.

boltneck
01-28-2009, 03:16 PM
OK then so CSS is the way to go, i best get started can anyone recommend some simple tutorials, step by step stuff that covers the sort of thing i need to build? I have a look at the ones on this site, an I have to be honest don't know what I'm doing. Once I get a could basis I can get going usually quite fast with a new script/language.

Corrosive
01-28-2009, 03:38 PM
OK then so CSS is the way to go, i best get started can anyone recommend some simple tutorials, step by step stuff that covers the sort of thing i need to build? I have a look at the ones on this site, an I have to be honest don't know what I'm doing. Once I get a could basis I can get going usually quite fast with a new script/language.

I think Cary might have given you a decent start already. Check his post. He's good like that. :wink:

boltneck
01-28-2009, 03:46 PM
Oh, yeah I'm very great full for that, but looking at it i only understand like 25% of it lol, and i have a personal thing when it comes to programing and scripting to understand what I am using. I don't like to copy, but what Cary has wrote me I will use to experiment with to learn. I've just started reading an introduction to CSS the concept behind it seems quite simple, sort of object orientated almost, I think I'm going to get on with this well. But any sites you guys personally you find/found to be a good help then please post a link.

Cary
01-28-2009, 10:23 PM
This forum's tutorial section has some CSS tutorials. Also, take a look at these:

Style Master css tutorial (http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html) (you don't need Style Master to follow it)
Some quick CSS tutorials (http://www.westciv.com/style_master/house/tutorials/quick/index.html) from the same site.
Dreamweaver Developer Center (http://www.adobe.com/devnet/dreamweaver/css.html)
http://www.w3schools.com/css/
Sitepoint's CSS Reference (http://reference.sitepoint.com/css)

domedia
01-28-2009, 10:50 PM
I have to say I'm happy when I see threads like these.. We're contributing to an important and just cause; making the web a better place one website at the time :)

Corrosive
01-29-2009, 07:49 AM
I have to say I'm happy when I see threads like these.. We're contributing to an important and just cause; making the web a better place one website at the time :)

Right on brother :)

boltneck
01-29-2009, 12:57 PM
Thanks a lot every one

boltneck
01-29-2009, 02:55 PM
Just like to thank you Cary, for those links, i have started a tutorial I'm working through quite well. Cheers, will post a link to my site when i get somewhere with it lol.