SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Houston i have a problem

    My problem is with dear explore 7

    I have a div which contains to divīs

    The parent div is set to position:relative so i can make use of absolute postion.

    The left child div works fine - it is postioned left:0 according to its parent but the div which is set to right:0 also postions to the left in ie7

    It works like a charm in firefox and ie8
    I havenīt tested on safari yet

    Have anybody experienced something simular and better yet does anybody have a solution to the problem?

    Hoping for help

    Kasper

  2. #2
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried adding different values to the "right:0"?

    Maybe make it something like, right:400 to push it 400px...they are both positioned the same, relative to the parent container. So the right one should either float:right or maybe use a margin to push it over.

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This works for all major browsers and also for all IE including 5.5, 6, 7 and 8.
    If you look at it closely you will probably find where you are having your problem.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Div positioning</title>
    <style type="text/css">
    <!--
    body { margin-top:3px; margin-left:0px; text-align:center; }
    #outer { position:relative; top:0px; left:0px; width:500px; height:500px; border:1px solid #666; margin-left:auto; margin-right:auto; }
    #leftDiv { position:absolute; top:10px; left:10px; width:100px; height:100px; border:1px solid #F00; }
    #rightDiv { position:absolute; top:10px; right:10px; width:100px; height:100px; border:1px solid #F00; }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="outer">
      <div id="leftDiv">
      </div>
      <!-- end leftDiv -->
      <div id="rightDiv">
      </div>
      <!-- end rightDiv -->
    </div>
    <!-- end outer -->
     
    </body>
     
    </html>

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No im afraid ie7 seems to ignore absolute right so it dosnt help me to say 400px instead of 0px.

    Besides i wanna make sure that the content is set exactly to the absolute right of itīs parent.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx allan i will take a further look at it and let you know if i have seen the light :-)

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope the light didnīt shine back on me.
    My css looks like this

    #nav-below {float:left; width:660px; padding:0 0 30px; position:relative;}
    #nav-below .nav-previous {position:absolute; left:0;}
    #nav-below .nav-next {position:absolute; right:0;}

  7. #7
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Can you send us a link to the actual page?

  8. #8
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also do it using float instead of position

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                #container {
                    width: 600px;
                    border: 1px solid black;
                    overflow: hidden
                }
                #leftChild {
                    width: 30%;
                    background-color: green;
                    height: 200px;
                    float: left
                }
                #rightChild {
                    width: 30%;
                    background-color: blue;
                    height: 200px;
                    float: right
                }
     
            </style>
        </head>
        <body>
     
            <div id="container">
     
                <div id="leftChild"></div>
                <div id="rightChild"></div>
     
            </div>
     
        </body>
    </html>

    or if you must use position

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                #container {
                    width: 600px;
                    position: relative;
                    border: 1px solid black;
                    height: 200px
                }
                #leftChild {
                    width: 30%;
                    background-color: green;
                    height: 200px;
                    position: absolute;
                    top: 0px;
                    left: 0px
                }
                #rightChild {
                    width: 30%;
                    background-color: blue;
                    height: 200px;
                    position: absolute;
                    top: 0px;
                    right: 0px
                }
     
            </style>
        </head>
        <body>
     
            <div id="container">
     
                <div id="leftChild"></div>
                <div id="rightChild"></div>
     
            </div>
     
        </body>
    </html>

  9. #9
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Your CSS applied as follows renders in IE7 with the content positioned to the left and right of #nav-below. To pin down your problem we'll need to see your full code.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     
    <title>abo2512</title>
    <style type="text/css" media="screen">
    #nav-below {float:left; width:660px; padding:0 0 30px; position:relative;}
    #nav-below .nav-previous {position:absolute; left:0;}
    #nav-below .nav-next {position:absolute; right:0;}
    </style>	
    </head>
     
    <body>
    <div id="nav-below">
    <div class="nav-previous">left</div>  
    <div class="nav-next">right</div>
    </div>
     
    </body>
    </html>

  10. #10
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Denmark
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    The issue was a span inside the child div
    I had set it to float:rigtht; and display:block

    HTML Code:
    				<div id="nav-below" class="navigation">
    					<div class="nav-previous"><a href="http://localhost/wordpress/97" rel="prev"><span class="meta-nav"></span> Older</a></div>
    					<div class="nav-next"><a href="http://localhost/wordpress/nyhed-nr-1" rel="next">Newer <span class="meta-nav"></span></a></div>
    				</div><!-- #nav-below -->
    I removed float:right and display:block and it now works also in ie7

    Thx for all the responses
    Hope to help you some day

    Cheers


Tags for this Thread

Bookmarks

Posting Permissions

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