HTML - Rendering Tables Correctly In Firefox

Hello,

I am building a website for a client :

http://timhawarah.com/testing.php

In Firefox (my favorite browser) there is about a 15 px space in the rooftop of the house which is wrong.

In IE the website looks like it should.

What can I do to correct this problem.

Any help would be most appreciated!

Thanks,
TaylorJumbo

MY CSS looks like this:


Quote:
body {


background-color: #202020;

font-family: Arial, Verdana, sans-serif;
font-size:12px;
color:#202020;
text-align: left;


}

#topnavigation li
{
display: inline;
list-style-type: none;
padding-right: 13px;

}


#top2 li
{
display: inline;
list-style-type: none;
padding-right: 13px;

}


a:link, a:visited {
text-decoration:none;
font-weight: none;
font-family: Arial, Verdana;
padding: 0px;
marging: 0px;
font-size: 10px;
background-color: transparent;
color: #202020;
border-bottom: 1px dashed #3e9446;


}

a:hover {
text-decoration:none;
font-weight: none;
font-family: Arial, Verdana;
padding: 0px;
marging: 0px;
font-size: 10px;
background-color: transparent;
color: #fff;
border-bottom: 1px dashed #3e9446;


}


a.imagelink:link, a.imagelink:visited, a.imagelink:active {
text-decoration:none;
font-weight: bold;
font-size: 12px;
background-color: none;
color: #202020;
border: 0px;


}

a.imagelink:hover {
text-decoration:none;
background-color: none;
color: #fff;
border: 0px;;

}

#outercase {
width: 790px;
background-color: #fff;
margin: 0px auto;
padding: 0px;
border: 0px;
text-align: left;


}

#top1 {
width: 790px;
height: 57px;
margin: 0px;
padding: 0px;
text-align: left;
background-color: #fff;
background: url("/images/wip1.jpg") no-repeat;
border: 0px;


}


#top2 {
width: 790px;
height: 122px;
margin: 0px;
padding: 0px;
text-align: right;
background-color: #fff;
background: url("/images/wip2.jpg") no-repeat;
border: 0px;


}




#topnavigation {
width: 780px;
margin: 0px;
padding-right: 10px;
padding-top: 5px;
text-align: right;
background-color: #fff;
border: 0px;


}



#middle {
width: 750px;
height: 300px;
margin: 0px;
padding: 20px;
text-align: left;
background-color: #fff;
border: 0px;


}

#banners {
width: 770px;
margin: 0px;
padding: 10px;
text-align: left;
background-color: #fff;
border: 0px;


}

#bottom {
width: 780px;
height: 10px;
font-size: 9px;
margin: 0px;
padding: 5px;
text-align: left;
background-color: #3e9446;
border: 0px;


}
and my xhtml looks like this

Quote:
<?include("header.php");?>

<div id="outercase">

<div id="topnavigation">

<?include("navitop.php");?>

</div>


<div id="top1">

</div><div id="top2">

<?include("teasertop.php");?>

</div>

<div id="middle">

</div>

<div id="banners">

<?include("banners.php");?>

</div>

<div id="bottom">

<?include("footer.php");?>

Hi All,

I am brand new to the forums. If you go to my site: www.wachusettchess.org using IE it will look fine. If you view the site using either Firefox or Safari, it's a mess with lots of overlapping text and boxes. Can anyone help me determine what the Firefox/Safari problem is? Thanks in advance.

Dave Couture

Here is the code:
EDIT:

I missed part of the code:

<id class = "vision">
CLEAN is founded </class>on the belief that education is the essential foundation for global climate change solutions. CLEAN is a program designed to supplement existing elementary (1st-8th grade) science education. First, children learn the fundamental scientific background they need in order to understand global climate change. Second, CLEAN provides them with the tools and support they need to take positive action. Particular emphasis is placed on climate change as a concern that is not only individual and local, but equally collective and global. This emphasis is supported through the development of communication and collaboration between classrooms locally and internationally. The problems presented by global climate change can seem overwhelming, often leading to apathy and inaction. By combining practical information with a fun, engaging, play-based learning environment, CLEAN fosters a positive attitude that empowers children to take meaningful action.

and the "Vision" code in my css is very simple:

.vision {
font: bold 25px Tahoma, 'trebuchet MS', Sans-serif;
}


In firefox it renders like this:



while here it is in Explorer:


Why the difference and how do I fix it? I have read that Microsoft doesn't follow the "rules" established by the web boards about how code should be done. Is this the problem in this case? Thanks!

Hi all,

I've spent several hours building my site. Most of my time was spent setting up the custom menu using CSS. So I am very disappointed to see it not display correctly in Firefox. After doing some research, I realized that some of my HTML isn't validating correctly. But I cant figure out how to fix it. A lot of has to do with the SPAN codes. Any assistance would be much appreciated!

<body class="twoColElsLtHdr">

<div id="container">
<div id="header">
<table width="100%" border="0" cellpadding="10">
<span class="class4">
<tr>
<td class="header"><a href="http://www.davidzhangphotography.com">DAVID ZHANG</a> <span class="header2">PHOTOGRAPHY</span></td></tr></span>
</table>
</div>
<div id="sidebar1">
<TABLE cellSpacing=3 cellPadding=3 width="96%" border=0>
<TBODY>
<span class="class1">
<TR>
<TD class="menu"><A HREF="javascript:popUp('music.html')">MUSIC</A></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD class="menu"><A HREF="javascript:popUp('fashion_location.html')">FASHION 1</A></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD class="menu"><A HREF="javascript:popUp('fashion_studio.html')">FASHION 2</A></TD>
</TR>
<TR>
<TD class="menu">&nbsp;</TD>
</TR>
<TR>
<TD class="menu"><a href="personal.html">PERSONAL</a></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
</span> <span class="class2">
<TR>
<TD class="menu"><a href="about.html">ABOUT</a></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD class="menu"><a href="blog.html">BLOG</a></TD>
</TR>
</span>
</TABLE>
</div>

What are the common issues with websites not being properly displayed in Firefox? Reason is due to my website being displayed correctly in IE but when switching to Firefox the site suddenly breaks apart. Any ideas?

Hello all,

I am working on a site and having 2 problems.

1. How do you center a whole table? I try table align="center" but it centers all the elements

2. I try to do table width=80% and in IE it works but it doesnt work in firefox

Anyone have any ideas?

There's something wrong with the tables on the site I'm currently working on..
There's no errors of any kind, but they're acting kind of odd..

I tried to make the code as clean as possible, but since this is a dynamic page, that isn't always easy.

In Firefox i get a gap from time to time in the cell background of the page. But if i try to update it gets fixed.


In Opera it stays like this all the time


Here's a link to the page
http://svolvar-jff.net/new/index.php?side=aktiviteter&id=12

This page looks fine in IE but tables are too wide in Firefox.

Can anyone tell me what I need to change?
http://tinyurl.com/2crnbe

Thanks!

Hi

I need help in tables with 100%.

Actually i am keeping a table with 100% fihed width in a <td>, but when i am minimising the IE or Firefox browser the columns are reducing , how to solve the problem

I got a prob: the site i'm designing looks great in IE, but in Firefox, all the tables collapse and it looks crap.

i've taken care to sort the opacity of my transparent divs with the "-moz-opacity" tag, but is there a tag that does the same for tables?

check it out he
http://www.creativetruth.co.za/divercity/index.html

I hand coded my website myself, but whilst working perfectly in IE, there are some problems when viewing it using Firefox.

Specifically, the table rows have double-spacings (scroll down to the 'Education' section he www.lombrozo.co.uk/resume.html), and also table borders have a 3D look (a black border to emphasise the shadow), again, this shadow is not visible in IE...

Any ideas anyone? Any help would be most appreciated!

http://www.yandina.com/JIndex.htm

Open in Firefox, Chrome or Safari - - - that is what it is supposed to look like.

Open in IE and the last table get overlaid on top of the previous table.
What sort of things can cause that?

Additional (unrelated I think) problem, IE is not accessing cookies but others are fine.
What can cause that?

Hi

Normally, when you have more than one table in your code, the tables will be placed one under each other.

Example:
<table>
...
</table>
<table>
...
</table>

When you want the tables to be placed next to each other, you need to set the align attribute.

Example:
<table align="left">
...
</table>
<table align="left">
...
</table>

BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables".

Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag?

Thanks for your help
praiser

I have Googled for hours and still can't figure out what I have done wrong. In FF my site looks fine but in IE 7, the content gets shoved down below my sidebars.

http://www.pliggs.com

Anyone able to spot the issue?

Geoserv.