SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin (?) problem in IE6

    I have two floating DIVs.
    It is fine in Firefox and IE7, but in IE6 there is white space below them.
    There shouldn't be a gap above the bottom blue line.
    Attached Images Attached Images

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It will take a while for you image to be approved, even then it will not help us since we can't debug images.

    Please post a link to the page or post a test case of the code (css & html) and then we can see what is going on.

    If the page is fine in IE7 then it may be an expanding box problem with IE6, hard to say until we see some code.

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the html file

    Code:
    <!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>
    <title>Website</title>
    <link rel="stylesheet" href="drv.css" type="text/css" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    <!--
    div#leftbox
    {
    	width:365px;
    }
    
    div#rightbox
    {
    	width:435px;
    }
    
    div#leftbox h3
    {
    	margin-top:200px;
    	color:#076cb0;
    }
    
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
    
    <div id="nav">
    <ul>
    	<li><a href="index.html" class="current">Home</a></li>
    	<li><a href="theater.html">Theater</a></li>
    	<li><a href="music.html">Music</a></li>
    	<li><a href="film.html">Film</a></li>
    	<li><a href="press.html">Press</a></li>
    	<li><a href="bio.html">Bio</a></li>
    	<li><a href="news.html">News</a></li>
    	<li><a href="links.html">Links</a></li>
    	<li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
    
    <div id="content">
    
    <div id="leftbox">
    <h3>Click on and enjoy ...</h3>
    </div>
    
    <div id="rightbox">
    <p><img src="photo.jpg" width="435" height="510" alt="" /></p>
    <p id="myspacelogo"><a href="http://www.myspace.com"><img src="myspace_logo.jpg" width="89" height="30" alt="Myspace logo" /></a></p>
    </div>
    
    </div> <!-- content -->
    
    <div id="footer">
    <p>&copy;2010</p>
    </div>
    
    </div> <!-- container -->
    
    </body>
    </html>

    the css file
    Code:
    *
    {
    	margin:0;
    	padding:0;
    }
    
    body
    {
    	font-family:Verdana,Geneva,sans-serif;
    	background:#ffffff;
    	color:black;
    	font-size:12px;
    }
    
    h3
    {
    	font-size:20px;
    	color:#999999;
    }
    
    h4
    {
    	font-size:16px;
    }
    
    div#container
    {
    	margin-left:auto;
    	margin-right:auto;
    	width:800px;
    	text-align:center;
    }
    
    div#nav
    {
    	border-top:3px #000000 solid;
    	text-align:right;
    	border-bottom:1px #007fd4 solid;
    }
    
    div#nav li
    {
    	list-style-type:none;
    	display:inline;
    	margin-left:10px;
    }
    
    div#nav ul
    {
    	padding:5px 0;
    }
    
    div#nav a
    { 
    	font-size:13px;
    	font-weight:bold;
    	text-decoration:none;
    	letter-spacing:1px;
    	color:#000000;
    }
    
    div#nav a:hover
    { 
    	color:#007fd4;
    }
    
    div#leftbox
    {
    	height:510px;
    	float:left;
    	text-align:left;
    }
    
    div#leftbox div#text1
    {
    	margin-top:15px;
    	width: 330px; 
    	height: 440px; 
    	overflow: auto;
    	color:#1c1c1c;
    }
    
    div#leftbox div#text1 p
    {
    	margin-bottom:6px;
    }
    
    
    div#rightbox
    {
    	float:left;
    	height:510px;
    	text-align:right;
    }
    
    div#rightbox p#myspacelogo
    {
    	position:relative;
    	text-align:right;
    	top:-481px;
    }
    
    div#footer
    {
    	clear:both;
    	padding-top:10px;
    	font-size:10px;
    	border-top:3px #007fd4 solid;
    }

    I have a feeling that the relative positioning of the Myspace logo gif file is causing the white space.

    I am not sure what is the best way to move it to the top right corner without using relative positioning.

    Any pointers greatly appreciated.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Yes, IE6 was stretching the div#rightbox due to it's expanding box bug.

    I would absolute position (AP) the p#myspacelogo over the other image and that will eliminate any problems with relative positioning (RP).

    RP elements preserve their original space in the document and the box is only moved visually. That is why IE6 was showing the space below along with the expanding box bug.

    Try this instead -

    Code:
    div#rightbox
    {
        float:left;
        height:510px;
        text-align:right;
        overflow:hidden;/* stop IE6 from expanding box*/
        position:relative;/*establish containing block for AP #myspacelogo */
    }
    
    div#rightbox p#myspacelogo 
    {
        position:absolute;
        top:0;right:0;
    }

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you explain further why
    Code:
    position:relative;/*establish containing block for AP #myspacelogo */
    is needed?

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    As the comment in the css says, the position:relative; was so that div#rightbox would become the containing block for AP children. That way the AP children will position from the div#rightbox div since it is the nearest positioned ancestor.

    You can learn more about positioning and containing blocks here in the SitePoint Reference.
    http://reference.sitepoint.com/css/containingblock

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah


    If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative. The containing block is formed by the padding edge of that ancestor.


    is the relevant passage that applies to my case?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you have a position:absolute element, it will wonder "where should I be?"

    It will look for the nearest parent that has a position on it. Absolute/relative ETC!

    IF one isn't found then it uses the viewport (<html>)

    Normally the closer parent you have a position on (for absolute elements) the better. More consistant results to what you want.

    So to answer your question-yes. I just wanted to explain it myself
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  9. #9
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    NJ
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome . Glad to help.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!


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
  •