Forum Moderators: not2easy
I just can't see the problem and I know it's something very basic.
css:
img.1ch {position:absolute; top:0px; left:20px; z-index:3;}
img.2ch {position:absolute; top:130px; left:5px; z-index:3;}
.htm:
<img src="img/temp_channel.png" class="1ch">
<img src="img/temp_channel.png" class="2ch">
What suppose to happen:
......[img 1]
.[img 2]
What actually happens:
[img 1][img 2]
I've even added a border: to the 1st image to see if that displays and it doesn't. I've also tried removing the img. before each class and that doesn't work, but adding the css directly to the image as a style="" works just fine.
I know this is something really basic that is slipped my mind (I've forgotten to add the . before a class in past "whaa!?" episodes). I just need another set of eyes to show me where I'm screwing up.
Maybe if I post the rest of my css file it might help. There might be a goof somewhere else in the file perhaps.
css file:
- - - - - - - - - -
html {overflow:hidden;}body {margin:0; padding:0;
z-index:0;
background-image:url(img/centercircle.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center 20px;
overflow:hidden;}
#content {width:100%; height:500px;
position:absolute;
top:0px; left:0px;
border:1px dashed red;
z-index:1;}
iframe {width:100%; height:500px;
border:none;
z-index:1;}
img.1ch {position:absolute; top:0px; left:20px; z-index:3;}
img.2ch {position:absolute; top:130px; left:5px; z-index:3;}
img.3ch {position:absolute; top:260px; left:5px; z-index:3;}
img.4ch {position:absolute; top:390px; left:20px; z-index:3;}
img.5ch {position:absolute; top:0px; right:20px; z-index:3;}
img.6ch {position:absolute; top:130px; right:5px; z-index:3;}
img.7ch {position:absolute; top:260px; right:5px; z-index:3;}
img.8ch {position:absolute; top:390px; right:20px; z-index:3;}
htm file:
- - - - - - - -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>mypage</title>
<link rel="stylesheet" type="text/css" href="hm6.css" title="style-1" media="screen">
</head>
<body><div id="content">
<iframe src="content.htm" name="content"></iframe>
</div>
<!-- channel buttons -->
<img src="img/temp_channel.png" class="1ch">
<img src="img/temp_channel.png" class="2ch">
<img src="img/temp_channel.png" class="3ch">
<img src="img/temp_channel.png" class="4ch">
<img src="img/temp_channel.png" class="5ch">
<img src="img/temp_channel.png" class="6ch">
<img src="img/temp_channel.png" class="7ch">
<img src="img/temp_channel.png" class="8ch">
</body>
</html>
I've been able to position an image above an iframe before, but I don't see why these imgs aren't recognizing the class.
(at least I know it's not as "basic" as I originally though, thanks :) )
Also, I don't know if the same rule applies to class names, but id values must begin with a letter (they can't start with a number). Thus an id value of "1ch" would be invalid. Not sure if that rule also applies to class names, but you might try renaming your class to begin with a letter.
Also, I don't know if the same rule applies to class names, but id values must begin with a letter (they can't start with a number). Thus an id value of "1ch" would be invalid. Not sure if that rule also applies to class names, but you might try renaming your class to begin with a letter.
Just did a little research concenring class naming conventions. It appears that class names can start with a number. However, if viewing the pages in Mozilla/Firefox, the page will not be rendered correctly.
See, I knew it was somethng basic ;)
Thank you very much for the extra set of eyeballs.
Which states:
In CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Only properties, values, units, pseudo-classes, pseudo-elements, and at-rules may start with a hyphen (-); other identifiers (e.g. element names, classes, or IDs) may not. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
