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.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts

    [Solved] Margins are having no effect

    No matter what I try, I can't seem to get the darn #rightHeader to move down into position, margin-top and padding-top have no effect
    Last edited by Riboflavin; 12-24-2005 at 06:11 AM. Reason: typo

  • #2
    Regular Coder Masterslave's Avatar
    Join Date
    Dec 2005
    Posts
    287
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Do you have tried:

    Code:
    position: absolute;
    top: "number"px;
    left: "numer"px;
    ?

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    That messed it up pretty bad in FF. The left margin works, just not the top.

  • #4
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <p> is used for PARAGRAPHS, to define a portion of the page, use DIV. It is important to start with good HTML, you should change it to something like this:
    Code:
    <div class="leftContent">
    <h1>Left Header</h1>
    <p>...</p>
    </div>
    <div class="rightContent">
    <h1>Right Header</h1>
    <p>...</p>
    </div>
    For the CSS:
    Code:
    <style type="text/css">
    .leftContent h1 { //style the left header here }
    .rightContent h1 { //style the right header here }
    </style>

  • #5
    Regular Coder Masterslave's Avatar
    Join Date
    Dec 2005
    Posts
    287
    Thanks
    2
    Thanked 0 Times in 0 Posts
    What goes wrong in Firefox? Maybe you can fix it with a z-index on the h1 tag.

    Code:
    #rightHeader {
    
      margin-top: 105px;
    
      margin-left: 50px;
    
      display: inline;
    
    }
    Do you use display: inline to fix the double margin bug in IE?
    If so, delete that line and then apply the position: absolute with z-index. Maybe it will work.

  • #6
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ok, I changed the Ps to Divs.

    If I take out the display: inline it looks the way it does now. I tried z index but no luck.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    #rightHeader {
    
    
      margin-left: 50px;
    
      clear:left;
    
    }
    the image above it is floated so you need to make the #rightHeader clear it or it will sit beside it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you that helped greatly.

    I have the layout exactly the way I want in IE, but it is quite off in FF now Any ideas?

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    alright check this. I'll try to go through what I did to see what the heck was going on.

    First I added the
    Code:
    * {
    padding: 0;
    margin: 0;
    }
    since the default padding/margins of the navigation list were throwing it off. That was the gap in FF.

    Then to simplify things I wrapped your whole left column in a div and floated it ans positioned it. Gave it a width and then everything written in it will just fall in place. I turned off ALL the floats and clears on everything in the left coulmn.

    Now in the HTML the rightHeader needed to be moved under the leftSide.

    Give a little top margin to the stuff in the right hand side and BooYaa!

    the *{pad:mar:0} thing fixed it enough on it's own to make it workable.

    oh yeah the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>FS-Media</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    html {
    
      background-image: url('http://www.gotclam.com/fsmedia/images/bg.gif');
    
      background-repeat: repeat-x;
    
      background-color: #0B0B0B;
    
      background-attachment: fixed;
    
      color: #595959;
    
    }
    
    
    
    #pageContainer {
    
      width: 705px;
    
      margin-left: auto;
    
      margin-right: auto;
    
      margin-top: 0px;
    
      padding: 0px;
    
      background-color: #FFFFFF;
    
    }
    
    
    
    #banner {
    
      background-image: url('http://www.gotclam.com/fsmedia/images/banner.gif');
    
      width: 705px;
    
      height: 96px;
    
    }
    
    
    
    #menu {
    
      background: #fc6 url('http://www.gotclam.com/fsmedia/images/menubg.gif') no-repeat;
    
      width: 705px;
    
      height: 44px;
    
    }
    
    
    
    #top {
    
      background: url('http://www.gotclam.com/fsmedia/images/contenttop.gif');
    
      width: 705px;
    
      height: 170px;
    
      position:absolute;
    
      z-index: 0;
    
    }
    
    
    
    #content {
    
      width: 705px;
    
      background:url('http://www.gotclam.com/fsmedia/images/contenttop.gif') top left no-repeat;
    
    }
    
    #leftSide {
    
      float: left;
    
      width: 188px;
    
      margin-left: 25px;
    
      display: inline;
    
      margin-top: 20px;
    
    }
    
    .rightContent {
    
      margin-top: 15px;
    
      margin-left: 270px;
    
      margin-bottom: 10px;
    
      padding: 0px;
    
      width: 400px;
    
      font-size: 14px;
    
      text-indent: 1.25em;
    }
    
    
    .leftContent {
    
      font-size: 14px;
    
      text-indent: 1.5em;
    
      width: 180px;	
    
      margin-left: 4px;
    
      margin-top: 8px;
    }
    
    
    #footer {
    
      background-image: url('http://www.gotclam.com/fsmedia/images/footer.gif');
    
      background-repeat: no-repeat;
    
      width: 705px;
    
      height: 76px;
    
    }
    
    
    
    h1 {
    
      padding: 0px;
    
      position: relative;
    
      font-size: 15px;
    
      font-family: arial;
    
      color: #FDA00A;
    
      width: 200px;
    
    }
    
    h2 {
    
      color: #494949;
    
      font-size: 15px;
    
      font-family: arial;
    
      margin-top: 8px;
    
    }
    
    
    h3 {
    
      margin-top: 50px;
    
      margin-left: 540px;
    
      padding: 0px;
    
      position: absolute;
    
      font-size: 7pt;
    
      font-family: arial;
    
      color: #666666;
    
    }
    
    
    
    #rightHeader {
    
      position: relative;
    
      margin-left: 250px;
    
      padding-top: 20px;
    
    
    }
    
    
    
    #newsLetter {
    
      margin-top: 15px;
    
      margin-left: 250px;
    
    
    }
    
    
    #signup {
    
      margin-top: 20px;
    
      margin-left: 272px;
    
      padding: 0px;
    
      height: 65px;
    
    }
    
    * html #signup {
    
      margin-left: 137px;
    
    }
    
    #submit {
    
      margin-bottom: -8px;
    
      margin-left: 10px;
    
    }
    
    
    
    #leftHeader {
    
      margin-left: 0px;
    
      position: relative;
    
    }
    
    
    #siteImage {
    
      position: relative;
    
      margin-right: 0px;
    
      margin-top: 5px;
    
    }
    
    #navcontainer {
    
      text-align: right;
    
      margin-right: 12px;
      
    
    
    }
    
    ul#navlist
    {
    white-space: nowrap;
    text-align: right;
    }
    
    #navlist li
    {
    display: inline;
    list-style-type: none;
    }
    
    #navlist a { 
    
      padding: 0;
     }
    
    #navlist a:link, #navlist a:visited
    {
    text-decoration: none;
    }
    
    #navlist a:hover
    {
    text-decoration: none;
    }
    
    img {
      border: none;
    }
    </style>
    </head>
    <body>
    <div id="pageContainer">
    <div id="banner"></div>
    
    <div id="menu">
    <div id="navcontainer">
    <ul id="navlist">
    <li id="homeButton"><a href="#"><img src="http://www.gotclam.com/fsmedia/images/home.gif" 
    
    alt="Home" /></a></li>
    <li><a href="#"><img src="http://www.gotclam.com/fsmedia/images/portfolio.gif" alt="Portfolio" 
    
    /></a></li>
    
    <li><a href="#"><img src="http://www.gotclam.com/fsmedia/images/services.gif" alt="Services" 
    
    /></a></li>
    <li><a href="#"><img src="http://www.gotclam.com/fsmedia/images/aboutus.gif" alt="About Us" 
    
    /></a></li>
    <li><a href="#"><img src="http://www.gotclam.com/fsmedia/images/contact.gif" alt="Contact" 
    
    /></a></li>
    
    </ul>
    </div>
    </div>
    
    <div id="content">
    <div id="leftSide">
    <h1 id="leftHeader">current site highlight</h1>
    
    <img src="http://www.gotclam.com/fsmedia/images/siteimage.gif" id="siteImage" alt="Christian 
    
    Lyrics" />
    
    
    
    
    <h2>Christian-Lyrics.net</h2>
    
    <div class="leftContent">
    Started by two college age men that wanted to bring a web presence
     to the world.  It first started out as just a couple friends doing
     a lyrics website, when they soon realized that they were starting 
    to build a network of websites. <br /><br /> </div>
    </div>
    <h1 id="rightHeader">» company overview</h1>
    <div class="rightContent">
    Fireside Media, Inc. started by two college age men that wanted
     to bring a web presence to the world.  It first started out as
     just a couple friends doing a lyrics website, when they soon
     realized that they were starting to build a network of websites.
      After realizing the benefits of creating a corporate identity
     and unity, they created what is now known as Fireside Media, Inc.
      FS Media is really just a central identification point for all 
    the websites in the network so that it was easy to manage all the
     contacts through all the websites.<br /><br />
    
    
    Started by two college age men that wanted to bring a web presence
     to the world.  It first started out as just a couple friends doing
     a lyrics website, when they soon realized that they were starting 
    to build a network of websites. <br /><br />
    
    Started by two college age men that wanted to bring a web presence
     to the world.  It first started out as just a couple friends doing
     a lyrics website, when they soon realized that they were starting 
    to build a network of websites. </div>
    
    <h1 id="newsLetter">company newsletter</h1>
    <div id="signup">
     
    <input type="text" size="35" maxlength="255" value=""></input><img 
    
    src="http://www.gotclam.com/fsmedia/images/submit.gif" id="submit" alt="Sign Up" />
    
    </div>
    
    </div>
    <div id="footer"><h3>&copy;2005 Fireside Media, Inc.</h3></div>
    </div>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    Regular Coder Masterslave's Avatar
    Join Date
    Dec 2005
    Posts
    287
    Thanks
    2
    Thanked 0 Times in 0 Posts
    So It's solved?
    Good job!


  •  

    Posting Permissions

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