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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div / iFrame Problem

    Hey guys justa quick question.

    Here im building a products page, got a little nav on th left sending pages to the iframe on the right however the iframe causes the bottom footer div to move away any advice?

    http://gpgrafix.x10.mx/products.html

    Code:
    <html>
    <head>
    <LINK href="style.css" title="compact" rel="stylesheet" type="text/css">
    <title>Gp Grafix - Graphic Design & Print Service - A huge range of products tailored to you</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body style="background: #212121 url(bg.jpg); background-repeat:no-repeat;
    background-position:top;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" 
     >
    <!-- Save for Web Slices (2ndslicetryDIVs.psd) -->
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    
    <!-- CONTAINER -->
    <!-- CONTAINER -->
    <!-- CONTAINER -->
    <!-- CONTAINER -->
    
    
    <div id="maindiv" class="maindiv" align="center" width="960" height="885" border="0" cellpadding="0" cellspacing="0">
    
    
    <!-- NAVIGAION -->
    <!-- NAVIGAION -->
    <!-- NAVIGAION -->
    <!-- NAVIGAION -->
    
    
    <div id="nav" align="center" width"960" height="41">
    
    <img src="images/indexdiv_01.png" width="20" height="41" alt=""><a href="index.html"><img src="images/indexdiv_02.png" width="105" height="41" alt=""></a><a href="aboutus.html"><img src="images/indexdiv_03.jpg" width="110" height="41" alt=""></a><a href="products.html"><img src="images/indexdiv_04.jpg" width="105" height="41" alt=""></a><a href="gallery.php"><img src="images/indexdiv_05.jpg" width="96" height="41" alt=""></a><a href="contactus.html"><img src="images/indexdiv_06.jpg" width="125" height="41" alt=""></a><img src="images/indexdiv_07.png" width="399" height="41" alt="">
    
    </div>
    <div id="spacer" align="center" width"960" height="11">
    <img src="images/indexdiv_08.jpg" width="960" height="11" alt="">
    </div>
    
    <!-- RIGHT CONTENT -->
    <!-- RIGHT CONTENT -->
    <!-- RIGHT CONTENT -->
    <!-- RIGHT CONTENT -->
    
    <div id="contentleft2" class="contentleft2" align="center" width"247" height="786">
    <!-- Start css3menu.com BODY section -->
    <link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style>
    <!-- Start css3menu.com BODY section -->
    <ul id="css3menu1" class="topmenu">
    	<li class="topfirst"><a href="#" style="width:169px;"><span>Badges</span></a>
    	<ul>
    		<li><a href="#"><span>Aluminium</span></a>
    		<ul>
    			<li><a href="#">Name Badges</a></li>
    			<li><a href="#">Brooch / Badge</a></li>
    
    		</ul></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:169px;"><span>Bookmarks</span></a>
    	<ul>
    		<li><a href="#">Aluminium</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:169px;"><span>Business Cards</span></a>
    
    	<ul>
    		<li><a href="#">Aluminium</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:169px;">Car License Plates</a></li>
    	<li class="topmenu"><a href="#" style="width:169px;">Car Window Hanging Signs</a></li>
    	<li class="topmenu"><a href="#" style="width:169px;"><span>Clocks</span></a>
    	<ul>
    
    		<li><a href="#">Desk Clocks</a></li>
    		<li><a href="#">Wall Clocks</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:169px;"><span>Coasters</span></a>
    	<ul>
    		<li><a href="#">Aluminium</a></li>
    	</ul></li>
    
    	<li class="topmenu"><a href="#" style="width:169px;"><span>Cufflinks</span></a>
    	<ul>
    		<li><a href="#">Silver / Aluminium</a></li>
    		<li><a href="#">Box</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:169px;">Door Plaques</a></li>
    	<li class="topmenu"><a href="#" style="width:169px;">Fridge Magnets</a></li>
    
    	<li class="topmenu"><a href="#" style="width:169px;"><span>Keyrings</span></a>
    	<ul>
    		<li><a href="#">Aluminium</a></li>
    	</ul></li>
    	<li class="topmenu"><a href="#" style="width:169px;">ID / Pet Tag</a></li>
    	<li class="toplast"><a href="#" style="width:169px;"><span>Tie Accessories</span></a>
    	<ul>
    
    		<li><a href="#"><span>Slide</span></a>
    		<ul>
    			<li><a href="#">Silver / Aluminium</a></li>
    			<li><a href="#">Gold / Aluminium</a></li>
    		</ul></li>
    		<li><a href="#"><span>Pin</span></a>
    		<ul>
    
    			<li><a href="#">Silver / Aluminium</a></li>
    		</ul></li>
    		<li><a href="#"><span>Brooch</span></a>
    		<ul>
    			<li><a href="#">Silver / Aluminium</a></li>
    		</ul></li>
    	</ul></li>
    
    </ul>
    </div>
    
    
    <!-- LEFT CONTENT -->
    <!-- LEFT CONTENT -->
    <!-- LEFT CONTENT -->
    <!-- LEFT CONTENT -->
    
    
    <div id="contentright2" class="contentright2" width"713" height="786">
    
    			<img src="images/indexdiv_09.jpg" style="float:right;" width="24" height="786" alt=""><img src="images/mainheadcontact.jpg" align="center" width="689"  alt=""><br/>
    <!-- start slipsum code -->
    <iframe src="productiframe.html" height="600" width="660" frameborder="0" overflow="hidden" scrolling="no">You need an iframes capable browser to view this content.</iframe>
    </div>
    
    
    
    </div>
    
    
    <!-- FOOTER -->
    <!-- FOOTER -->
    <!-- FOOTER -->
    <!-- FOOTER -->
    
    
    <div id="footer" style="position:relative;" width"960" height="41">
    			<img src="images/indexdiv_14.png" width="960" height="46" alt=""><img src="images/spacer.gif" width="20" height="1" alt=""><img src="images/spacer.gif" width="4" height="1" alt=""><img src="images/spacer.gif" width="101" height="1" alt=""><img src="images/spacer.gif" width="110" height="1" alt=""><img src="images/spacer.gif" width="105" height="1" alt=""><img src="images/spacer.gif" width="96" height="1" alt=""><img src="images/spacer.gif" width="125" height="1" alt=""><img src="images/spacer.gif" width="152" height="1" alt=""><img src="images/spacer.gif" width="13" height="1" alt=""><img src="images/spacer.gif" width="219" height="1" alt=""><img src="images/spacer.gif" width="15" height="1" alt="">
    </div>
    </div>
    
    <!-- End Save for Web Slices -->
    </body>
    </html>
    Thanks,
    Ash

  • #2
    Regular Coder
    Join Date
    Oct 2002
    Posts
    147
    Thanks
    31
    Thanked 2 Times in 2 Posts
    Hi

    There is a good chance that the iframe has a default padding and or margin depending on the browser that its in. Try setting both to zero.

    Regards

    A

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Try this:

    Code:
    <div id="footer" style="position:relative; margin: 0 auto;" width"960" height="41">
    			<img src="images/indexdiv_14.png" width="960" height="46" alt=""><img src="images/spacer.gif" width="20" height="1" alt=""><img src="images/spacer.gif" width="4" height="1" alt=""><img src="images/spacer.gif" width="101" height="1" alt=""><img src="images/spacer.gif" width="110" height="1" alt=""><img src="images/spacer.gif" width="105" height="1" alt=""><img src="images/spacer.gif" width="96" height="1" alt=""><img src="images/spacer.gif" width="125" height="1" alt=""><img src="images/spacer.gif" width="152" height="1" alt=""><img src="images/spacer.gif" width="13" height="1" alt=""><img src="images/spacer.gif" width="219" height="1" alt=""><img src="images/spacer.gif" width="15" height="1" alt="">
    </div>

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I rebuilt the page from an existing page and it worked, i still for the life of me still cant understand why but thanks for the help regardless!


  •  

    Posting Permissions

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