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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to stop <div> layers from overlapping

    I am having problems with my <div> layers overlapping when the user resizes their browsers. For example, when the user makes their browser smaller, the <div> layers overlap. Instead I want the scroll bars to show up? Any idea how i can achieve this?

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by sushi4664 View Post
    Instead I want the scroll bars to show up? Any idea how i can achieve this?
    Try using min-width. Then return if you need help tweaking it for IE6.

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yea...I am using it. The thing is, if you goto napkinz.com (thats the site that I am working on) and make the browser smaller, the right div lay goes under the main div layer...how do I stop that, since they are two separate div layers?

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by sushi4664 View Post
    how do I stop that, since they are two separate div layers?
    You have absolutely positioned your #right column:
    Code:
    #right{
     position:absolute;
     top: 20px;
     right: 20px;
     width: 210px;
     background:#FFF428;
     border: 2px solid #333333;
     color: #333333;
     margin: 0px;
     padding: 0px;
     height: auto;
     z-index:1;
    }
    The offset properties top and right are here measured with respect to the containing block. Since none of its ancestors are positioned its containing block is the initial containing block. Therefore it is following the viewport as you resize the window.

    (1)
    You will need to set e.g.:
    Code:
    #container {
      position: relative;
    }
    (2)
    Your min-width of 950px does not suffice to prevent overlap.

    (3)
    Are you aware that your page is rendered in quirks mode because you have no doctype declaration. This may cause you head ache in the future. If you don't know the difference between quirks mode and standards mode here is a place to start: Quirks mode and strict mode

  • #5
    New Coder
    Join Date
    Apr 2007
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok...so i setup the #container, but there is still a problem, and now there is a huge gap between my #main and #right divs.

    I realize I don't have a doctype declaration, but every time I include one, the seachboxes on the #right div start acting weird. What happens is that the submit button image and the input box dont follow the css attributes i put on them, and they become disproportional.

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by sushi4664 View Post
    ok...so i setup the #container, but there is still a problem, and now there is a huge gap between my #main and #right divs.

    I realize I don't have a doctype declaration, but every time I include one, the seachboxes on the #right div start acting weird. What happens is that the submit button image and the input box dont follow the css attributes i put on them, and they become disproportional.
    You have this:
    Code:
    body{
     margin: 0px; padding: 0px;
     width: 1200px;;
     background:#FE7A3C;
    }
    In IE quirks mode you cannot set an explicit width for the body element. It will be ignored. This is not the case in Firefox's quirks mode.

    I strongly recommend that you don't work in quirks mode. I do not know about the problems that you were seeing after adding the doctype declaration, but probably it's your code that is the problem.

    Here is my advice.
    (1)
    Put in this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    (2)
    Make changes to your CSS and HTML so that it looks as close to what you want in Firefox. Worry about IE afterwards.
    (3)
    Fix errors so that your HTML and CSS validate.

    After doing this, or if you have trouble with the above, repost. Then some of us may take a look at it.

  • #7
    New Coder
    Join Date
    Apr 2007
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation kinda solved

    Its solved!!!

    But with it came more problems....yay?

    I was able to stop <div> layers from overlapping but now I am having the following problems:

    If you open napkinz.com in IE (i did it in IE 7, I don't have IE 6, but if someone does, I would like to know what happens). But if you open it and then click the horizontal bar, IE says there is an error. I am totally confused?

    Also if you open napkinz.com in Firefox, and use the horizontal scroll to scroll all the way to right, you will notice there is a lot of empty space. How would I go about making that disappear?

    Any help would be very helpful!

  • #8
    New Coder
    Join Date
    Apr 2007
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I worked on it a bit more:

    So now I have the following CSS code:

    Code:
    #main {
    background:#FFFFFF none repeat scroll 0%;
    color:#333333;
    margin:10px 240px 10px 10px;
    min-width:730px;
    padding:20px;
    width:auto;
    z-index:1;
    }
    
    #header {
    background:#FFFFFF none repeat scroll 0%;
    color:#333333;
    margin:10px 240px 10px 10px;
    padding:0px 0px 0px 40px;
    min-width:730px;
    z-index:2;
    }
     
    #authCom{
    margin:10px;
    text-align:left;
    }
    
    div#footer{
    clear: both;
    padding: 0px;
    margin: 0px;
    width: 100%;
    background: #FFCC33;
    height: 20px;
    }
     .style2{
     color: #333333;
     font-weight: bold;
     font-size: 11px
     }
     .style3 {
        color: #333333;
        font-weight: bold;
        font-size: 12px;
    }
    .style1{
        color: #333333;
        font-weight:normal;
        font-size: 14px;
        text-align:justify;
        
    }
    
    .f1{
     height:18px; width:178px;
    }
    
    a:link    { color: #333333 }
    a:visited { color: #333333 }
    a:hover   { color: #FF6600 }
    a:active  { color: #FF6600 }
    
    #dashed {
        width:80%;
        height:80%;
        padding:10px;
        margin:9.5px;
        border:1px dashed #000000;
    } 
    
    /*Nifty Corners Cube CSS by Alessandro Fulciniti
    The following classes are added dinamically by javascript,
    and their use should be avoided in the markup */
    
    b.niftycorners,b.niftyfill{display:block}
    b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
        overflow:hidden;border-style:solid;border-width: 0 1px}
    /*normal*/
    b.r1{margin: 0 3px;border-width: 0 2px}
    b.r2{margin: 0 2px}
    b.r3{margin: 0 1px}
    b.r4{height: 2px}
    b.rb1{margin: 0 8px;border-width:0 2px}
    b.rb2{margin: 0 6px;border-width:0 2px}
    b.rb3{margin: 0 5px}
    b.rb4{margin: 0 4px}
    b.rb5{margin: 0 3px}
    b.rb6{margin: 0 2px}
    b.rb7{margin: 0 1px;height:2px}
    b.rb8{margin: 0;height:2px}
    b.rs1{margin: 0 1px}
    /*transparent inside*/
    b.t1{border-width: 0 5px}
    b.t2{border-width: 0 3px}
    b.t3{border-width: 0 2px}
    b.t4{height: 2px}
    b.tb1{border-width: 0 10px}
    b.tb2{border-width: 0 8px}
    b.tb3{border-width: 0 6px}
    b.tb4{border-width: 0 5px}
    b.tb5{border-width: 0 4px}
    b.tb6{border-width: 0 3px}
    b.tb7{border-width: 0 2px;height:2px}
    b.tb8{border-width: 0 1px;height:2px}
    b.ts1{border-width: 0 2px}
    The page works in Firefox and Netscape with one glich, the bottom scroll bars don't work. In IE and Opera the #right <div> is again overlapping others. I don't know how it is working with Safari because I don't own a Mac. The reason for the big empty space was that the "pop-up" (which I have deleted) was an invisible div with a width that was huge. And therefore the browser resized to that causing a huge gap between my #right div and my left end of the browser.

    So any help would be really nice!

    Thanks

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by sushi4664 View Post
    The page works in Firefox and Netscape with one glich, the bottom scroll bars don't work.
    You have this:
    Code:
    html{
     min-width:1030px;
    }
    It appears that Firefox 2 may forget to provide the default horizontal scrollbar when one specifies an explicit width or min-width for the html element.

    I checked with the Gran Paradiso Alpha 4 (Firefox 3) where the issue fortunately seems to be fixed.

    Your solution must be to instead apply the min-width to the body element. This would also be the usual approach.

  • #10
    New Coder
    Join Date
    Apr 2007
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yea, I tried that, and that is now what is up on the site, but now every browser lets the right div overlap the main....I am back where I started .....

    This is soo frustrating....

    But thanks for the help and any more would be really helpful....

  • #11
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by sushi4664 View Post
    Yea, I tried that, and that is now what is up on the site, but now every browser lets the right div overlap the main....I am back where I started
    You have absolutely positioned your #right sidebar. But it has no positioned ancestor!

    The positioning context for an absolutely positioned elements is its containing block. It is explained in CSS 2.1 Working Draft, section 10.1 how such a containing block is established. In particular, when an absolutely positioned element has no positioned ancestor the containing block defaults to the initial containing block.

    Although it seems to be unclear from the specs what the 'initial containing block' is, browsers will usually take the html element.

    Your solution is to establish the body element as the containing block for #right:
    Code:
    body {
      position: relative;
    }

  • #12
    New Coder
    Join Date
    Apr 2007
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok...I am getting somewhere....

    Like if you would go to napkinz.com right now, you would notice that the right div is not aligned right. It has "fallen down" and needs to be moved up a bit/a lot.

    Here is the new CSS code:
    Code:
    body{
     margin: 0px; padding: 0px;
     background:#FE7A3C;
     min-width:1035px;
     } 
     
    #contain{
    position: relative;
    min-width: 1035x;
    border: none;
    margin: 0 auto; padding: 0;
    }
    
    #header, #main, #right {
    border:2px solid #333333;
    position:relative;
    float:none;
    margin:0px;padding:0px;
    }
    
    #right {
    background:#FFF428 none repeat scroll 0%;
    color:#333333;
    margin:0px;
    margin-left:20px;
    padding:0px;
    float:right;
    right:10px;
    width:210px;
    z-index:3;
    }
    
    #main {
    background:#FFFFFF none repeat scroll 0%;
    color:#333333;
    margin:10px 240px 10px 10px;
    min-width:730px;
    padding:20px;
    width:auto;
    z-index:1;
    }
    
    #header {
    background:#FFFFFF none repeat scroll 0%;
    color:#333333;
    margin:10px 240px 10px 10px;
    padding:0px 0px 0px 40px;
    min-width:730px;
    z-index:2;
    }
     
    #authCom{
    margin:10px;
    text-align:left;
    }
    
    div#footer{
    clear: both;
    padding: 0px;
    margin: 0px;
    width: 100%;
    background: #FFCC33;
    height: 20px;
    }
     .style2{
     color: #333333;
     font-weight: bold;
     font-size: 11px
     }
     .style3 {
        color: #333333;
        font-weight: bold;
        font-size: 12px;
    }
    .style1{
        color: #333333;
        font-weight:normal;
        font-size: 14px;
        text-align:justify;
        
    }
    
    .f1{
     height:18px; width:178px;
    }
    
    a:link    { color: #333333 }
    a:visited { color: #333333 }
    a:hover   { color: #FF6600 }
    a:active  { color: #FF6600 }
    
    #dashed {
        width:80%;
        height:80%;
        padding:10px;
        margin:9.5px;
        border:1px dashed #000000;
    } 
    
    /*Nifty Corners Cube CSS by Alessandro Fulciniti
    The following classes are added dinamically by javascript,
    and their use should be avoided in the markup */
    
    b.niftycorners,b.niftyfill{display:block}
    b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
        overflow:hidden;border-style:solid;border-width: 0 1px}
    /*normal*/
    b.r1{margin: 0 3px;border-width: 0 2px}
    b.r2{margin: 0 2px}
    b.r3{margin: 0 1px}
    b.r4{height: 2px}
    b.rb1{margin: 0 8px;border-width:0 2px}
    b.rb2{margin: 0 6px;border-width:0 2px}
    b.rb3{margin: 0 5px}
    b.rb4{margin: 0 4px}
    b.rb5{margin: 0 3px}
    b.rb6{margin: 0 2px}
    b.rb7{margin: 0 1px;height:2px}
    b.rb8{margin: 0;height:2px}
    b.rs1{margin: 0 1px}
    /*transparent inside*/
    b.t1{border-width: 0 5px}
    b.t2{border-width: 0 3px}
    b.t3{border-width: 0 2px}
    b.t4{height: 2px}
    b.tb1{border-width: 0 10px}
    b.tb2{border-width: 0 8px}
    b.tb3{border-width: 0 6px}
    b.tb4{border-width: 0 5px}
    b.tb5{border-width: 0 4px}
    b.tb6{border-width: 0 3px}
    b.tb7{border-width: 0 2px;height:2px}
    b.tb8{border-width: 0 1px;height:2px}
    b.ts1{border-width: 0 2px}
    Here is the PHP/HTML code (its a dynamic page):
    Code:
    <? 
    include("../newsConfig.php");
    include("../comicConfig.php");
    $sid="956821";
    include("/home/napkinzc/public_html/stats/write_logs.php");
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>NAPKINZ - HOME - Update Every Sunday</title>
    <meta name="verify-v1" content="oiYH+uqjBdcLpcIDoYAWIRwWkiKf/naNgQjlT6rFvkg=">
    <meta name="resource-type" content="document">
    <meta name="Generator" content="napkinzc Tag Generator">
    <meta name="revisit-after" content="5">
    <meta name="classification" content="Entertainment">
    <meta name="description" content="A funny web comic created by Yanni Davros">
    <meta name="keywords" content="napkinz, napkins, napkin, cartoon, comic, funny, yanni, davros, yanni davros, art">
    <meta name="rating" content="General">
    <meta name="copyright" content="2007">
    <meta name="author" content="Ayush Sood">
    <meta http-equiv="reply-to" content="napkinz@napkinz.com">
    <meta http-equiv="Content-Language" content="English">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="alternate" type="application/rss+xml" title="The Official Napkinz Feed" href="http://napkinz.com/rss.php">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script language="JavaScript" type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="niftycube.js"></script>
    <script type="text/javascript">
        window.onload=function()
        {
            Nifty("div#footer","normal fixed-height");
        }
    </script>
    </head>
    <?
    require('/home/napkinzc/unhide.php');
    require('/home/napkinzc/unhideComment.php');
    unhide();
    unhideComment();
    ?>
    <body>
    <div id="contain">
    <!-- START OF ACTUAL BODY //-->
    <div id="header" align="right">
        <img src="images/top.gif" alt="header" width="50%">
        <p align="center" class="style3"><a href="index.php">HOME</a> | <a href="products.php">PRODUCTS</a> | <a href="archive.php">ARCHIVE</a> | <a href="napkinz.php">ABOUT NAPKINZ</a> | <a href="cartoonist.php">ABOUT THE CARTOONIST</a> | <a href="contact.php">EMAIL US</a></p>
    </div>
    <!--HEADER ENDS START OF MAIN CONTENT //-->
    <div id="main" class = "style3">
        <div align="center">
            <? if($strip_id != 0) {print("<a href=\"?strip_id=0\">First Comic</a>");} ?>&nbsp;&nbsp;&nbsp;<? if($strip_id > 0) {$x = $strip_id-1; print("<a href=\"?strip_id=$x\">Previous Comic</a>");} ?>&nbsp;&nbsp;&nbsp;<? if( (($strip_id+1) < sizeof($comic)) && validDate($comic[($strip_id+1)])) {$x = $strip_id+1; print("<a href=\"?strip_id=$x\">Next Comic</a>");} ?>&nbsp;&nbsp;&nbsp;<? if( (validDate($comic[($strip_id+1)])) && ($strip_id != sizeof($comic)-1)) {print("<a href=\"?\">Today's Comic</a>");} ?><p align = "left"><br /><br /><? print("$titleStrip[$strip_id]");?>&nbsp;</p><img src=<? print("\"{$directoryComics}{$comic[$strip_id]}\""); ?> width="95%" border="0" alt="Comic">
        </div>
        <br />
        <div align="center">
            <script type="text/javascript"><!--
            google_ad_client = "pub-1198548217340900";
            google_ad_width = 728;
            google_ad_height = 90;
            google_ad_format = "728x90_as";
            google_ad_type = "text";
            //2007-04-30: NapkinzBottom
            google_ad_channel = "0048481088";
            google_color_border = "FE7A3C";
            google_color_bg = "FFFFFF";
            google_color_link = "000000";
            google_color_text = "000000";
            google_color_url = "000000";
            //-->
            </script>
            <script type="text/javascript"
              src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>
        <br />
        <!--FOOTER //-->
        <div id = "footer">
            <p class = "style3" align="center"><a href="napkinz.php">About Napkinz </a> | <a href="cartoonist.php">About The Cartoonist </a>| <a href="policy.php">Privacy Policy </a>| <a href="contact.php">Email Us  </a>| &copy;2007 NAPKINZ.COM </p>
        </div>
    </div>
    <!--RIGHT FRAME //-->
    <div id="right">
    <br />
        <div align="center">
            <script type="text/javascript"><!--
            google_ad_client = "pub-1198548217340900";
            google_ad_width = 200;
            google_ad_height = 200;
            google_ad_format = "200x200_as";
            google_ad_type = "image";
            //2007-04-30: NapkinzRightTop
            google_ad_channel = "2987546058";
            google_color_border = "FE7A3C";
            google_color_bg = "FFFF66";
            google_color_link = "000000";
            google_color_text = "000000";
            google_color_url = "000000";
            //-->
            </script>
            <script type="text/javascript"
              src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>
        <?
            
            // News parser
            for($i = 0; $i <= sizeof($news); $i++) // Will display new posts at the bottom
            // for($i = sizeof($news)-1; $i >= 0; $i--) // Will display new posts at the top
            // Choose one of the two above and "document out" the other one (put // in front of it)
            {
                if(dateSerial($news[$i]) >= dateSerial($comic[$strip_id]))
                if(dateSerial($news[$i]) < dateSerial($comic[$strip_id+1]) or dateSerial($comic[$strip_id+1]) == "19991130")
                {
                    include("{$directoryNews}{$news[$i]}");
                    $postTime = timeLong($news[$i]);
                    $postDate = dateLong($news[$i]);
                    $postAuthor = postInfo($news[$i], "modeAuthor");
                    $postE_Mail = postInfo($news[$i], "modeE_Mail");
            
        ?>
        <div id="authCom" class="style3">
            <? print("$postTitle"); ?>
            <br /><br />
            &nbsp;&nbsp;&nbsp;&nbsp;<? print("$postText"); ?>   
        <? }} ?>
        </div>
        <br />
    <div align="center" style="margin-left:8px;">                                 
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="left"><span class="style2">Sign Up for Newsletter:</span></td>
            </tr>
            <form id="newsletter" name="newsletter" action="newsletter.php" method="POST">
            <tr>
                <td width="76%" align="left" valign="top"><input id="EmailFrom" name="EmailFrom" class="f1"></td>
                <td width="24%" align="center" valign="middle"><a href="#"><img src="images/subscribe.gif" alt="go" height="17" width="17" border="0" onclick="newsletter.submit();"></a></td>
            </tr>
            </form>
            </table>
            <br />
            <!-- start of ohnorobot search code -->  
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="left"><span class="style2">Search Napkinz:</span></td>
            </tr>
            <form name="search" action="http://www.ohnorobot.com/index.pl">
            <tr>
                <td width="76%" align="left" valign="top"><input type="hidden" name="comic" value="723"><input name="s" class="f1"></td>
                <td width="24%" align="center" valign="middle"><a href="#"><img src="images/subscribe.gif" alt="go" height="17" width="17" border="0" onclick="search.submit();"></a></td>
            </tr>
            </form>
            </table>
            <div align="center">
              <span class="style2">Powered by <a href="http://www.ohnorobot.com">OhNoRobot.com</a></span>
            </div>
        <!-- End Ohnorobot.com code -->
        </div>
        <br />
        <div align="center">
            <table width="100%" border="0">
              <tr>
              <td class="style2">Napkinz RSS Feed:</td>
              </tr>
              <tr>
                <td align="center"><a href="http://napkinz.com/rss.php"><img align="middle" src="images/rss20.gif" border="0" width="80" height="15" alt="RSS" /></a></td>
              </tr>
              <tr>
                <td align="center"><a href="http://napkinz.com/atom.php"><img align="middle" src="images/atom10.gif" border = "0" width = "80" height = "15" alt="ATOM" /></a></td>
              </tr>
              <tr align="center">
              <td><a href="http://fusion.google.com/add?feedurl=http%3A//www.napkinz.com/rss.php"><img src="http://buttons.googlesyndication.com/fusion/add.gif" width="80" height="14" border="0" alt="Add to Google"></a></td>
              </tr>
              <tr>
              <td align="center"><a href="http://us.rd.yahoo.com/my/atm/Napkinz/The%20Official%20Napkinz%20Feed/*http://add.my.yahoo.com/rss?url=http%3A//napkinz.com/rss.php"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" width="80" height="15" border="0" align="middle" alt="Add to My Yahoo!"></a></td>
              </tr>
              <tr>
                <td align="center"><a href="http://english-87605547845.spampoison.com"><img align="middle" src="http://pics3.inxhost.com/images/sticker.gif" border="0" width="80" height="15" alt="Stop Spam" /></a></td>
              </tr>
              <tr>
                <td align="center"><a href='http://host-tracker.com/' onmouseover='this.href="http://host-tracker.com/website-uptime-statistics/328667/lvuc/";'><img 
    width=80 height=15 border=0 alt='tracker' 
    src="http://ext.host-tracker.com/uptime-img/?s=15&amp;t=328667&amp;m=00.59&amp;p=Total&amp;src=lvuc"></a><noscript><a href='http://host-tracker.com/' >web site monitoring</a></noscript></td>               
              </tr>
            </table>
        </div>
        <br />
        <div align="center">
            <script type="text/javascript"><!--
            google_ad_client = "pub-1198548217340900";
            google_ad_width = 180;
            google_ad_height = 60;
            google_ad_format = "180x60_as_rimg";
            google_cpa_choice = "CAAQ24Oy0QEaCH9Si1cjMAnSKMu293MwAA";
            google_ad_channel = "3113579803";
            //-->
            </script>
            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>
        <br />
    </div>
    <!-- end of right column -->
    </div>
    </body>
    </html>
    Any idea on how to make the right div higher?

    Thanks

  • #13
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by sushi4664 View Post
    Any idea on how to make the right div higher?
    Apparently, you have now decided to float your #right sidebar. You will have to put it before #header in your source to bring it to the top.

  • #14
    New Coder
    Join Date
    Apr 2007
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    You are a genius!!! Thank You!!

    The major problem has been solved but there are really small glitches that I would love to resolve... Now there are some problems with different browsers:

    IE7 (someone with IE6 tell me what is going on) - The right div starts by overlapping the main, but as soon as you resize the window it fixes itself? Very weird.

    Netscape and Firefox - The right div is a bit to down, needs to be moved up a bit... It fixes itself when I remove the top:10px; from the right div...but then IE and Opera don't work right.

    Opera - working beautifully...

    Anyone with Safari...let me know what is going on.

    Any ideas on how to fix this? I know I could use the "<!--[if IE]>" statements but I am trying to avoid that.

    Thanks A Huge Bunch!!!
    -sushi
    -visit http://napkinz.com/index.php - funny comic updated weekly

  • #15
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by sushi4664 View Post
    Netscape and Firefox - The right div is a bit to down, needs to be moved up a bit... It fixes itself when I remove the top:10px; from the right div...but then IE and Opera don't work right.
    I know of this issue, but not sure how to understand it. It has in part to do with margin collapsing and in part do with the effect of this in presence of floated elements.

    The following code shows that Firefox 2, Opera 9 and IE6/7 display in three different ways. I'm not sure about which browser is rendering the page correctly or if the differences are due to lacking precision in the CSS specs. Maybe someone else can tell us. Or maybe someone knows of a source describing the problem.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd"> 
    <html>
    <head>
    <title>Margin collapsing in presence of a float</title>
    <style type="text/css">
    #hello {
    	border: 5px solid green;
    	background: black;
    	color: white;
    }
    #container {
    	background: yellow;
    	color: black;
    }
    #left {
    	float: left;
    	width: 200px;
    	height: 300px;
    	border: 5px solid red;
    }
    #purple {
    	border: 5px solid blue;
    	margin-top: 50px;
    }
    </style>
    </head>
    <body> 
    <div id="hello">The div is followed by the yellow div.<br>The yellow div has no padding/border/margin and contains 2 elements:<br>1. A left float (red border).<br>2. A non-floated div with a top margin of 50px (blue border).<br><br>IE6 and 7 doesn't honor margin collapsing. Firefox 2 and Opera 9 do. But Opera 9 lets the float drift upwards outside its container?
    </div>
    <div id="container">
      <div id="left"></div>
      <div id="purple">Which browser is displaying this page correctly? IE, Firefox, or Opera?</div>
    </div>
    </body>
    </html>
    In your case, the solution is to remove the top margin from #header. Instead apply some top padding to #contain.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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