[SOLVED] text vanishes if you click on it

This is a discussion on "[SOLVED] text vanishes if you click on it" within the Web Page Design section. This forum, and the thread "[SOLVED] text vanishes if you click on it are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page [SOLVED] text vanishes if you click on it

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.
Hi Unregistered, why not enter WOTM this month and show off your skills? Not only will you win the admiration of your colleagues, but also one years supermember status and your site featured on the home page. Go on enter NOW !




Reply
 
LinkBack Thread Tools
  #1  
Old Oct 18th, 2007, 13:36
Up'n'Coming Member
Join Date: Sep 2007
Location: Canterbury
Age: 31
Posts: 53
Thanks: 0
Thanked 0 Times in 0 Posts
[SOLVED] text vanishes if you click on it
I'm sure i didn't have this problem a few days ago but if you click on the text while the page is loading the text disappears for a split sec then comes back. If you click on it when it has finished loading the text vanishes and doesn't come back. What is going on? Here's the link:

http://www.freewebs.com/mykl/myklscape/test2.html

here's the code:
HTML: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MYKLscape Close-Ups: A Collection of Photographs by Mykl</title>
<meta name="keywords" content="photography, photograph, photo, foto, closeup, close up, close-up, nature, wildlife, flora, fauna, mykl, michael bonner, flower, plant, digital, grass, snow, dew, spider, moth, creepy crawley, insect, snail,">
<meta name="description" content="A Collection Of Close-Up Photographs By Mykl.">

<style type="text/css">
    @import "all.css"; /* just some basic formatting, no layout stuff */
    
    body {  overflow: hidden;
        margin:0px 0px 0px 0px;
        padding:0px;
        }

        #background {
                position: absolute;
                z-index: 1;
                overflow: hidden;
                height: 100%;
                }

    #banner {
                position: absolute;
                z-index: 4;
        height:20px; 
                width: 98%;
                z-index: 1;
        voice-family: "\"}\"";
        voice-family: inherit;
        height:18px;
        }

    #leftcontent {
        position: absolute;
                z-index: 2;
        left:5px;
        top:20px;
        width:150px;
                padding: 20px;
        border:1px solid #000;
        }

    #centercontent {
                position: absolute;
                z-index: 3;
                height: 100%;
                width: 800px;
                overflow: auto;
           margin-left: 199px;
           margin-right:199px;
           margin-left: 201px;
           margin-right:201px;
        }

    #footer {
        position: absolute;
                z-index: 2;
        bottom:0px;
                width: 98%;
        }

    html>body #centercontent {
           margin-left: 201px;
           margin-right:201px;
        }

    html>body #banner {
        height:39px;
        }

</style>
</head><body>

<div id="background"><img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fotositebg.jpg" height="650px"></div>

<div id="banner"><font size="10"><face="arial"><font color="blue"><center><strong>MYKLscape</strong></center></font color></face></font size></div>
<div id="leftcontent">
<font size="5"><face="arial"><strong>Navigation</font size><br><br>
<font size="3">
<a href="http://www.freewebs.com/mykl/MYKLscape/home.html">Home</a><br><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/edited.html">Edited</a><br><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/closeups.html">Close Ups</a><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/closeups.html#flora">Close Ups of Flora</a><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/closeups.html#fauna">Close Ups of Fauna</a><br><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/random.html">Random and Funny</a><br><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/scenery.html">Scenery and Nature</a><br><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/spooky.html">Spooky</a><br><br>
</strong>
<a href="mailto:info@mykl.org.uk">E-mail Mykl</a>
<br><br><br>
<strong>Mykl's other sites:</strong><br><br>
<a href="http://www.mykl.org.uk" target="_blank">MYKLworld</a><br>
<a href="http://www.heleddandmykl.com" target="_blank">Heledd&Mykl.com</a><br>
</div>

<div id="centercontent"><a name="top"></a><br><br><br><br>
<font size="6"><font color="black"><face="arial">
<strong>CLOSE-UPS</strong></font size>
<font size="4"><br><br>
I love taking close up photos of very small things.  All of the pictures in this section were taken with a camera phone (and a swiss army penknife magnifying lens for the very tiny items).  Some images have an optional closer view - just click on the image.<br>
<br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/random%20funny/wateronnail2.jpg" height="500px"><br>
<br><br>
<hr width="90%" size="4" color="black" align="center"><br><br>

<font size="6"><face="arial">
<a name="flora">Flora</a></face></font size><br>
<br><br>
<font size="4"><font color="black"><face="arial">
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/flora/flower.jpg" height="550px"><br>
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/details/icemoss.html" target="_blank"><img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/flora/Icecrystalsonmoss.jpg" height="500px"></a>
<br><br>
Ice crystals on moss.  Click on the image to see a stunning close-up of this!
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/details/ice leaf.html" target="_blank"><img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/flora/Icecrystalsonleaf2.jpg" width="750"></a>
<br><br>
Ice crystals on a leaf.  Click on the image to see a stunning close-up of this!  This image got me into the final of a photography competition.
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<a href="http://www.freewebs.com/mykl/MYKLscape/details/dew1close.html" target="_blank"><img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/flora/dew1.jpg" width="750"></a><br>
<br>
Click on the image to see a stunning close-up of this!
<br><br>
<hr width="90%" size="4" color="black" align="center"><br><br>
<font size="6"><a name="fauna">Fauna</a><br><br>
</font size><font size="5">Slimey Things</font size>
<br><br>
<font size="4"><font color="black"><face="arial">
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/snailclose.jpg" height="500"><br>
<br>
RUN FOR YOUR LIVES!<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/longsnail2a.jpg"><br>
<br>
This baby snail's shell was about 3mm long.  If you look carefully you can make out reflections of trees and windows and perhaps even me!<br>
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/Babysnail2.jpg" width="750"><br>
<br>
You can get an idea of how small this snail was from looking at the grooves in the hand it is on.
<br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/Babysnail1close.jpg" height="500"><br>
<br>
I think this was the same snail.<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/roundsnail3close.jpg" width="750"><br>
<br>
This baby snail's shell was about 2mm long.
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/Dirtbugclose.jpg" height="500"><br>
<br>
I don't know what this thing was.  I found it ooozing up a brick wall - that grey stripe is the concrete between bricks.  It seemed to be some kind of maggot struggling to drag a lump of assorted filth up the wall.
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/Maggotclose.jpg"><br>
<br>
A million of these blighters burst from the kitchen bin and laid seige to the house.  The picture is a little blurred cos this one was dashing for the back door.
<br><br>
<hr width="90%" size="4" color="black" align="center"><br><br>

</font size><font size="5">Flying Things</font size><br>
<br><br>
<font size="4"><font color="black"><face="arial">
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/moth3close.jpg" width="750"><br>
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/Mothclose.jpg" width="750"><br>
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/Greenfly1close.jpg" height="550"><br>
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/Daddylonglegs1close.jpg" height="500"><br>
<br><br>
Apparently the Daddy Long Legs's mouth has the most potent venom known to man.<br>
Apparently the Daddy Long Legs has no teeth with which to inject its venom.
<br><br><br>
<hr width="90%" size="4" color="black" align="center"><br><br>

</font size><font size="5">Crawling Things</font size><br>
<br><br>
<font size="4"><font color="black"><face="arial">
There are some flying things in here but as you can't see their wings I've put them under this section.
<br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/spikeybugclose.jpg" height="500"><br>
<br><br>
This is the first close-up photo I ever took.
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/hitchhikerbugclose.jpg"><br>
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/camera-shybug3close.jpg" height="500"><br>
<br>
These bugs can cause vast pestilential damage each year in France if precautions are not taken.  They may be ravenous but they are also camera shy - whenever I pointed the camera at them they ran away which makes this photo a very impressive achievement.<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>

<font size="8"><strong>WARNING: LARGE SPIDERS<br><br></strong></font size><font size="4">
<br><br><br><br><br><br><br><br><br><br><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/spiderclose.jpg" height="550"><br>
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/spider1close.jpg" height="550"><br>
<br><br>
<hr width="80%" size="2" color="black" align="center"><br><br>
The next beautiful lady was a wonderful model - I worked with her for ages and hope to work with her again in the future.
<br><br>
Here she can be seen posing on a spoon.
<br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/spoonspider3.jpg" width="750"><br>
<br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/spoonspider2.jpg" width="750"><br>
<br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/spoonspider9.jpg" width="750"><br>
<br><br>
As she basks on a tap she shows off just how hairy those long slender brown legs are...
<br><br>
<img src="http://i9.photobucket.com/albums/a95/Mykl/photosite/fauna/spoonspider1close.jpg"><br>
<br><br>

<hr width="80%" size="2" color="black" align="center"><br><br>
<a href="#top">Top of the Page</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<center>
<table width="90%%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td><center>
          <font size="2" face="Arial, Helvetica, sans-serif">This site is hosted 
          for FREE by <a href="http://members.freewebs.com/" rel="nofollow"><img style="border:0px; width:71px; height:16px;" src="http://images.freewebs.com/Images/logo-tm.gif" alt="Freewebs.com" align="absmiddle"></a>. <a href="http://members.freewebs.com/" target="_blank"><font color="#000000">Click here to get your own Free Website!</font></a></font> 
        </center></td>
    </tr>
  </table></center>
<br />

</div>

</body>
</html>
Last edited by karinne; Oct 18th, 2007 at 13:49. Reason: Please use the vBcode [ html ] when inserting HTML code in your post.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Oct 18th, 2007, 13:39
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,777
Thanks: 0
Thanked 16 Times in 16 Posts
Re: text vanishes if you click on it
What browser are you using? It doesnt happen to me in Firefox 2.0..
__________________
Marc
Staff Manager - Webforumz.com

Want to be a moderator? PM me.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Oct 18th, 2007, 13:42
Up'n'Coming Member
Join Date: Sep 2007
Location: Canterbury
Age: 31
Posts: 53
Thanks: 0
Thanked 0 Times in 0 Posts
Re: text vanishes if you click on it
oh sorry i 4got to say it seems to only be ie7. i'm so frustrated!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Oct 18th, 2007, 13:51
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: text vanishes if you click on it
Please validate you site! You have 871 errors

It might fix it ... it might not but I least we don't have to look through invalid code.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Oct 18th, 2007, 13:52
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: text vanishes if you click on it
Why bother using overflow:auto; and height:100%; I would remove them

I think it would look better if you didn't specify a height for the div and just let the user scroll down using the scroll bar. There is a nasty scroll bar which runs down the right hand side of the div and it looks out of place....but that's just my thought
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Oct 18th, 2007, 17:08
Up'n'Coming Member
Join Date: Sep 2007
Location: Canterbury
Age: 31
Posts: 53
Thanks: 0
Thanked 0 Times in 0 Posts
Re: text vanishes if you click on it
The reason for the 'nasty scroll bar' was because my bg image only filled a quarter of the screen and people on this forum told me there was no simple way to fix it. So I set an image in a div with the lowest z-index so it would act as a bg. This means I need to put in overflow:auto; and height:100% otherwise the bg image wouldn't stay still when you scroll. For some reason this is the cause of the vanishing text problem in IE7.
I've now discovered photobucket seems to be limiting the size of bg images and if I upload the image to the web host I can use a bg image in the normal way and it fills the screen.
If I remove the scroll bar then scrolling causes the nav menu to scroll out of view and I believ navigation should always be visible. I'll make the scroll bar more elegant by changing the colour later tho.
thanks for you help!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Oct 18th, 2007, 17:20
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: [SOLVED] text vanishes if you click on it
Glad you got it working......it looks much better now you have the background image there because it wasn't visible earlier and you could see the scrollbar right down the middle of the page
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

« [SOLVED] wont stretch | [SOLVED] Is something missing? »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] problem with the &quot;click to activate&quot; solution danny322 Flash & Multimedia Forum 5 Nov 27th, 2007 17:11
[SOLVED] Text rollover candyzouk JavaScript Forum 3 Nov 23rd, 2007 13:41
[SOLVED] Image with text -&gt; text with background alexgeek Web Page Design 5 Nov 13th, 2007 23:25
[SOLVED] Text Editor Monie PHP Forum 15 Oct 19th, 2007 02:14
[SOLVED] text gone black jtyoungs Web Page Design 9 Sep 28th, 2007 16:49


All times are GMT. The time now is 06:37.

Contact Us - Web Design & Development Forums - Archive - Top

Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Online Casino :: Web Hosting :: Football Betting :: Web Development India :: Football Stats :: Free Bets :: Extreme Clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Search Engine Optimisation :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42