ctrl_+ makes text disappear from page

HTML & CSS
1

Hi everyone,
My code contains an image and text located on that image as follows:


<style type="text/css">
  * {margin:0;padding:0;font-size:2em;} 
  #me {width:780px;margin-left:110px;float:left;display:inline;}
  .myText
   { 
    padding:15px;
    width:550px;  
    margin-left:-580px ;
    float:left;
    display:inline;
   }
</style>
</head>
<body>
  <div id="me"><img src="to_forum.jpg" /></div>
  <div class="myText">
      abc
  </div>
</body>

I uploaded this code at: http://avirot.bravehost.com. When the page shows up in my browser i see: “abc”.
If i want to see larger text i click ctrl_+ but then the text disappears ! Any idea why text disappears from my page when i click “ctrl” and “+” imultaneusly ?
Thanks !

2 
margin-left:-580px ;
3

That’s just a text resize and it’s being hidden as Blake said by hte negative margin. Why do you even have that margin anyway?

4

Hi,
Thanks for your help.
If I omit “margin-left:-580px;” the text div will be located beneath the image.
I assigned: “margin-left:-580px” because i wanted my text to be located at a certain location on a background image. I’ll try to make it a “background-image”. I preferred it that way because i thought this way i get better control.
Thanks again.

5

Hi, I don’t even see the “abc” text anymore :). What’d you do with it? Also do you realize this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Index_ver_8</title>
<!--[if lt IE 7]>
<script type="text/javascript">
  sfHover = function() 
    {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) 
      {
       sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
     sfEls[i].onmouseout=function() 
      {
       this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
      }
     }
    }
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style type="text/css" media="all">
* {
    padding:0;
    margin:0;
    font-family:Verdana, Arial, sans-serif;
}
#nav, #nav ul {
    float:left;
    padding: 0;
    margin:0;
    list-style: none;
}
#nav {
    float:none;
    width:800px;
    margin:auto;
    font-size:.7em;
}
#nav a {
    color:#000;
    font-weight:bold;
    text-decoration:none;
    display: block;
    color:#4f4c4d;
    padding:2px 15px;
}
#nav li {
    float: left;
    position:relative;
    border-left:1px solid green;
    color:#b10;
}
#nav li li {
    clear:left;
    width:20em;
}
#nav li:first-child, #nav li.first {
    border-left:none;
}
#nav li ul li {
    border-left:none;
}
#nav li ul {
    padding:0;
    position: absolute;
    width: 20em;
    margin-left: -999em;
    left:0;
    top:100&#37;;
}
#nav li:hover ul, #nav li.sfhover ul {
    margin-left:0;
}
#nav li:hover a, #nav li.sfhover a {
    color:blue;
}
#nav li li {
    width: 20em;
}
#nav li li a {
    width:20em;
    padding:2px .5em;
}
#nav li:hover li a, #nav li.sfhover li a {
    color:#4f4c4d
}
#bg_picture {
    background-image: url(http://avirot.bravehost.com/graphix/rounded_corners_p1.jpg);
    width:800px;
    height:600px;
    margin:1px auto 0px auto;
    padding:0px;
    clear:both;
}
#nav li:hover ul, #nav li.sfhover ul {
    margin-left:0;
}
#nav li ul a:hover {
    color:#c85b77;
}
#nav li ul {
    background-color:#e8dab7;
}
</style>
<title>untitled</title>
</head>
<body><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

Two doctypes, two page setups there. I realize the host might be doing this though :slight_smile:

6

Hi RyanReese,
I’m blessed with your attention :slight_smile:
I did realize it after i had got your assistance and didn’t know if what had caused it was the “Free Hosting” or my free perplexity.
Anyway, I changed “Float:left” to “background-image” and the problem was solved and i learnt another css lesson.
I remember someone’s post (was it you ?) in this forum to someon’s question if css was easy to learn with: “very simple”. Not for me.
Luckily there is you and the rest of them Gurus in this forum to push me on.

7

I probably gave a better answer then very simple lol :). I remember a thread like that though.

It is a learning curve but I seem to have a knack for CSS…I picked it up quickly. It just clicks with me.

Hanging around forums taught me everything I know. Just hang out around here, try to do threads…memorize our advice to certain situations and when the problem is asked again here just mimic the advice :).

8

Well, I was speaking of the bottom line of that post which was consisted of far more then 2 words and was much more detailed. CSS may not be difficult but for me it was. So far…
Right now i’m busy building my first CSS site so i can’t learn other people’s posts. I’d love to do it when i’m done knowing that meanwhile those posts are in good hands…

9

If you are going to be sticking around watching threads I’ll try and give a detailed answer so you can understand it (and others).

Of course if you won’t read it then I won’t bother to give a detailed answer lol.

CSS is one of those languages where you can learn the basics, and help others, and sometimes that’s good enough, but sometimes you need to learn the more complex stuff.

Most of the questions asked here (90%) are easy threads and are basic CSS concepts. You can definately learn :slight_smile:

10

OK, i’ll try to be more involved. maybe it’ll work. I mean, maybe i can supply someone with a good solution … I’ll give it a try :slight_smile: