...

View Full Version : CSS Margin Problem



cooleo100d
01-28-2005, 07:06 PM
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/blog_admin/templates/nature/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

chump2877
01-28-2005, 08:19 PM
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....

chump2877
01-28-2005, 08:50 PM
try this:


<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>

cooleo100d
01-28-2005, 09:00 PM
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

_Aerospace_Eng_
01-28-2005, 09:28 PM
possible padding or margin issue with IE try setting the padding or margin of that div see if that works

cooleo100d
01-28-2005, 09:37 PM
Hi,

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

Thanks,
~David

chump2877
01-28-2005, 09:44 PM
If you take away the spacer <div> and style, and change the style "div.left_box_top" to:


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 .... :rolleyes:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum