Forum Moderators: not2easy
CSS Code: (left out footer items)
body { margin:1px; font-size:1.0em; line-height:20px; background-color:#000000; font-family: "Trebuchet MS", "Myriad Pro", Arial;}
a { color:#ffffff;}
a:hover { text-decoration:none;}
#container {}
#header { margin: 20px 0 0 0; }
#logo { padding:20px 50px 0px 1px; text-align:right; }
#logo a{color:#FFFFFF; text-decoration:none; font-weight:bold; height:45px; font-size:30px; text-transform:uppercase; outline-style:none;}
#logo a:hover { }
#sitelogo { z-index: 1; float: left; }
#logo-line { background: #000000
url(example.net/wp-content/uploads/shapeimage_6.jpg) no-repeat; height: 13px; width: 1004px; z-index: -1; position: absolute; top:120px; left: 5px; }
#tagline { color:#FFFFFF; font-weight:normal; font-size:15px; text-transform:uppercase;}
#menu { background:#000000; width:825px; position: absolute; top:140px; left:155px; height:25px; clear:both; background-color: #333333; padding: 1px 0 15px 0; _padding: 10px 0 0 0;}
#menu ul {
margin-top: 0;
padding-left: 20px;
padding-right: 5px;
_padding-left: 10px;
_padding-right: 20px;
list-style: none;
text-align: left;
}
#menu ul li{ display:inline; outline-style:none; width:100px; line-height: 32px; font-size:16px; margin: 0 20px 0 0; }
#menu a:hover{
color:#E6E6FA; text-decoration: none; outline-style:none;
}
#main { width:100%; position: relative; top: -35px; z-index: -1; _top: -62px;}
#content { margin:7px; padding:0px; width:899px; padding:50px 50px 50px 50px; _padding:70px 50px 50px 50px; color:#ffffff; background:#000000; background-image: url(images/gradient.jpg); background-repeat: repeat-x; }
#content h1 { padding: 30px 0 15px 0; margin:0; text-transform:uppercase; font-size:1.5em; color:#ffffff; width:500px; padding:5px; margin-top:20px;}
#content h2 { margin: 30px 0 10px 0; text-transform:uppercase; font-size:1.5em; color:#000000; background:#000000; width:950px; padding:5px; margin-top:20px;}
#content h2 a { color:#ffffff; text-decoration: none;}
#content h2 a:hover { color:#ffffff;}
HTML Code:
<body>
<div id="container">
<!-- header -->
<div id="logo-line" >
</div>
<div id="header">
<div id="sitelogo"> <img src="header2.gif" alt="home" /> </div>
<div id="logo"><a href="#">Custom Builder</a>
<div id="tagline">County, Country TEST </div>
</div>
<center><div id="menu">
<ul>
<li><a href="#">TEXT</a>
<li><a href="#">TEXT</a>
</ul>
</div></center>
</div>
<div style="clear:both;"> </div>
<!--end header -->
<!-- main -->
<div id="main">
<div id="content">
<div class="post" id="post-5">
<h1>TEXT</h1>
<div class="entry">
<p><DIV align="center"><br />
<img src="a.gif" width="800" height="100" style="border: 5px solid #000000;">
</div>
</p>
<table style="text-align: center;" border="0">
<tbody>
<tr>
<td><img src="a.jpg" alt="" hspace="15" vspace="3" width="240" height="339" /></td>
</tr>
</tbody>
</table>
<p class="spaced6" style="text-align: center;">
<p style="margin: 10px 120px; text-align: center; font-size: 1.2em; text-transform: uppercase; color: #f5f5f5; font-family: times new roman; line-height: 1.3em;">TEXT TEXT TEXT</p>
<p style="margin: 10px 120px; text-align: center; font-size: 1.2em; text-transform: uppercase; color: #f5f5f5; font-family: times new roman; line-height: 1.3em;">TEXT TEXT TEXT</p>
888THESE IS THE LINKS THAT DO NOT WORK*******
<p style="text-align: center; font-size: 1.2em; font-family: times new roman; line-height: 3em;">
<a href="#">TEST TEXT TEXT<br />
TEXT</a><br />
<a href="#" target="_blank">TEXT TEXT TEXT</a>
<a href="#" target="_blank">TEXT TEXT TEXT</a><br />
<a href="#">TEXT TEXT TEXT</a> <a href="#">TEXT TEXT TEXT</a>
</p>
<p class="spaced3" style="text-align: center;">
<div style="text-align: center;">
<div style="margin: 20px; padding: 10px; width: 525px; height: 100px;">
<p style="background: #333333 none repeat scroll 0% 0%; font-size: 1.2em; line-height: 1.5em;">TEXT TEXT TEXT</p>
</div>
</div>
</div>
</div>
Thank you in advance for any fixes or recommendations.
[edited by: SuzyUK at 8:11 pm (utc) on Sep. 9, 2008]
[edit reason] examplified/removed URI's please see TOS again! [/edit]
<p class="spaced6" style="text-align: center;">
<p ...
I think you're omitting the close tags.
Try a validatoin service e.g.: [validator.w3.org...] and [jigsaw.w3.org...]
But that's not the problem. I got the document to validate, links still don't work.
I cut all your CSS, it's fine. By trial and error, cutting out portions of the CSS, I tracked it to this:
#main { width:100%; position: relative; top: -35px; z-index: -1; _top: -62px;}
Remove the z-index, or set it to a positive value (1, and set all other z-index above that) and it appears to work. I'll leave it to you and others to figger out why. :-)
I'm pretty sure z-index can only be positive numbers. I've never seen or heard of _top used in a selector, so don't know if the browser will even parse that.
When working with z-index, it's a good idea to set the indices in larger increments so you can insert other "layers" between, like
z-index:100;
z-index:500;
z-index:1000;
z-index:5000;
I'm pretty sure z-index can only be positive numbers.
Nice to know - thanks rocknbil ;)
I've never seen or heard of _top used in a selector, so don't know if the browser will even parse that.
