DHTML Bypasses Text...Becoming A Prob?
(I wasn't quite sure where to post this..)
I've recently been learning DHTML (basic to most people but I'm learning like all of you had to) and I've found something that I believe is a problem. This document I'm about to show you isn't finished as far as how I want it, but it itself is finished..if you understand what I'm saying.
<head>
<title>My First Dynamic Web Page</title>
</head>
<body Style = "background-color:Silver">
<!-- This expression is called a style sheet, because it's inside a tag; it's an inline style sheet. In this context, Style is an attribute and its value is a string. The string contains a style property, a colon, and the value of the property. A style sheet can hold more than one prperty-value pair, and when it does, a semi-colon separates adjacent pairs. -->
<H1 ID = hiHeader Style = "text-align:center">Dynamic HTML:Master the Essentials</h1>
<!-- This attribute, ID, will give a refferal to the header when we have to work with it in a scripting language. -->
<hr>
<!-- To create the remaining elements of the page, you'll divide the page into segments called DIVs. Each segment starts with the DIV tag below and ends with the closing tag of DIV. After the segments are created, their scripted to exhibit the desired effects. -->
<DIV ID = divMessage>
<div Style = "Position:Absolute;Left:5%;Top:10%;Visibility:Hidden;z-index:-1;font-style:normal;font-weight:bold;font-family:Normal;font-size:50;color: 'black'">
<!-- Above, the first property-value pair, POSITION:ABSOLUTE, tells the browser to position the DIC with respect to the top edge and left edge of the browser window. -->
<!-- NOTE - Another possible value for Position is Relative. In contrast to Absolute, Relative situates an element in relation to other elements on the page. -->
<p> Topics in the site include
<ul>
<li>Scripting
<li>Cascading Style Sheets
<li>GFX/Animation
<li>And much more as I become less challenged XD
</ul>
</p>
</DIV>
<!-- The next two property-value pairs show one way that style sheets let you specify position-via percentages of distance from the left edge and the top edge of the browser window. The first of the two pairs positions the DIV's left side 5% of the distance from the left edge to the right, and the second positions its top edge 10% of the distance from the top of the browser to the bottom. The fourth pair. VISIBILITY:HIDDIN, keeps the message invisible when the page opens. -->
<!-- The z-index styling property determines this kind of layering:the lower the z-index, the deeper the apparent layer of its element. -->
<DIV ID = divLearn Style = "Position:Absolute;Left:180;Top:200;Width:210;z-index:0;">
<p ID = pLearn Style = "font-family:cursive;font-size:15pt;font-weight:bold">
w00tsauce lmao.
</p>
</DIV>
<!-- Moving boxes. -->
<DIV ID = divBox1 Style="background-color:blue;color:blue;text-align:center;Position:Absolute;Left:150;Top:180;Width:120;Height:60;z-index:1">
</DIV>
<DIV ID = divBox2 Style="background-color:blue;color:blue;text-align:center;Position:Absolute;Left:270;TOP:180;Width:120;Height:60;z-index:1">
</DIV>
<DIV ID = divBox3 Style="background-color:blue;color:blue;text-align:center;Position:Absolute;Left:150;Top:240;Width:120;Height:60;z-index:1">
</DIV>
<DIV ID = divBox4 Style="background-color:blue;color:blue;text-align:center;Position:Absolute;Left:270;Top:240;Width:120;Height:60;z-index:1">
</DIV>
<DIV ID = divBox1 Class = "bluebox" Style="Position:Absolute;Left:150;Top:180;z-index:1;">
</DIV>
<DIV ID = divBox2 Class = "bluebox" Style="Position:Absolute;Left:270;Top:180;z-index:1">
</DIV>
<DIV ID = divBox3 Class = "bluebox" Style="Position:Absolute;Left:150;TOp:240;z-index:1">
</DIV>
<DIV ID = divBox4 Class = "bluebox" Style="Position:Absolute;Left:270;Top:240;z-index:1;">
</DIV>
</body>
</body>
</html>```
The block of text that doesn't seem to show up is:
```markup<p> Topics in the site include
<ul>
<li>Scripting
<li>Cascading Style Sheets
<li>GFX/Animation
<li>And much more as I become less challenged XD
</ul>
</p>```
Although you can find it in the source, it doesn't appear to show. Is this supposed to happen or does my coding have flaws that I'm unaware of?
Just by giving a quick look at your code, I think you should centralize all your css in a css file or in a style tag, that be easier to modify and to code. Also you shouldn't use too much position absolute. It does show the same way in all navigator and the result isn't quite good compare to other method like using float.
Folk Theory wrote: dhtml doesnt work well with mozilla. if your school or one of your friends has windows ask him to see your site in explorer
Please check you facts before speaking.
Thats the kind of bullshit that Microsoft like you to believe, Firefox is generally accepted to be one of the most compliant browsers around.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My First Dynamic Web Page</title>
</head>
<body style="background-color:Silver">
<!-- This expression is called a style sheet, because it's inside a tag; it's an inline style sheet. In this context, style is an attribute and its value is a string. The string contains a style property, a colon, and the value of the property. A style sheet can hold more than one prperty-value pair, and when it does, a semi-colon separates adjacent pairs. -->
<h1 id="hiHeaderstyle" style= "text-align:center">Dynamic HTML:Master the Essentials</h1>
<!-- This attribute, ID, will give a refferal to the header when we have to work with it in a scripting language. -->
<!--<hr>-->
<!-- To create the remaining elements of the page, you'll divide the page into segments called divs. Each segment starts with the div tag below and ends with the closing tag of div. After the segments are created, their scripted to exhibit the desired effects. -->
<div id="divMessage">
<div style="Position:Absolute;Left:5%;Top:10%;Visibility:Hidden;z-index:-1;font-style:normal;font-weight:bold;font-family:Normal;font-size:50;color: 'black'">
<!-- Above, the first property-value pair, POSITION:ABSOLUTE, tells the browser to position the DIC with respect to the top edge and left edge of the browser window. -->
<!-- NOTE - Another possible value for Position is Relative. In contrast to Absolute, Relative situates an element in relation to other elements on the page. -->
<p>Topics in the site include</p>
<ul>
<li>scripting</li>
<li>Cascading style Sheets</li>
<li>GFX/Animation</li>
<li>And much more as I become less challenged XD</li>
</ul>
</div>
<!-- The next two property-value pairs show one way that style sheets let you specify position-via percentages of distance from the left edge and the top edge of the browser window. The first of the two pairs positions the div's left side 5% of the distance from the left edge to the right, and the second positions its top edge 10% of the distance from the top of the browser to the bottom. The fourth pair. VISIBILITY:HIDDIN, keeps the message invisible when the page opens. -->
<!-- The z-index styling property determines this kind of layering:the lower the z-index, the deeper the apparent layer of its element. -->
<div id="divLearn" style="Position:Absolute;Left:180;Top:200;Width:210;z-index:0;">
<p id="pLearn" style="font-family:cursive;font-size:15pt;font-weight:bold">
w00tsauce lmao.
</p>
</div>
<!-- Moving boxes. -->
<div id="divBox" style="background-color:blue;color:blue;text-align:center;Position:Absolute;Left:150;Top:180;Width:120;Height:60;z-index:1">
</div>
<div id="divBox2" style="background-color:blue;color:blue;text-align:center;Position:Absolute;Left:270;TOP:180;Width:120;Height:60;z-index:1">
</div>
<div id="divBox3" style="background-color:blue;color:blue;text-align:center;Position:Absolute;Left:150;Top:240;Width:120;Height:60;z-index:1">
</div>
<div id="divBox4" style="background-color:blue;color:blue;text-align:center;Position:Absolute;Left:270;Top:240;Width:120;Height:60;z-index:1">
</div>
</div>
</body>
</html>```
Valid code
That code is missing because of this:
> **Visibility:Hidden;**
And I agree CSS should be isolated but atm I cba
ALSO
Try installing FireBug (http://getfirebug.com) and use the inspect HTML tool