Overlapping div-blocks when using relative positioning

Discussion in 'CSS' started by Nic_soft, Apr 28, 2009.

  1. #1
    Hello,

    I am trying to lay out some div-blocks but I don't managed to do it without overlapping.

    I am only using relative positioning. I thought that it wasn't possible for them to overlap when using relative positioning. I am using Struts on the page but view the source doesn't show anything suspicious.

    This is extremely frustrating, hope someone can help me out...

    Here is my css:

    #link_list{
    	font-weight: bold;
    	position: relative;  
    	top:100px;			
    }
    
    #heading_2 {
    	font-weight: bold;
    	position:relative;	
    	top:50px;
    		
    }
    
    #normal_text{
    	position:relative;	 
    	top:15px;
    	
    	}
    
    #end_link{
    	position:relative;	
    	top:15px;
    	
    	}
    Code (markup):
    and my JSP:

    
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
            <%@ taglib prefix="s" uri="/struts-tags" %>
        <% request.setCharacterEncoding("ISO-8859-1"); %>    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" href="../resources/css/mobiletrainingstyle.css" type="text/css" media="screen">
    <title>Insert title here</title>
    </head>
    <body>
    <h2><a name="top">Frågor och svar</a></h2><br>
    <div>
    	<s:iterator value="qaList">
            <div id="link_list"><a href="#<s:property value='%{heading}'/>"><s:property value="%{heading}"/></a></div>    
        </s:iterator>   
    </div>
    	<s:iterator value="qaList">
            <div id="heading_2"><a name="<s:property value='%{heading}'/>"><s:property value="%{heading}"/></a></div>
            <div id="normal_text"><s:property value="%{answer}"/></div>
            <div id="end_link"><a href="#top">Upp</a></div>                
        </s:iterator>             
    </body>
    </html>
    Code (markup):
    Thank you in advance!

    Regards,
    Niklas
     
    Nic_soft, Apr 28, 2009 IP
  2. booyahdesigners

    booyahdesigners Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you clarify which browser you're testing on, and perhaps include a screenshot of what you want the end-result to be? IE6 will probably choke on most relative positioning schemes.
     
    booyahdesigners, Apr 28, 2009 IP