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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Florida, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table and i-frame have many gaps in Firefox and Opera

    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


    Firefox


    Opera


    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.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    this is what you need, try this:

    Code:
    * {
    padding:0px;
    margin:0px;
    its not the same as using body! Hope it works

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Florida, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    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>

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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!!

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Florida, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.
    Code:
    <!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!


  •  

    Posting Permissions

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