SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Ontario Canada
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS layout problems >_< Im stumped

    Hi everyone,

    Ive been using CSS for about 4 years now, but this is the first time ive ever atempted a tableless layout. Ive read through pretty much every tutorial I could find on CSS layouts, and I think I have a pretty good understanding of how it works... though im still a little shaky.

    The problem that im having with my layout is with one little div block at the bottom of the page. It has to be set to "relative" for some reason, because if its set to anything else (or nothing) it jumps out of the white square container.

    I have it looking the way I want it in Firefox, but its pushed down really low in IE... and when I fix it for IE it messes up in Firefox. Ive been trying for days and I cant get that box to stay in the same place in Firefox and IE.

    Any help or suggestions will be much appreciated.

    html: http://www.allrpg.com/pepper/hotnewmedia/index.html
    css: http://www.allrpg.com/pepper/hotnewmedia/ie.css

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your iframe box has a height of 300px but your inner contents add up to 350px.

    Therefor mozilla obeys the wrapper and only allows the iframebox to be 300px. Ie on the other hand ignores the 300px and stretches the box gto 350px.

    This is why you have a 50px difference between the two. Your iframe box needs to be 350px to equal things out as below.
    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" >
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Hotnewmedia</title>
    <script type="text/javascript"></script>
    <style type="text/css" media="all">
     
    body {
    background: #474747;
    font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida,  helvetica, sans-serif;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    color: #000;
    font-size: 10px;
    scrollbar-face-color: #CCCCCC;
    border: 0;
    }
    
    #container {
    position: relative;/*spelling*/
    background: Silver;
    margin: 10px auto;
    margin-bottom: 10px;
    vertical-align: middle;
    padding: 0px;
    width: 620px;
    border: 5px solid #fff;
    }
    
    #header {
     background: Red url(http://www.allrpg.com/pepper/hotnewmedia/header.jpg) no-repeat top left;
     height: 100px;
     width: 620px;
     margin: 0;
     border-bottom: 5px solid #fff;
     }
     
    #content {
       position: relative;
     height: 200px;
     width: 620px;
     margin: 0;
     }
     
    #mainLinks {
     width: 410px;
     height: 200px;
     margin: 0;
     background: Silver;
     border-bottom: 2px solid #fff;
     border-right: 2px solid #fff;
     }
     
    #rightBox {
     position: absolute;
       top: 0px;
       right: 0px;
     height: 200px;
     width: 208px;
     background: Silver;
     border-bottom: 2px solid #fff;
     }
    #iframeBox {
       position: relative;
     height: 350px;
     width: 620px;
     margin: 2px 0 0 0;
    }
    iframe {
     width: 612px;
     height: 300px;
     background: transparent;
     border: 2px solid Silver;
    }
    #iFrame {
       text-align: center;
     width: 100%;
     border-bottom: 2px solid #fff;
     background: Silver;
    }
    #aboveIFrame {
     width: 100%;
     height: 20px;
     margin: 0;
     background: Silver;
     border-bottom: 2px solid #fff;
     }
     
    #belowIFrame {
     width: 100%;
     height: 20px;
     margin: 0;
     background: Silver;
     border-bottom: 2px solid #fff;
     }
     
    #bottomcontent {
       position: static;
     padding:0;
     height: 200px;
     width: 620px;
    }
    #BoxLinks1 {
     width: 206px;
     height: 200px;
     background: Silver;
     border-bottom: 2px solid #fff;
     border-right: 2px solid #fff;
     }
     
     
     </style>
    </head>
    <body>
    <div id="container"> 
      <div id="top"> 
    	<div id="header">header</div>
      </div>
      <div id="content"> 
    	<div id="mainLinks">mainLinks</div>
    	<div id="rightBox">rightBox</div>
      </div>
      <div id="iframeBox"> 
    	<div id="aboveIFrame">aboveIFrame</div>
    	<div id="iFrame">
    	  <iframe src="http://calendar.yahoo.com/hotnewmedia" name="hotnewmedia-calendar" frameborder="0"></iframe>
    	</div>
    	<div id="belowIFrame">belowIFrame</div>
      </div>
      <div id="bottomcontent"> 
    	<div id="BoxLinks1">BoxLinks1</div>
      </div>
    </div>
    </body>
    </html>
    You should also check other elements where you have given height and borders. If the outer element is 300px and the inner element is 200px + 2px borders then it is too big for the outer.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Ontario Canada
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol, im embarrased now. Dumb mistake on my part. Thanks for the help ^_^ Works like a charm (and it looks like that was the source of almost all my problems, I just fixed a few heights and removed a bunch of margin fixers.


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
  •