...

View Full Version : firefox not displaying properly (page validates)



LJackson
02-23-2009, 10:48 PM
Hi all,

im having a small problem with my current page here (http://www.kernow-connect.com/Newindex.php)

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

here is my 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;
}
.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 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 there's 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>
</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

Fou-Lu
02-23-2009, 10:54 PM
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.

LJackson
02-23-2009, 11:08 PM
thanks for moving it to the correct place fou-lu :)

p.s its firefox thats causing the problem not IE

Fou-Lu
02-23-2009, 11:13 PM
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 :)

LJackson
02-23-2009, 11:15 PM
lol and me :)

redspyder
02-24-2009, 12:10 AM
hi LJackson,

Add this


clear:both;

to this


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

All the best - redspyder

LJackson
02-24-2009, 12:26 AM
hi mate unfortunatly this didnt solve it.

thanks
Luke

p.s i see your also from cornwall :)

redspyder
02-24-2009, 12:38 AM
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

LJackson
02-24-2009, 12:42 AM
hmmm thats odd.

im live near lands end :)

redspyder
02-24-2009, 12:46 AM
Also remove

<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.



<!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

LJackson
02-24-2009, 12:54 AM
Success!!!!! thats got the little bugger

thank you v much, really appreciate the help

Luke

redspyder
02-24-2009, 01:42 AM
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

jerry62704
02-24-2009, 02:46 PM
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:


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

The default padding/margins on the paragraph made it much harder to find.



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum