CSS margins displaying differently on Firefox/Ie/Chrome

Hi guys,

I uploaded the site so far here.
http://nipoker.com/test/index.html

It works perfectly on chrome, so if you view it on that first then compare it with firefox/IE, you will see that:

The margins between the “Latest News” navigational box on the left and the box below it isn’t displaying right (there is no 1px gap" like there is on chrome).

At the bottom beside “Refer-A-Friend” box there should be another 1-2px gap like it displays on chrome, but on firefox and ie it does not show this so it looks like one big box joined together.

I;ve been scratching my head over this for the past hour so I’d appreciate any help

Ok I was just told by a friend that the “1 px gap” between the What is rakeback / refer a friend / about boxes don’t display for him in chrome either (it should look like 3 columns).

Any ideas?

The second problem (no gap between Refer-A-Friend and About PokerPiece) is pretty straightforward: Neither of those elements have a margin on that side, and Refer-A-Friend is too wide to leave any space. The quick fix is to decrease Refer-A-Friend’s width by a couple of pixels.

I’m not sure what the other problem was. Which versions of IE/Firefox are you using? I tried in IE9, IE9-as-7, FF9, and FF3.6, and I couldn’t see any difference with the Chrome version.

Yes thats what I thought the problem was but it works fine in chrome and the gap is already their, on firefox and IE the gap is not their, nor for my friend who is using chrome.

Chrome 17.09, IE 9.0.8, Firefox 9.0.1

I reduced the About column by 2 pixels in width and it showed up better in Ie/Firefox but the gap then looked too big in Chrome.

Anyone? still stuck :frowning:

Could you post a screen shot of the problem, because for me, the two sites look absolutely identical on Chrome and Firefox (Mac).

Hi, pictures attached.

I circled the missing bits in the IE picture, it’s the same for firefox.

I am not sure what it is, I set the width of the container and wraps to 660px, and each of those columns are a set width so there should be a gap inbetween them all of 1-2px for the bottom 3 columns.
As you can see from the screenshot it looks fine for me in Chrome, the way I want it too.

I tried reducing the width by 1 pixel on the last column (About) and the gap/seperator would appear in firefox + ie, but the gap then looked too big on chrome.

Same as Ralph…Windows.

Strange… does it appear for you guys like it does in the picture I attached of Chrome? (one without the red paint circles).

Ok fixed the column issue at the bottom, changed the div widths to 318/322/318 with 2x 1 pix gaps inbetween which adds up perfectly to the document width 960.

Still have the problem with the gaps not showing between the rounded header tabs and the boxes underneath for navigation though

Even though they still appear the same to me in Chrome and FF, I would suggest doing things differently anyway. It would be more reliable to get that horizontal white line separator by putting a white border on the bottom of the headings (or the div below) than rely on browsers showing whitepsace gaps.

I have 6 of these navigational boxes on my side.

They are made up of 2 divs.


<div id="HeaderBox">
	<h2>Latest News</h2>
		<div id="HeaderBoxContent">
		</div>
</div> 

Here is the CSS:


#HeaderBox { 
  background:transparent url(img/heading.png) no-repeat scroll 0 0;
  height:25px;
  text-align:center;
  line-height:20px;
  width:187px;
  color:white;
  font-size:14px;
  margin-left:10px;
  margin-top:20px;
  margin-bottom:0px;
  float:left;
  
  
   }
   
   
  #HeaderBoxContent {
  background-color:black;
  margin-top:6px;
  height:275px;
  text-align:center;
  width:187px;
  color:white;
  font-size:14px;
  
 
     }

The problem is that the HeaderBoxContent div does not align exactly under the HeaderBox div.
I want a 1 px gap between both of them as shown in the picture but I have to use margin-top:6px; via trial and error to get that effect.

The HeaderBoxContent div will otherwise sit above the HeaderBox div and overlap it.

Does anyone have any idea how to fix this as it is causing me a lot of headache.

I also have 6 of these header/boxes on my site, and each one has a different name even though they are all the same values but placed elsewhere on the site.
Is there an easier way to manage them instead of having 6 seperate things in my css sheet to replace the repetitiveness. HeaderBoxContent1 HeaderBoxContent2 HeaderBoxContent3 HeaderBoxContent4 etc

I think what I mean is, everytime I use a <h2> tag can I have it automatically use the HeaderBox template? (the background rounded image) instead of creating a whole new style everytime.

That makes sense and that’s exactly what I’ll do.
I just made a new thread with a problem I am having with those headings.
I can’t get them to align perfectly under each other.

Ok so it will be easier to use a white border at the bottom of the div instead of an actual gap, so if someone could point me out to why the HeaderContentBox won’t align right under the HeaderBox Div but overlapping, that would be great

I’ve moved it back here, as it’s best to keep the discussion in one place.

A more reliable way to go about this would be to forget margins between those two elements and instead set a line-height on the h2 for the height you want it to be (or padding—it’s up to you) and then a white top border on the following div. Zero out the bottom margin on the heading.

Thanks.

I have removed the bottom margins but the following div after the h2 still overlaps it, I cannot get it to align directly underneath the prior div.
I have to use margin-top 6px on the second div to force it down and not overlap the heading.

Is your current working example online? Perhaps put up a test page if not. Then we can see exactly what’s going on. :slight_smile:

Here it is: http://nipoker.com/test/index.html

Although the divs are named differenty that I am referring too “rakeback” and “rakebackbox”
I had to use margin-top 6px on rakebackbox like I said so it didn’t overlap the rakeback h2 heading.

For some reason it will not position itself directly under the header div.

This looks fine on firefox/chrome but not on IE.

I would suggest doing something like this:


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
.news {width: 187px;}
h2 {border-radius: 10px 10px 0 0; background: black; margin: 0;color: white; text-align: center; font-size: 1em; line-height: 1.5em;}
.newsbox {background: black; border-top: 1px solid white; height: 100px; /* remove height */}
</style>
	
</head>

<body>

<div class="news">
	<h2>Latest News</h2>
	<div class="newsbox">
	</div>
</div>

</body>

</html>