Forum Moderators: not2easy
Im quite new to CSS.
Im trying to layout a site:
1. The top part of the page is divided into two columns with DIV tags, they contain nested DIV tags which make up some content boxes. This works fine.
2. Below that i have one main DIV tag that spans width of the columns above. Inside that i have a TABLE laid out to hold some images. this is the problem DIV.
2. Below that again i have exactly the same DIV tag again holding another TABLE the same as above with some different images. This works fine.
The problem is that the first DIV that spans the the width of the first 2 colums, in Point "2.", the table inside it jumps out side the DIV tag and appears to the right most side of the screen as if it is not contained in any DIV tags.
The strange thing is the DIV in point "3." above, that lies below it, which is pretty much exactly the same code works fine, the table is contained within the DIV tags.
The page looks fine in IE6, but in Firefox the table in the DIV just jumps out to the right of everything.
Here is some sample code from the HTML:
(This is the DIV that holds th table, the same code is used again below it and the table stays with in the DIV)
------------------------------------------------
<div id="mobilspill">
<div id="spillheader">
<img src="images/mobilspill.jpg" alt="" height="20"width="500" />
</div>
<div id="spillbox" align="center">
<table width="450" border="0" cellpadding="10" cellspacing="1" bgcolor="#CCCCCC" class="spilltable">
<tr>
<td height="120" bgcolor="#FFFFFF"><img src="gameimages/golf.gif" width="113" height="91" /></td>
<td height="120" bgcolor="#FFFFFF"><img src="gameimages/riddick.gif" width="113" height="91" /></td>
<td height="120" bgcolor="#FFFFFF"><img src="gameimages/sudoku.gif" width="113" height="91" /></td>
</tr>
<tr>
<td height="20" bgcolor="#FFFFFF">SPILL - KOMMER SNART </td>
<td height="20" bgcolor="#FFFFFF">SPILL - KOMMER SNART </td>
<td height="20" bgcolor="#FFFFFF">SPILL - KOMMER SNART </td>
</tr>
<tr>
<td height="120" bgcolor="#FFFFFF"><img src="gameimages/icons_l_dredd.jpg" width="113" height="91" /></td>
<td height="120" bgcolor="#FFFFFF"><img src="gameimages/icons_l_athlete.jpg" width="113" height="91" /></td>
<td height="120" bgcolor="#FFFFFF"><img src="gameimages/icons_l_lotus.jpg" width="113" height="91" /></td>
</tr>
<tr>
<td height="20" bgcolor="#FFFFFF">SPILL - KOMMER SNART </td>
<td height="20" bgcolor="#FFFFFF">SPILL - KOMMER SNART </td>
<td height="20" bgcolor="#FFFFFF">SPILL - KOMMER SNART </td>
</tr>
<tr>
<td height="120" bgcolor="#FFFFFF"><img src="gameimages/icons_l_head.jpg" width="113" height="91" /></td>
<td height="120" bgcolor="#FFFFFF"><img src="gameimages/icons_l_sas.jpg" width="113" height="91" /></td>
<td height="120" bgcolor="#FFFFFF"><img src="gameimages/icons_l_xbike.jpg" width="113" height="91" /></td>
</tr>
<tr>
<td height="20" bgcolor="#FFFFFF">SPILL - KOMMER SNART </td>
<td height="20" bgcolor="#FFFFFF">SPILL - KOMMER SNART </td>
<td height="20" bgcolor="#FFFFFF">SPILL - KOMMER SNART </td>
</tr>
</table>
</div>
<div id="spillfooter">
<img src="images/longfooter.jpg" alt="" height="10" width="500" />
</div>
</div>
------------------------------------------------
Here is the Style sheet code that defines it:
------------------------------------------------
#mobilspill {
width:500px;
padding:0px;
background:#fff;
}
------------------------------------------------
I just cant figure it out. I would really appreciate some help.
Thanks
JC
[edited by: cumminsj at 10:12 am (utc) on Sep. 14, 2006]
Welcome to Webmasterworld.com
Note that specific are not allowed in this forum. Please read term of services (TOS) and don't be surprised if your URL are removed by mod.
Nonetheless, you can trim your HTML and CSS and post it again so that we can fix it for you.
Note taht when making your website, you should work with Firefox or Opera (because they are CSS-compliant) and then check with IE6 to correct some well-know hated bugs...
Another important issue when using CSS is the doctype of HTML document, make sure you are not in Quirk mode (Open firefox, see render mode in Page properties)
Tomda
