Disappearing content in Firefox!

[kelpie]

I’m quite new to web design and I’m partly finished putting together this page of a site for an adventure company:

http://www.graphicalchemy.co.uk/test/aa … ities.html

When I view it in Safari and IE7 everything is where I expect it to be, but when I look at it in Firefox or Camino, all the content in the <div id="pagecontentwrapper"> just vanishes!

I have tried everything I can think of in my admittedly inexperienced repertoire but nothing seems to work – I’m left with no clue! (I even got up in the middle of the night with an idea that I thought might work – but no luck, and so I went back to bed disappointed).

The <div id="pagecontentwrapper"> contains a series of absolutely positioned divs and is itself is positioned absolutely within a relatively positioned wrapper.
This is my CSS:

* {
margin: 0;
padding: 0;
}

#pagewrapper {
height: 2500px;
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
position: relative;
}

table {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}

object {
border:none;
margin: 0;
padding: 0;
}

body {
margin: 0px;
padding: 0px;
font-family:Arial, Helvetica, sans-serif;
background-image: url(images/activitiesbg.jpg);
background-repeat: no-repeat;
background-position: center top;
}

a {
color: #FDD740;
font-size: 10px;
text-decoration: none;
font-weight: bold;
}

a:hover {
color: #FFAC03;
text-decoration: none;
}

img {
border: none;
margin: 0;
padding: 0;
}

a img {
border: none;
margin: 0;
padding: 0;
}

p {
font-family:Arial, Helvetica, sans-serif;
}

li {
list-style: none;
}

ul {
padding: 0;
margin: 0;
list-style: none;
}

#headertopstrip {
height: 66px;
width: 350px;
position: absolute;
left: 550px;
top: 0px;
}

#bandbicon{
height: 24px;
width: 88px;
overflow: hidden;
display: block;
background-image: url(images/bandbicon.jpg);
background-repeat: no-repeat;
background-position: center top;
position: absolute;
left: 14px;
top: 27px;
}

#bandbicon:hover{
background-position: center bottom;
}

#homeicon{
height: 24px;
width: 31px;
overflow: hidden;
display: block;
background-image: url(images/homeicon.jpg);
background-repeat: no-repeat;
background-position: center top;
position: absolute;
left: 133px;
top: 27px;
}

#homeicon:hover{
background-position: center bottom;
}

#mailicon{
height: 24px;
width: 31px;
overflow: hidden;
display: block;
background-image: url(images/mailicon.jpg);
background-repeat: no-repeat;
background-position: center top;
position: absolute;
left: 164px;
top: 27px;
}

#mailicon:hover{
background-position: center bottom;
}

#basketicon{
height: 24px;
width: 109px;
overflow: hidden;
display: block;
background-image: url(images/basketicon.jpg);
background-repeat: no-repeat;
background-position: center top;
position: absolute;
left: 223px;
top: 27px;
}

#basketicon:hover{
background-position: center bottom;
}

.bodytextbluetitle {
color: #2F477A;
font-weight: bold;
font-size: 20px;
}

.bodytextblue {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 110%;
color: #2F477A;
}

.bodytextitalic {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 110%;
color: #2F477A;
font-style: italic;
}

.captiontextwhite {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 135%;
color: #ffffff;
font-weight: bold;
}

.captionheading {
color: #077A2C;
font-weight: bold;
font-size: 16px;
}

.captionheading a {
color: #FDD740;
font-weight: bold;
font-size: 16px;
text-decoration: underline;
}

.captionheading a:hover {
color: #ffffff;
font-weight: bold;
font-size: 16px;
text-decoration: underline;
}

.introtitleitalic {
color: #4478BD;
font-size: 20px;
line-height: 120%;
font-weight: bold;
font-style:italic;
}

#headercontainer {
height: 182px;
width: 900px;
position: absolute;
left: 0px;
top: 66px;
}

/* menustyles*/

#menu {
height: 27px;
position: absolute;
top: 248px;
left: 0px;
width: 900px;
z-index: 1000;
}

#tab
{
margin:0;
top:0;
height: 27px;
padding-left: 10px;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}

#tab li
{
display:inline;
float:left;
margin:0 1px 0 0;
padding:0;
}
#tab a
{
margin:0;
padding:0;
text-decoration:none;
display:block;
float:left;
background-image: url(images/menubgimg.png);
background-repeat: repeat-x;
background-position: left top;
}
#tab a span
{
display:block;
padding:0 7px 0 7px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#ffffff;
font-weight:bold;
line-height:27px;
background-image: url(images/menubgimg.png);
background-repeat: repeat-x;
background-position: left top;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#17225E;
font-weight:bold;
font-style:normal;
text-decoration:none;
}

#headerbottomstrip {
height: 36px;
width: 890px;
position: absolute;
left: 0px;
top: 275px;
z-index: 1;
padding-top: 8px;
padding-right: 10px;
}

#pagecontentwrapper {
height: 2038px;
width: 900px;
position: absolute;
top: 319px;
padding: 0;
left: 0px;
margin: 0;
}

#activitiesintrocontainer1 {
height: 80px;
width: 420px;
position: absolute;
left: 0px;
top: 0px;
padding-left: 30px;
padding-top: 20px;
}

#activitiesintrocontainer2 {
height: 80px;
width: 350px;
position: absolute;
left: 450px;
top: 0px;
padding-left: 70px;
padding-top: 20px;
padding-right: 30px;
}

#activitiesintrocontainer3 {
height: 105px;
width: 250px;
position: absolute;
left: 0px;
top: 100px;
padding-left: 180px;
padding-top: 100px;
padding-right: 20px;
}

/* activity panel styles begin */

#kayakingypanel {
height: 205px;
width: 450px;
position:absolute;
top: 100px;
left: 450px;
background-image: url(images/kayakpanelbg.jpg);
background-repeat: no-repeat;
background-position: center top;
vertical-align:inherit;
}

#cyclingpanel {
height: 205px;
width: 450px;
background-image: url(images/cyclingpanelbg.jpg);
background-repeat: no-repeat;
background-position: center top;
position:absolute;
top: 305px;
left: 450px;
}

#windsurfpanel {
height: 205px;
width: 450px;
background-image: url(images/windsurfpanelbg.jpg);
background-repeat: no-repeat;
background-position: center top;
position:absolute;
top: 305px;
left: 0px;
}

#teambuildingpanel {
height: 205px;
width: 450px;
background-image: url(images/teambuildingpanelbg.jpg);
background-repeat: no-repeat;
background-position: center top;
position:absolute;
top: 510px;
left: 450px;
}

#quadsyouthpanel {
height: 205px;
width: 450px;
background-image: url(images/quadsyouthpanelbg.jpg);
background-repeat: no-repeat;
background-position: center top;
position:absolute;
top: 510px;
left: 0px;
}

#archerypanel {
height: 205px;
width: 450px;
background-image: url(images/archerypanelbg.jpg);
background-repeat: no-repeat;
background-position: center top;
position:absolute;
top: 715px;
left: 0px;
}

#wakeboardpanel {
height: 205px;
width: 450px;
background-image: url(images/wakeboardpanelbg.jpg);
background-repeat: no-repeat;
background-position: center top;
position:absolute;
top: 920px;
left: 0px;
}

#climbingrockpanel {
height: 205px;
width: 450px;
background-image: url(images/climbingrockpanelbg.jpg);
background-repeat: no-repeat;
background-position: center top;
position:absolute;
top: 920px;
left: 450px;
}

#activitydescription {
height: 135px;
width: 195px;
padding-top: 25px;
padding-right: 25px;
float: right;
}

.descriptiontext1 {
font-family:Arial, Helvetica, sans-serif;
color: #ffffff;
font-weight: bold;
font-size: 12px;
line-height:120%;
}

.descriptiontext2 {
font-family:Arial, Helvetica, sans-serif;
color: #ffffff;
font-size: 12px;
}

#detailstrip {
height: 37px;
width: 365px;
padding-left: 20px;
padding-top: 8px;
float: left;
}

.detailstextgrey {
font-family:Arial, Helvetica, sans-serif;
color:#999999;
font-size: 11px;
}

.detailstextgreen {
font-family:Arial, Helvetica, sans-serif;
color:#1A9C4A;
font-size: 11px;
font-weight: bold;
}

.detailstextblue {
font-family:Arial, Helvetica, sans-serif;
color:#2345A6;
font-size: 11px;
font-weight: bold;
}

.detailstextaqua {
font-family:Arial, Helvetica, sans-serif;
color:#2597AF;
font-size: 11px;
font-weight: bold;
}

#basketiconcontainer {
height: 45px;
width: 65px;
float: right;
}

#addbasketicon{
height: 30px;
width: 45px;
overflow: hidden;
display: block;
background-image: url(images/addbasketicon.jpg);
background-repeat: no-repeat;
background-position: left top;
float: left;
}

#addbasketicon:hover{
background-position: bottom left;
}

/* activity panel styles ends */

#footer {
height: 57px;
width: 775px;
position: absolute;
left: 125px;
top: 2390px;
color: #FFFFFF;
font-size: 9px;
line-height: 150%;
text-align: center;
padding-top: 15px;
}

.footertexthighlight {
color: #FDD740;
font-size: 10px;
font-weight: bold;
}

.footertexthighlightwhite {
color: #ffffff;
font-size: 11px;
font-weight: bold;
}

#toplinkcontainer {
height: 37px;
width: 105px;
position: absolute;
left: 0px;
top: 2390px;
font-size: 11px;
color: #9999AB;
padding-top: 35px;
padding-left: 20px;
}

#subfooter a {
color: #AEAEBD;
text-decoration: none;;
}

#subfooter a:hover {
color: #2345A4;
text-decoration: none;;
}

#subfooter {
height: 28px;
width: 890px;
position: absolute;
left: 0px;
top: 2462px;
font-size:9px;
color: #AEAEBD;
padding-top: 10px;
text-align: right;
padding-right: 10px;
}

I’d really appreciate any ideas from more experienced designers and developers who might be able to shed some light on this before I completely lose my sanity.

Thanks very much in advance to all …

Ian.

[falkencreative]

Take a look at this first… In your code, you have several long comments that you are using to define areas within your code. For example:

<!

---

kayakingypanel begins

---

>

When I view source in Firefox, it appears that these comments may be accidentally commenting out sections of your code. Try adding an extra space at the beginning/towards the end of the comment, like this:

<!–

---

kayakingypanel begins

---

–>

Try fixing those comments on a test page, and see if content then shows up correctly. Let me know… if there are additional problems after that, or if that doesn’t fix it, I’ll take an additional look.

[kelpie]

Thanks Benjamin,

Removing all the long lines of comment within that div cured it perfectly!

It never occurred to me that it was my comments that were affecting the mark-up. I’m learning as I go along, but your kind help has got me past another obstacle.

Regards,

Ian.

[falkencreative]

Glad to help out. ;) I’ve run into this problem before, in code that I have written… for some reason, leaving out the space after "<!–" and before the closing "–>" causes issues.

[Author]

Posts