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 13 of 13
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,088
    Thanks
    296
    Thanked 12 Times in 12 Posts

    firefox not displaying properly (page validates)

    Hi all,

    im having a small problem with my current page here

    in IE7 it displays fine but in firefox i get a white gap underneeth the title image.

    here is my code:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Untitled Document</title>
    <
    style type="text/css">
    <!--
    #header {
        
    margin0 auto;
        
    width:980px;
        
    height:125px;
        
    padding-top:5px;
        
    padding-bottom:5px;
        
    z-index:1;
        
    background-color:#A66300;
        
    left164px;
    }
    #logo{
        
    width:340px;
        
    height:125px;
        
    float:left;
        
    margin-left:3px;
        }
    #toplinks{
        
    width:355px;
        
    height:55px;
        
    float:right;
        
    background:#BF8630;
        
    margin-right:5px;
        
    margin-top:1px;
        }
    #wrapper{
        
    margin0 auto;
        
    width:980px;
        
    background-color:#FFC773;
        
    }
    #indextext{
        
    font-family:ArialHelveticasans-serif;
        
    font-size:14px;
        
    margin0 auto;
        
    width:940px;
        }
    #navlinkcont{
        
    width:950px;
        
    height:34px;
        
    font-family:Georgia"Times New Roman"Timesserif;
        
    font-size:16px;
        
    float:left;
        
    margin-left:14px;
        }
    #entlink{
        
    height:34px;
        
    float:left;
        }
    #complink{
        
    height:34px;
        
    float:left;
        }
    #tvllink{
        
    height:34px;
        
    float:left;
        }
    #clolink{
        
    height:34px;
        
    float:left;
        }
    #misclink{
        
    height:34px;
        
    float:left;
        }
    #speciallink{
        
    height:34px;
        
    float:right;
        }
    .
    top5picks{
        
    float:left;
        
    width:175px;
        
    height:175px;
        
    margin-right:11px;
        
    border:1px solid #A66300;
        
        
    }
    .
    top5headers{
        
    width:175px;
        
    height:20px;    
        
    background-color:#A66300;
        
    color:#FFFFFF;
        
    font-weight:bold;
        
    text-align:center;
        }
        
    -->
    </
    style>

    </
    head>

    <
    body>
    <
    div id="header">
    <
    div id="logo"><img src="../../../Users/karate_kid007/Pictures/thelogo.png" width="340" height="125" alt="Kernow Connect" /></div>
    <
    div id="toplinks"><img src="../../../Users/karate_kid007/Pictures/home2.png" alt="Home" width="114" height="57" /><img src="../../../Users/karate_kid007/Pictures/about.png" alt="About Us" width="114" height="57" /><img src="../../../Users/karate_kid007/Pictures/contact2.png" alt="Contact Us" width="114" height="57" /></div>
    </
    div>
    <
    div id="wrapper">
    <
    div id="navlinkcont">
    <
    div id="entlink"><a href="http://www.kernow-connect.com/entertainment.php"><img src="../../../Users/karate_kid007/Pictures/entertainmentlink.png" alt="Entertainment" width="122" height="34" border="0" /></a></div>
    <
    div id="complink"><a href="connect.com/computing.php"><img src="../../../Users/karate_kid007/Pictures/computinglink.png" alt="Computing" width="96" height="34" border="0" /></a></div>
    <
    div id="tvllink"><a href="connect.com/travel.php"><img src="../../../Users/karate_kid007/Pictures/travellink.png" alt="Travel and Insurance" width="170" height="34" border="0" /></a></div>
    <
    div id="clolink"><a href="connect.com/clothing.php"><img src="../../../Users/karate_kid007/Pictures/clothinglink.png" alt="Clothing" width="79" height="34" border="0" /></a></div>
    <
    div id="misclink"><a href="connect.com/misc.php"><img src="../../../Users/karate_kid007/Pictures/misclink.png" alt="Misc" width="54" height="34" border="0" /></a></div>
    <
    div id="speciallink"><img src="../../../Users/karate_kid007/Pictures/speciallink.png" alt="Special Occasions" width="148" height="34" /></div>
    </
    div>
    <
    p>&nbsp;</p>
    <
    div id="indextext">
    <
    p>&nbsp;</p>
    <
    p>Welcome to Kernow Connecta website dedicated to helping you find the best deals on the webWe have the top ten offers from over 50 of the biggest online stores so you are sure to find the cheapest items aroundBut thats not itwe also list the top 10 selling itemsthe top 10 newest releases, and any discount codes that the stores may currently be offering helping you save moneyWait theres even more, do you want to find that special gift for a special occasionWell check out our special occasion page where you can find the best items for every kind of ocassioncheck it out!</p>
    <
    p>You also have the ability to rate each of the 50stores depending on how well your transaction was handledthere are  four areas which you can rate the store and it is then given an overall rating,  the top three rated stores in each category will get greater exposure than the otherstherefor you can rest asure that the store you are shopping at is reliable and highly rated by your fellow users.</p>
    <
    p>&nbsp;</p>
    <
    p>This Weeks Top 5 Picks</p>
    <
    div class="top5picks"><div class="top5headers">header 1</div>1</div>
    <
    div class="top5picks"><div class="top5headers">header 2</div>2</div>
    <
    div class="top5picks"><div class="top5headers">header 3</div>3</div>
    <
    div class="top5picks"><div class="top5headers">header 4</div>4</div>
    <
    div class="top5picks"><div class="top5headers">header 5</div>5</div>
    <
    p>&nbsp;</p>
    <
    p>You
    </p>
    </
    div></div>
    </
    body>
    </
    html
    i know there is no php code in it yet but as its a php page i thought i'd better post it here.

    any ideas?

    p.s the images havent been uploaed yet so wont show

    many thanks
    Luke

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    It is an HTML / CSS problem. Gaps are often caused by the improper usage of the box object model, but I thought IE7 had fixed this problem? Anyway, if they didn't it would belong in the padding + height of a given element, IE considers the total height to include this value.
    Client side guys can definitely point this out. Moving to HTML / CSS forums.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,088
    Thanks
    296
    Thanked 12 Times in 12 Posts
    thanks for moving it to the correct place fou-lu

    p.s its firefox thats causing the problem not IE

  • #4
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    Quote Originally Posted by LJackson View Post
    thanks for moving it to the correct place fou-lu

    p.s its firefox thats causing the problem not IE
    Yeah, I'm the wrong person to ask for this. I'd figure it out eventually if I were to do it up, but its much much faster to ask someone who knows CSS really well.
    This is why I hate doing design work, what a pain >.<. Designers have a lot more patience than I do
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,088
    Thanks
    296
    Thanked 12 Times in 12 Posts
    lol and me

  • #6
    New Coder
    Join Date
    Jan 2009
    Location
    Cornwall - UK
    Posts
    47
    Thanks
    0
    Thanked 9 Times in 9 Posts
    hi LJackson,

    Add this

    Code:
    clear:both;
    to this

    Code:
    #indextext{
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        margin: 0 auto;
        width:940px;
        }
    All the best - redspyder

  • #7
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,088
    Thanks
    296
    Thanked 12 Times in 12 Posts
    hi mate unfortunatly this didnt solve it.

    thanks
    Luke

    p.s i see your also from cornwall

  • #8
    New Coder
    Join Date
    Jan 2009
    Location
    Cornwall - UK
    Posts
    47
    Thanks
    0
    Thanked 9 Times in 9 Posts
    That's odd, it did the job on my computer, I'll have another look.

    I'm about 5 miles from Truro.

    All the best - redspyder

  • #9
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,088
    Thanks
    296
    Thanked 12 Times in 12 Posts
    hmmm thats odd.

    im live near lands end

  • #10
    New Coder
    Join Date
    Jan 2009
    Location
    Cornwall - UK
    Posts
    47
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Also remove
    Code:
    <p>&nbsp;</p>
    from between the navlinkcont and indextext divs.

    Here's your code with that line removed. You need to do both things, add previous code to css as well as removing this tag.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #header {
        margin: 0 auto;
        width:980px;
        height:125px;
        padding-top:5px;
        padding-bottom:5px;
        z-index:1;
        background-color:#A66300;
        left: 164px;
    }
    
    #logo{
        width:340px;
        height:125px;
        float:left;
        margin-left:3px;
        }
    #toplinks{
        width:355px;
        height:55px;
        float:right;
        background:#BF8630;
        margin-right:5px;
        margin-top:1px;
        }
    #wrapper{
        margin:0 auto;
        width:980px;
        background-color:#FFC773;
        }
    #indextext{
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        margin: 0 auto;
        width:940px;
    		clear:both;
        }
    #navlinkcont{
        width:950px;
        height:34px;
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:16px;
        float:left;
        margin-left:14px;
        }
    #entlink{
        height:34px;
        float:left;
        }
    #complink{
        height:34px;
        float:left;
        }
    #tvllink{
        height:34px;
        float:left;
        }
    #clolink{
        height:34px;
        float:left;
        }
    #misclink{
        height:34px;
        float:left;
        }
    #speciallink{
        height:34px;
        float:right;
        }
    .top5picks{
        float:left;
        width:175px;
        height:175px;
        margin-right:11px;
        border:1px solid #A66300;
        }
    .top5headers{
        width:175px;
        height:20px;    
        background-color:#A66300;
        color:#FFFFFF;
        font-weight:bold;
        text-align:center;
        }
        
    -->
    </style>
    
    </head>
    
    <body>
      <div id="header">
        <div id="logo"><img src="../../../Users/karate_kid007/Pictures/thelogo.png" width="340" height="125" alt="Kernow Connect" /></div>
        <div id="toplinks"><img src="../../../Users/karate_kid007/Pictures/home2.png" alt="Home" width="114" height="57" /><img src="../../../Users/karate_kid007/Pictures/about.png" alt="About Us" width="114" height="57" /><img src="../../../Users/karate_kid007/Pictures/contact2.png" alt="Contact Us" width="114" height="57" /></div>
      </div>
      <div id="wrapper">
        <div id="navlinkcont">
          <div id="entlink"><a href="http://www.kernow-connect.com/entertainment.php"><img src="../../../Users/karate_kid007/Pictures/entertainmentlink.png" alt="Entertainment" width="122" height="34" border="0" /></a></div>
          <div id="complink"><a href="connect.com/computing.php"><img src="../../../Users/karate_kid007/Pictures/computinglink.png" alt="Computing" width="96" height="34" border="0" /></a></div>
          <div id="tvllink"><a href="connect.com/travel.php"><img src="../../../Users/karate_kid007/Pictures/travellink.png" alt="Travel and Insurance" width="170" height="34" border="0" /></a></div>
          <div id="clolink"><a href="connect.com/clothing.php"><img src="../../../Users/karate_kid007/Pictures/clothinglink.png" alt="Clothing" width="79" height="34" border="0" /></a></div>
          <div id="misclink"><a href="connect.com/misc.php"><img src="../../../Users/karate_kid007/Pictures/misclink.png" alt="Misc" width="54" height="34" border="0" /></a></div>
          <div id="speciallink"><img src="../../../Users/karate_kid007/Pictures/speciallink.png" alt="Special Occasions" width="148" height="34" /></div>
        </div>
        <div id="indextext">
          <p>&nbsp;</p>
          <p>Welcome to Kernow Connect, a website dedicated to helping you find the best deals on the web. We have the top ten offers from over 50 of the biggest online stores so you are sure to find the cheapest items around. But thats not it, we also list the top 10 selling items, the top 10 newest releases, and any discount codes that the stores may currently be offering helping you save money. Wait theres even more, do you want to find that special gift for a special occasion? Well check out our special occasion page where you can find the best items for every kind of ocassion, check it out!</p>
          <p>You also have the ability to rate each of the 50+ stores depending on how well your transaction was handled, there are  four areas which you can rate the store and it is then given an overall rating,  the top three rated stores in each category will get greater exposure than the others, therefor you can rest asure that the store you are shopping at is reliable and highly rated by your fellow users.</p>
          <p>&nbsp;</p>
          <p>This Weeks Top 5 Picks</p>
          <div class="top5picks"><div class="top5headers">header 1</div>1</div>
          <div class="top5picks"><div class="top5headers">header 2</div>2</div>
          <div class="top5picks"><div class="top5headers">header 3</div>3</div>
          <div class="top5picks"><div class="top5headers">header 4</div>4</div>
          <div class="top5picks"><div class="top5headers">header 5</div>5</div>
          <p>&nbsp;</p>
          <p>You</p>
        </div>
      </div> <!-- end wrapper -->
    </body>
    </html>
    All the best - redspyder

  • Users who have thanked redspyder for this post:

    LJackson (02-24-2009)

  • #11
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,088
    Thanks
    296
    Thanked 12 Times in 12 Posts
    Success!!!!! thats got the little bugger

    thank you v much, really appreciate the help

    Luke

  • #12
    New Coder
    Join Date
    Jan 2009
    Location
    Cornwall - UK
    Posts
    47
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Excellant!

    Stare at my own code for days on end sometimes, wierd how it's harder to spot your own errors. Good luck with the rest of it.

    All the best - redspyder

  • #13
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I see red found it in the time it took me to do this formatting. Notice that it sticks out like a sore thumb when the code is pretty printed (formatted). BTW, put this at the top of your css:

    Code:
    * {
    	margin:0;
    	padding:0;
    	border:0;
    	}
    The default padding/margins on the paragraph made it much harder to find.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #header {
    	margin: 0 auto;
    	width:980px;
    	height:125px;
    	padding-top:5px;
    	padding-bottom:5px;
    	z-index:1;
    	background-color:#A66300;
    	left: 164px;
    }
    #logo{
    	width:340px;
    	height:125px;
    	float:left;
    	margin-left:3px;
    	}
    #toplinks{
    	width:355px;
    	height:55px;
    	float:right;
    	background:#BF8630;
    	margin-right:5px;
    	margin-top:1px;
    	}
    #wrapper{
    	margin: 0 auto;
    	width:980px;
    	background-color:#FFC773;
    	}
    #indextext{
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	margin: 0 auto;
    	width:940px;
    	}
    #navlinkcont{
    	width:950px;
    	height:34px;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:16px;
    	float:left;
    	margin-left:14px;
    	}
    #entlink{
    	height:34px;
    	float:left;
    	}
    #complink{
    	height:34px;
    	float:left;
    	}
    #tvllink{
    	height:34px;
    	float:left;
    	}
    #clolink{
    	height:34px;
    	float:left;
    	}
    #misclink{
    	height:34px;
    	float:left;
    	}
    #speciallink{
    	height:34px;
    	float:right;
    	}
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body onload="MM_preloadImages('../../../Users/karate_kid007/Pictures/home.png','../../../Users/karate_kid007/Pictures/about2.png','../../../Users/karate_kid007/Pictures/contact.png')">
    <div id="header">
    	<div id="logo">
    		<img src="../../../Users/karate_kid007/Pictures/thelogo.png" width="340" height="125" alt="Kernow Connect" />
    	</div>
    
    	<div id="toplinks">
    		<a href="http://www.kernow-connect.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../../../Users/karate_kid007/Pictures/home.png',1)"><img src="../../../Users/karate_kid007/Pictures/home2.png" alt="Home" name="Home" width="114" height="57" border="0" id="Home" /></a><a href="http://www.kernow-connect.com/about.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutbtn','','../../../Users/karate_kid007/Pictures/about2.png',1)"><img src="../../../Users/karate_kid007/Pictures/about.png" alt="About Us" name="aboutbtn" width="114" height="57" border="0" id="aboutbtn" /></a><a href="http://www.kernow-connect.com/contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contactbtn','','../../../Users/karate_kid007/Pictures/contact.png',1)"><img src="../../../Users/karate_kid007/Pictures/contact2.png" alt="Contact Us" name="contactbtn" width="114" height="57" border="0" id="contactbtn" /></a>
    	</div>
    </div>
    
    <div id="wrapper">
    	<div id="navlinkcont">
    		<div id="entlink">
    			<a href="http://www.kernow-connect.com/entertainment.php">
    				<img src="../../../Users/karate_kid007/Pictures/entertainmentlink.png" alt="Entertainment" width="122" height="34" border="0" /></a>
    		</div>
    
    		<div id="complink">
    			<a href="connect.com/computing.php">
    				<img src="../../../Users/karate_kid007/Pictures/computinglink.png" alt="Computing" width="96" height="34" border="0" /></a>
    		</div>
    
    		<div id="tvllink">
    			<a href="connect.com/travel.php">
    				<img src="../../../Users/karate_kid007/Pictures/travellink.png" alt="Travel and Insurance" width="170" height="34" border="0" /></a>
    		</div>
    
    		<div id="clolink">
    			<a href="connect.com/clothing.php">
    				<img src="../../../Users/karate_kid007/Pictures/clothinglink.png" alt="Clothing" width="79" height="34" border="0" /></a>
    		</div>
    
    		<div id="misclink">
    			<a href="connect.com/misc.php">
    				<img src="../../../Users/karate_kid007/Pictures/misclink.png" alt="Misc" width="54" height="34" border="0" /></a>
    		</div>
    
    		<div id="speciallink">
    			<img src="../../../Users/karate_kid007/Pictures/speciallink.png" alt="Special Occasions" width="148" height="34" />
    		</div>
    	</div>
    
    	<p>&nbsp;</p> <!-- <======= look here -->
    
    	<div id="indextext">
    		<p>&nbsp;</p>
    		<p>Welcome to Kernow Connect, a website dedicated to helping you find some of the best deals on the web. We have the best offers from over 50 of the biggest online stores so you are sure to find the cheapest items around. But thats not it, we also list the top 10 selling items, the top 10 newest releases, and any discount codes that the stores may currently be offering helping you save. Theres more, do you want to find that special gift for a special occasion? Well check out our special occasion page where you can find the best items for every kind of ocassion, check it out!</p>
    		<p>You also have the ability to rate each of the 50+ stores depending on how well your transaction was handled, there are  four areas which you can rate the store and it is then given an overall rating,  the top three rated stores in each category will get greater exposure than the others, therefor you can rest asure that the store you are shopping at is reliable.</p>
    		<p>&nbsp;</p>
    
    	</div>
    </div>
    </body>
    </html>
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • Users who have thanked jerry62704 for this post:

    LJackson (02-24-2009)


  •  

    Posting Permissions

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