SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    I'm the web overlord for Graphic Business Systems

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdleihssirhc View Post
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone? still stuck

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Could you post a screen shot of the problem, because for me, the two sites look absolutely identical on Chrome and Firefox (Mac).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ie.pngchrome.jpg

    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Same as Ralph...Windows.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strange.. does it appear for you guys like it does in the picture I attached of Chrome? (one without the red paint circles).

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded Header tabs for sideboxes causing problem

    header.png

    I have 6 of these navigational boxes on my side.

    They are made up of 2 divs.

    Code:
    <div id="HeaderBox">
    	<h2>Latest News</h2>
    		<div id="HeaderBoxContent">
    		</div>
    </div>
    Here is the CSS:
    Code:
    #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.

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rubbed View Post
    I just made a new thread with a problem I am having with those headings.
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Is your current working example online? Perhaps put up a test page if not. Then we can see exactly what's going on.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I would suggest doing something like this:

    Code:
    <!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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Your problem was that you set #rakebox to 25px high and added the round background on it (which was 25px high) and then you nested an h2 that was only about 20px high and then you nested rackebackbox which is 275px high.

    To move rakebackbox down you would therefore need a margin of six pixels.

    There are two errors here. First #rakeback cannot only be 25px high because it holds an h2 and a box that is 275px high!!

    What you should have done was set a height to the h2 of 25px and removed the height from rakeback and then a margin-top would only needed to be 1px and would be consistent between browsers.

    Code:
    #rakeback{height:auto}
    #rakeback h2{height:25px}
    A better solution as mention above would be to avoid heights altogether and then just use an oversize image on the h2 so that text can scale as required.

    Your content boxes with fixed heights are going to be very fragile and you would be better off with faux background images and no height (or a min-height) or display:table for ie8+ to keep columns equal.

    Any time you cram text into a box of fixed height it will set up an escape committee and find ways of breaking out at the earliest opportunity


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
  •