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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Location
    NY, USA
    Posts
    132
    Thanks
    1
    Thanked 1 Time in 1 Post

    Cool CSS Margin Problem

    Hi,

    I have a weird problem withh css. I have two boxes, and I'm using a margin-top to get the second one to leave some space between them. In internet explorer this works fine. In Firefox, the margin is colored in white. To see what I mean, please go here: http://www.gamescool.com/blogation/b...e/index_2.html
    It is getting the color white from the box under it with the white background. Does anyone know a way to fix this?

    Thanks for your help,
    ~David

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    There might be an easier way to do this, but couldn't you just throw an invisible <div> in there instead of the +8px top margin? see if that works, maybe....
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    try this:

    Code:
    <html>
    <head>
    <title></title>
    
    <STYLE TYPE="text/css"><!--
    body
    {
    background-color: #00B600;
    margin: 12px;
    }
    div.body
    {
    width: 755px;
    }
    div.full_box_title
    {
    width: 755px;
    height: 108px;
    background-color: #3399FF;
    border-style: solid;
    border-width: 3px;
    border-color: #ccff66;
    padding: 2px;
    margin-bottom: 8px;
    }
    div.blog_title
    {
    float: left;
    margin-top: 22px;
    margin-left: 19px;
    color: yellow;
    font-size: 50px;
    font-family: verdana;
    }
    img.top_left_logo
    {
    float: left;
    margin-top: 7px;
    margin-left: 20px;
    }
    div.full_box_description
    {
    width: 755px;
    height: auto;
    background-color: #3399FF;
    border-style: solid;
    border-width: 3px;
    border-color: #ccff66;
    font-family: verdana;
    font-size: 16px;
    color: yellow;
    text-align: left;
    padding: 2px;
    margin-bottom: 8px;
    }
    div.left_image_box
    {
    float: left;
    width: 260;
    height: 168;
    background-color: white;
    border-style: solid;
    border-width: 3px;
    border-color: #ccff66;
    font-family: verdana;
    font-size: medium;
    color: yellow;
    padding: 2px;
    }
    div.date_header
    {
    float: right;
    width: 470;
    height: 30;
    background-color: #00B600;
    border-style: solid;
    border-width: 3px;
    border-color: #00B600;
    text-align: center;
    font-family: verdana;
    font-size: 16px;
    color: yellow;
    }
    div.content_box_top
    {
    float: right;
    width: 470;
    background-color: #3399FF;
    border-style: solid;
    border-width: 3px;
    border-color: #ccff66;
    text-align: left;
    padding: 2px;
    }
    img.title_icon
    {
    float: left;
    vertical-align: middle;
    margin-right: 6px;
    }
    div.entry_title
    {
    margin-top: 6px;
    float: left;
    vertical-align: middle;
    font-family: verdana;
    font-size: 16px;
    color: yellow;
    }
    div.content_box_body
    {
    float: right;
    width: 470;
    background-color: white;
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
    border-right-width: medium;
    border-left-width: medium;
    border-bottom-width: medium;
    border-color: #ccff66;
    text-align: left;
    padding: 2px;
    }
    div.content_box_footer
    {
    float: right;
    width: 470;
    background-color: #ccff66;
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
    border-right-width: medium;
    border-left-width: medium;
    border-bottom-width: medium;
    border-color: #ccff66;
    padding: 2px;
    }
    div.comments_leave
    {
    float: left;
    }
    div.comments_view
    {
    float: right;
    }
    div.comments_text A:link
    {
    text-decoration: none;
    font-family: verdana;
    font-size: 16px;
    color: #3399FF;
    }
    div.comments_text A:visited
    {
    text-decoration: none;
    font-family: verdana;
    font-size: 16px;
    color: #3399FF;
    }
    div.comments_text A:active
    {
    text-decoration: none;
    font-family: verdana;
    font-size: 16px;
    color: #3399FF;
    }
    div.comments_text A:hover
    {
    text-decoration: underline;
    font-family: verdana;
    font-size: 16px;
    color: #3399FF;
    }
    div.content_box_main
    {
    padding: 0px;
    margin-right: -10px;
    }
    div.left_column
    {
    float: left;
    width: 260;
    }
    div.left_box_top
    {
    float: left;
    width: 260;
    background-color: #3399FF;
    border-style: solid;
    border-width: 3px;
    border-color: #ccff66;
    text-align: center;
    padding: 2px;
    font-family: verdana;
    font-size: 16px;
    color: yellow;
    }
    div.spacer
    {
    float: left;
    width: 280;
    background-color: #00B600;
    height: 8px;
    }
    div.left_box_body
    {
    width: 260px;
    background-color: white;
    border-left-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-color: #ccff66;
    padding: 2px;
    text-align: left;
    font-family: verdana;
    font-size: 16px;
    }
    //--></STYLE>
    
    </head>
    
    <body>
    <center>
    <div class="body">
    <div class="full_box_title">
    <img src="images/top_left_logo.jpg" class="top_left_logo"/><div class="blog_title">The title</div>
    </div>
    <div class="full_box_description">Description line</div>
    
    <div class="left_column">
    <div class="left_image_box"><center><img src="images/left_image.jpg"/></center></div>
    <div class="spacer"></div>
    <div class="left_box_top">Left Box Title</div>
    <div class="left_box_body">This is the body of the box.<br>Some more box stuff...<br> and some more!!</div></div>
    
    <div class="content_box_main">
    <div class="date_header"><img src="images/date_header_l.jpg"/>January 26th, 2005<img src="images/date_header_r.jpg"/></div>
    <div class="content_box_top">
    <img src="images/entry_title_icon.jpg" class="title_icon"/><div class="entry_title">Entry title</div>
    </div>
    
    <div class="content_box_body">This is the body of a content box!!<br/>This is more of hte persons article that goes on and on and on aon and here it goes all the way to over here and bla bla bla this is</div>
    <div class="content_box_footer"><div class="comments_leave"><div class="comments_text"><a href="http://www.blogation.com/leave_comment.php?blog_id=$BLOG_ID&entry_id=$ENTRY_ID">Leave comment</a></div></div><div class="comments_view"><div class="comments_text"><a href="folder/entry.html">2 Comments</a></div></div></div>
    </div>
    </div>
    </center>
    </body>
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Location
    NY, USA
    Posts
    132
    Thanks
    1
    Thanked 1 Time in 1 Post

    Hi

    Hi,

    Thanks. I had actually tried that before. Here's why I can't use it. In Firefox, it works perfectly. In Internet Explorer for some reason, it makes the divider more than 8px, which I have no idea why. So that box gets pushed down more than everything else. If you go back to that address, you can see what I mean. Do you know why?

    Thanks,
    ~David

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    possible padding or margin issue with IE try setting the padding or margin of that div see if that works

  • #6
    Regular Coder
    Join Date
    Jan 2005
    Location
    NY, USA
    Posts
    132
    Thanks
    1
    Thanked 1 Time in 1 Post
    Hi,

    Setting the padding and margin don't seem to help.

    Thanks,
    ~David

  • #7
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    If you take away the spacer <div> and style, and change the style "div.left_box_top" to:

    Code:
    div.left_box_top
    {
    float: left;
    width: 260;
    background-color: #3399FF;
    border-style: solid;
    border-width: 3px;
    border-color: #ccff66;
    text-align: center;
    padding: 2px;
    font-family: verdana;
    font-size: 16px;
    color: yellow;
    top: 8px;
    left: 0px;
    position: relative;
    }
    It makes the space equidistant in both FF and Ie...BUT, you lose the third box on the bottom....

    Dunno, play around with the relative positioning stuff....

    Push comes to shove, you could have separate style sheets for FF and IE, and run a PHP script (no javascript, because some browsers don't have that enabled) that detects browser type and swaps style sheets....

    Good luck, I give, man ....
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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