SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Disappearing content in EI 7

    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

    Thank you,
    Molly

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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

    You should redo the header without absolute posiitoinig

    Add in the clearing div here (inline to show)
    Code:
    <div id="header">
        <h1><span>mojo designs</span></h1>
        <h2 id="home"><span>nothin' a little mojo can't fix</span></h2>
    	<div style="clear:both;height:0;font-size:0;"></div>
     <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
    Code:
    #maincolumn
    {
    	display:inline;
    }
    #content
    {
    	/*
    	height:590px;
    	*/
    	overflow:hidden;
    }
    #footer
    {
    	position:relative;
    }
    #header
    {
    	position:relative;
    	/*
    	height:443px;
    	*/
    	overflow:hidden;
    }
    #header h1
    {
    	float:left;
    	display:inline;
    	margin-left:110px;
    	margin-top:78px;
    	/*
    	position:absolute;
    	left:0;
    	top:0;
    	*/
    }
    #header #home
    {
    	margin-right:110px;
    	float:right;
    	/*
    	position:absolute;
    	left:0;
    	top:0;
    	*/
    	margin-top:185px;
    }
    #header ul
    {
    	overflow:hidden;
    	margin-top:50px;
    	/*
    	padding-left:80px;
    	padding-top:385px;
    	top:-3px;
    	position:absolute;
    	*/
    	margin-left:80px;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for taking the time to help me out.

    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.

    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    <li><a href="contact.html" id="contact-button">
    <span>contact</span></a>
    </li>
    Put that back in and it should sort some problems out.

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    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:
    Code:
    }
    #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. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I also told you to remove the top/left values for every element there but glad all is working now .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, I missed that but thankfully it is still working.

    Thanks again!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Tags for this Thread

Bookmarks

Posting Permissions

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