...

View Full Version : Table and i-frame have many gaps in Firefox and Opera



mailyn
01-17-2008, 08:54 PM
Hey all, found this forum trying to get some help. I'm using an i-frame inside a table and it displays just fine in IE but it doesn't quite work on Opera and Firefox.

This is IE
http://img112.imageshack.us/img112/8910/iete6.jpg

Firefox
http://img216.imageshack.us/img216/8756/operahm6.jpg

Opera
http://img406.imageshack.us/img406/942/firefoxqp4.jpg

This is my code. I'm not sure what I'm doing wrong. I thought all I had to do was use padding: 0; and it would close all gaps?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Yippee Kai Ay Mother****er: the John McClane Fanlisting</title>
<meta name="keywords" content="john mcclane, die hard, fanlisting, yippee kai ay">
<meta name="description" content="The TAFL approved fanlisting for the incredible character John McClane as portrayed by Bruce Willis in the Die Hard series.">

<style type="text/css">
body {
background: url(http://img258.imageshack.us/img258/6753/jmcbgsk0.jpg);
margin: 0;
padding: 0;
}

div {
position:absolute;
bottom: 0;
right: 0;
padding: 0;
border: 0;
margin: 0;
}

table {
border-collapse: collapse;
width: 1119px;
height: 610px;
}

td {
padding: 0;
margin: 0;
}
</style>
</head>
<body>

<div>
<table cellpadding="0">
<tr>
<td rowspan="3">
<img src="http://img178.imageshack.us/img178/8761/jmcbanner01ip2.jpg" width="391" height="610" alt="">
</td>
<td>
<img src="http://img245.imageshack.us/img245/4985/jmcbanner02ud0.jpg" width="293" height="316" alt="">
</td>
<td rowspan="3">
<img src="http://img141.imageshack.us/img141/763/jmcbanner03ut5.jpg" width="435" height="610" alt="">
</td>
</tr>
<tr>
<td>
<iframe src="http://fan.coloryoursoul.com/mcclane/mcmain.html" allowtransparency="true" name="main" frameborder="0" width="293" height="191"></iframe>
</td>
</tr>
<tr>
<td>
<img src="http://img297.imageshack.us/img297/8024/jmcbanner05kp0.jpg" width="293" height="103" alt="">
</td>
</tr>
</table>
</div>
</body>
</html>


This is the website in question: http://fan.coloryoursoul.com/mcclane/

Thanks for any help you can give me. :)

jcdevelopment
01-17-2008, 10:04 PM
this is what you need, try this:




* {
padding:0px;
margin:0px;



its not the same as using body! Hope it works

mailyn
01-18-2008, 12:49 AM
Many thanks for your input. I'm not sure I understand, should I use that instead of body? I tried just inserting it but it didn't do anything. Maybe I completely misunderstood, coding is not my forte. :confused:

Here is what I did with the code you gave me:


<style type="text/css">

* {padding:0px;
margin:0px;}

body { background: url(http://img258.imageshack.us/img258/6753/jmcbgsk0.jpg);
margin: 0;
padding: 0; }

div { position:absolute;
bottom: 0;
right: 0;
padding: 0;
border: 0;
margin: 0;}

table {border-collapse: collapse;
width: 1119px;
height: 610px; }

td { padding: 0;
margin: 0;}

</style>

_Aerospace_Eng_
01-18-2008, 01:15 AM
You really shouldn't be using tables. I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?". Here is one way to do. May not be the best way. I don't really like the iframe either. If I were you I would slice up your navigation. I've gone ahead and rewrote your code without using tables. It now should work in every browser. I've also put an image map on your navigation.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Yippee Kai Ay Mother****er: the John McClane Fanlisting</title>
<meta name="Keywords" content="john mcclane, die hard, fanlisting, yippee kai ay">
<meta name="Description" content="The TAFL approved fanlisting for the incredible character John McClane as portrayed by Bruce Willis in the Die Hard series.">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
background: url(http://img258.imageshack.us/img258/6753/jmcbgsk0.jpg);
}
#container {
width:1119px;
float:right;
position:relative;
}
#header img {
float:left;
}
img {
border:0;
}
#part1 {
width:391px;
height:610px;
float:left;
}
#part1 img {
display:block;
}
#part2 {
background:url(http://img245.imageshack.us/img245/4985/jmcbanner02ud0.jpg) no-repeat;
width:293px;
height:610px;
float:left;
}
#part3 {
background:url(http://img141.imageshack.us/img141/763/jmcbanner03ut5.jpg);
width:435px;
height:610px;
float:left;
}
#footer {
background:url(http://img297.imageshack.us/img297/8024/jmcbanner05kp0.jpg) no-repeat;
width:293px;
height:103px;
}
#content {
margin-top:316px;
height:191px;
overflow:hidden;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
</style>
</head>
<body>
<div id="container">
<div id="part1"><img src="http://img178.imageshack.us/img178/8761/jmcbanner01ip2.jpg" alt="" width="391" height="610" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="263,351,389,377" href="#" alt="">
<area shape="rect" coords="263,377,389,395" href="#" alt="">
<area shape="rect" coords="263,394,389,416" href="#" alt="">
<area shape="rect" coords="263,415,391,435" href="#" alt="">
<area shape="rect" coords="263,434,389,462" href="#" alt="">
</map>
</div>
<div id="part2">
<div id="content">
<iframe src="http://fan.coloryoursoul.com/mcclane/mcmain.html" allowtransparency="true" name="main" frameborder="0" width="293" height="191"></iframe>
</div>
<div id="footer"></div>
</div>
<div id="part3"></div>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>

jcdevelopment
01-18-2008, 01:25 AM
no, dont replace body, just add that at the top of your css like you did, than see if that works. Good luck and do try to avoid tables!!

mailyn
01-18-2008, 05:16 AM
You really shouldn't be using tables. I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?". Here is one way to do. May not be the best way. I don't really like the iframe either. If I were you I would slice up your navigation. I've gone ahead and rewrote your code without using tables. It now should work in every browser. I've also put an image map on your navigation.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Yippee Kai Ay Mother****er: the John McClane Fanlisting</title>
<meta name="Keywords" content="john mcclane, die hard, fanlisting, yippee kai ay">
<meta name="Description" content="The TAFL approved fanlisting for the incredible character John McClane as portrayed by Bruce Willis in the Die Hard series.">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
background: url(http://img258.imageshack.us/img258/6753/jmcbgsk0.jpg);
}
#container {
width:1119px;
float:right;
position:relative;
}
#header img {
float:left;
}
img {
border:0;
}
#part1 {
width:391px;
height:610px;
float:left;
}
#part1 img {
display:block;
}
#part2 {
background:url(http://img245.imageshack.us/img245/4985/jmcbanner02ud0.jpg) no-repeat;
width:293px;
height:610px;
float:left;
}
#part3 {
background:url(http://img141.imageshack.us/img141/763/jmcbanner03ut5.jpg);
width:435px;
height:610px;
float:left;
}
#footer {
background:url(http://img297.imageshack.us/img297/8024/jmcbanner05kp0.jpg) no-repeat;
width:293px;
height:103px;
}
#content {
margin-top:316px;
height:191px;
overflow:hidden;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
</style>
</head>
<body>
<div id="container">
<div id="part1"><img src="http://img178.imageshack.us/img178/8761/jmcbanner01ip2.jpg" alt="" width="391" height="610" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="263,351,389,377" href="#" alt="">
<area shape="rect" coords="263,377,389,395" href="#" alt="">
<area shape="rect" coords="263,394,389,416" href="#" alt="">
<area shape="rect" coords="263,415,391,435" href="#" alt="">
<area shape="rect" coords="263,434,389,462" href="#" alt="">
</map>
</div>
<div id="part2">
<div id="content">
<iframe src="http://fan.coloryoursoul.com/mcclane/mcmain.html" allowtransparency="true" name="main" frameborder="0" width="293" height="191"></iframe>
</div>
<div id="footer"></div>
</div>
<div id="part3"></div>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>



OMG thank you! You are a genius. Totally worked. Thanks! I credited you in my main page. :)

Thanks again!

And thanks to jcdevelopment for your help as well. :)

You guys rock!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum