1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

1px Off Screen At The Top And Left Side

Discussion in 'CSS' started by darren132, Feb 9, 2008.

  1. #1
    Why does Firefox move my div 1px off the screen at the top and left side and how do I fix this (CLICK HERE TO SEE)? IE and Opera both display it properly within the browser viewport. I'm using a table inside the '#header' div to give me the black borders that you see, which is what I want. Everything else is contained in the '#container' div.

    Code:

    #container {
    }
    
    #header {
    	position: relative;
    	margin-bottom: 1px;
    	width: 100%;
    	height: 60px;
    }
    
    #header table {
    	width: 100%;
    	height: 60px;
    	border: 1px solid black;
    	border-collapse: collapse;
    }
    
    #header td {
    	padding: 0;
    	text-align: center;
    	border: 1px solid black;
    }
    
    -----------------
    
    <div id="container">
    		<div id="header">
    
    			<?php include('include/header.php'); ?>
    
    		</div>
    <div>
    Code (markup):
     
    darren132, Feb 9, 2008 IP
  2. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #2
    So I guess nobody has any idea why it does this or how it can be fixed?
     
    darren132, Feb 9, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Well, I think the issue might be your code is in quirks mode in IE - there's an OBVIOUS cause here... you are declaring the width of the table as 100% + 2px... so it's wider than the containing DIV.

    I'd have to see the ENTIRE code though to be certain - as would most others. Some tiny snipped is NOT enough for most people to help you with a layout issue as it could be a invalid doctype or lack of doctype, overthinking the entire layout, invalid markup, or a dozen other things APART from the code you posted.

    Though mixing % widths with px borders is almost always a total /FAIL/ - as is trying to use borders on ALL sides with border-collapse .
     
    deathshadow, Feb 9, 2008 IP
  4. darren132

    darren132 Well-Known Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Ok, here's the entire code in a zip then: CLICK HERE. I know it's not the doctype as I have already researched that part. My table does have 100% width, but contains pixel widths for the cells. I don't think that's what's causing the problem though.
     
    darren132, Feb 10, 2008 IP