Disappearing content in EI 7

HTML & CSS
1

Hi there Site Point-ers,

I’ve just put up my very first web site. The excitement didn’t last too long after I previewed it in Internet Explorer 7. It works fabulously in Firefox. In IE, I’m experiencing a disappearing act of sorts.

The entire content area is disappearing when you click anywhere in the content area on three of my five pages. On all of the funky pages, the header stays put, the content area and footer disappears. Just gone!

Whhhhy oh why is this disappearing? I’m one of the newbies; please be easy with me :slight_smile:

Thank you,
Molly

2

Hi, we can’t help you until we get a link to look at :). Normally disappearing content can be fixed by position:relative on the element.

You can post a link even though you are new by leaving out the http://

sitehere . com / page . php

3

Ah, yes!

mojodesigns . net / index . html

Please check out index and services pages to see the problem.

The about and portfolio pages seem to be functioning correctly.

The contact page has some content disappear, and other content shifts upward.

4

Hi, position:relative; on the Content/#footer divs will work, however if you click on the content/footer the header will disappear (it’s just being hidden by the content really)

For some reason, upon clicking, IE is shifting the content upwards. I am at a loss to why this is happening so far but I’ll keep at it :slight_smile:

You should redo the header without absolute posiitoinig

Add in the clearing div here (inline to show)

<div id="header">
    <h1><span>mojo designs</span></h1>
    <h2 id="home"><span>nothin' a little mojo can't fix</span></h2>
	[B]<div style="clear:both;height:0;font-size:0;"></div>[/B]
 <ul>
    <li><a href="index.html" id="home-button"><span>home</span></a></li>
    <li><a href="about.html" id="about-button"><span>about me</span></a></li>
    <li><a href="portfolio.html" id="portfolio-button"><span>portfolio</span></a></li>
    <li><a href="services.html" id="services-button"><span>services</span></a></li>
    <li><a href="contact.html" id="contact-button"><span>contact</a></li>
    </ul>
</div>

Delete the red add in the rest :slight_smile:


#maincolumn
{
	display:inline;
}
#content
{
	[color=red]/*
	height:590px;
	*/[/color]
	overflow:hidden;
}
#footer
{
	position:relative;
}
#header
{
	position:relative;[color=red]
	/*
	height:443px;
	*/[/color]
	overflow:hidden;
}
#header h1
{
	float:left;
	display:inline;
	margin-left:110px;
	margin-top:78px;[color=red]
	/*
	position:absolute;
	left:0;
	top:0;
	*/[/color]
}
#header #home
{
	margin-right:110px;
	float:right;[color=red]
	/*
	position:absolute;
	left:0;
	top:0;
	*/[/color]
	margin-top:185px;
}
#header ul
{
	overflow:hidden;
	margin-top:50px;[color=red]
	/*
	padding-left:80px;
	padding-top:385px;
	top:-3px;
	position:absolute;
	*/[/color]
	margin-left:80px;
}
5

Thanks for taking the time to help me out. :slight_smile:

I’ve made your suggested edits. I’m still experiencing the disappearing (or shifting?) content area on: index, services, and contact page. The footer doesn’t disappear anymore, but it does shift up when content goes.

Also, now the h2 in my header is being covered or disappearing on all pages besides index. :shifty:

The only thing I changed to your edits was I kept the height on my Content. The bottom of the image was getting cut-off otherwise. I checked with and without the height on Content and it still disappeared as it has been so I don’t think that’s the deal breaker?

Any following suggestions? Thanks again.

6

Hi,

You have a missing closing span tag which is hiding the content because it is set to hide the content :slight_smile:


<li><a href="contact.html" id="contact-button">
<span>contact[B]</span>[/B]</a>
</li>

Put that back in and it should sort some problems out.

7

Oh my gosh, thank you so much! That darn closing span tag was missing on those three disappearing pages!!! It fixed the problem.

Additionally, I needed to remove the absolute positioning on all the h2s within the header on all the pages, exactly as you’d advised with #header #home, to avoid their sneaky disappearances as well:



}
#header #about {
    background-image: url(../images/aboutmeheader_image.jpg);
    background-repeat: no-repeat;
    height: 136px;
    width: 445px;
    /*position: absolute;   deleting per suggestion*/
    top: 185px;
    left: 565px; 
    margin-right:110px; /* adding per suggestion */
    float:right; /* adding per suggestion */
    margin-top:185px; /* adding per suggestion */
}
#header #portfolio {
    background-image: url(../images/portfoliotop_image.jpg);
    background-repeat: no-repeat;
    height: 136px;
    width: 445px;
    /*position: absolute;   deleting per suggestion*/
    top: 185px;
    left: 565px; 
    margin-right:110px; /* adding per suggestion */
    float:right; /* adding per suggestion */
    margin-top:185px; /* adding per suggestion */
}
#header #services {
    background-image: url(../images/servicestop_image.jpg);
    background-repeat: no-repeat;
    height: 136px;
    width: 445px;
    /*position: absolute;   deleting per suggestion*/
    top: 185px;
    left: 565px; 
    margin-right:110px; /* adding per suggestion */
    float:right; /* adding per suggestion */
    margin-top:185px; /* adding per suggestion */
}
#header #contact {
    background-image: url(../images/contactheader_image.jpg);
    background-repeat: no-repeat;
    height: 136px;
    width: 445px;
    /*position: absolute;   deleting per suggestion*/
    top: 185px;
    left: 565px; 
    margin-right:110px; /* adding per suggestion */
    float:right; /* adding per suggestion */
    margin-top:185px; /* adding per suggestion */
}

YA! My web site is up and running correctly! Thank you so much RyanReese and Paul O’B! I really appreciate it.

8

I also told you to remove the top/left values for every element there but glad all is working now :).

9

Oops, I missed that but thankfully it is still working.

Thanks again!

10

They are only recognized wehn the element has a position, aka absolute/relative/fixed :).

That’s why I told you to remove it. It is wasted space :). Just so you understand.