...

View Full Version : text wont stay inside <li> tag



surreal5335
07-10-2011, 08:57 AM
I have a piece of text that is ment to stay inside a <li> tag. There is an image and an <a> tag inside the <li> as well. I imagine this is pushing the limits on what the <li> is suppose to have in it, but it works so far in FF (please IE be good to me :P)

My only problem is the text wont stay in the <li> when I scroll down. The text stays in the place it initially loaded on the screen. I realize this is being caused by the position: fixed; attribute.

My question is, is there another way to get it to load inside the <li> and stay there? position: fixed was the only way I found so far of getting it there.

HTML:


<li id="intro_menu_1">
<a href="javascript:void(0);" id="intro_menu_1_a">

</a>
<p class="intro_menu_desc" id="intro_menu_1_desc" ><b>Game 1</b><br /><br />Lorem ipsum dolor sit amet,</p>
<img src="images/BMW-E81.png" alt="Intro menu image 1" class="intro_menu_image" id="intro_menu_1_image"/>
</li>



CSS:


.intro_menu li {
display: block;
position: relative;
z-index: 1;

height: 110px;
margin: 40px 0px;
}



.intro_menu li a
{
height: 100px;
width: 100%;
float: right;
margin: 0px;
padding: 0px;
line-height: 100px;
text-align: center;
font-size:1.1em;
color: #fff;

text-decoration: none;
border-width: 2px 2px 2px 2px;
border-style: solid;
border-color: #666;
background: gray;
opacity:0.60;
filter:alpha(opacity=60);
}

.intro_menu_image
{
position: absolute;
z-index: 2;
height: 120px;
width: 120px;
margin: 10px 5px;

}


.intro_menu_desc
{

position: fixed;
float: left;
margin: 20px 0px 10px 0px;
}


I appreciate the help

vikram1vicky
07-10-2011, 09:17 AM
Plz share full code of your page or link of it,,,,


I ll try to help you out :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum