Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    text wont stay inside <li> tag

    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:
    Code:
    <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:
    Code:
    .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

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Plz share full code of your page or link of it,,,,


    I ll try to help you out


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •