...

View Full Version : Invisible text



DarkLightA
03-01-2009, 06:27 PM
So. I was using a guide (HTMLdog) and it said that in order to make text invisible you could use:



width: 0;
height: 0;
overflow: hidden;


however, this CSS program I'm using sais that 'overflow' isn't valid? How come?

effpeetee
03-01-2009, 07:28 PM
It may depend on the Doctype that you are using.
Giving us the full code would be much more helpful.

Look here (http://www.quirksmode.org/css/overflow.html)for help.

and here too. (http://www.w3schools.com/Css/pr_pos_overflow.asp)

Frank

Apostropartheid
03-01-2009, 07:34 PM
The CSS programme is probably outdated or written to follow very basic rules. What is it?

Excavator
03-01-2009, 08:04 PM
Hello DarkLightA,
In that tutorial you're following doesn't explain a lot of things. It would be written like this to affect the only block level element that tutorial mentions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#header {
width: 0;
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>The Heading</h1>
<a href="#content" accesskey="n">Skip navigation</a>
</div>
<!--end wrap--></div>
</body>
</html>

But that does away with your whole header... probably not what you had in mind.
If you make the link a block level element, then you can hide it the same way we hid #header. Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#header {
height: 100px;
background: #F90;
}
#header a {
width: 0;
height: 0;
overflow: hidden;
display: block;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>The Heading</h1>
<a href="#content" accesskey="n">Skip navigation</a>
</div>
<!--end wrap--></div>
</body>
</html>
I know, seems pretty funny to make your link display so we can hide it.
You should complain to htmldog about the half assed tutorial.

DarkLightA
03-01-2009, 08:25 PM
Thanks a lot Excavator. The display: block; hid it :)

Btw. CyanLight: I'm using TopStyle Pro, so I find it kind of odd..

Anyways, now it works, so I'm happy :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum