Forum Moderators: not2easy
The problem I'm having is kinda hard to explain, cause I don't know how...but here goes.
I have a page with the left bar floated and the content section positioned absolute. What happens is that when displayed in a browser I cannot access links or form fields inside the content section. What I mean by this is that I cannot click on a link (the cursor does not change or become clickable) and form fields cannot be filled (it does not accept the cursor into the box). Also I cannot select text.
This only happens up until the left bar ends. If the content section is longer than the leftbar section everything underneath the end of the leftbar works fine. Links are clickable and form fields are fillable.
I don't know if this is a styling issue or a html issue. I am including both, so if anybody has an idea of what's going on, pls, pls... I don't know what to do. Thing is I have to use absolute positioning and it's a real headache from day 1.
To anyone wanting to work with abs positioning: don't! unless you abs have to.... :(
Here is the css code:
#lft{float:left;width:133px;margin-left:10px;}
#lft-mnu{width:100%; background-color:#cccccc; padding-left:15px;}
#lft-mnu h4{color:#cc0000; padding-top:30px; font-size:12px; font-family:Verdana;}
#lft-mnu ul {list-style:none; padding-bottom:2px; margin: 0;}
#lft-mnu a {font-family:Verdana; font-size:10px; color: #000; text-decoration: none;}
#lft-mnu a:hover {text-decoration: underline;}
#lft-mnu li li a {font-family:Verdana; font-size:10px; color: #000; padding:0px 0px 0px 10px;}
#lft-mnu li li a:hover {text-decoration: underline;}
#lft-mnu li {padding-top:1px; padding-bottom:1px; font-family:Verdana; font-size:10px; color: #000;}
#pg-cnt{z-index:-1; position:absolute; left:170px; top:215px; bottom:100px; width:414px; margin-left:20px; font-size:11px; color:#000; font-family:Verdana; font-weight:normal;}
#pg-cnt h2{display:block; font-size:13px; color:#cc0000; font-family:Verdana; font-weight:bold;}
Here is the html to render the page:
<div id="lft">
<div id="lft-mnu">
<h4>Shortcutz Heading</h4>
<ul>
<li><a href="#">Item Heading</a></li>
<li>Item Heading</li>
<ul>
<li><a href="#">- Item 1</a></li>
<li><a href="#">- Item 2</a></li>
<li><a href="#">- Item 3</a></li>
<li><a href="#">- Item 4</a></li>
<li><a href="#">- Item 5</a></li>
</ul>
</ul>
</div>
</div>
<div id="pg-cnt">
<div class="p-tx">
Text to fill the content section
</div>
<div class="p-tx">
Text to fill the content section
</div>
</div>
[edited by: SuzyUK at 5:51 pm (utc) on Dec. 22, 2004]
[edit reason] fixed horizontal scrollism [/edit]
#pg-cnt{z-index: -1;......
that z-index is stacking the content div behind everything else. Try making it a positive number
Suzy
Thank you for the reply. that did the trick indeed.
My how easy.
thanks again.
Cor
