SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: DIV problem

Hybrid View

  1. #1
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    DIV problem

    Hey all,

    I'm trying to replace my tables with DIV and use CSS positioning but I've run into a problem

    Here is my DIV code -
    Code:
    <div class='main'>
    	<img src='images/header.jpg' width='100%' />
    	<div class='whitebox'>
    		<b>a</b>
    	</div>
    </div>
    CSS
    Code:
    div.main
    {
    	color: black;
    	width: 750px;
    	height: 450px;
    	text-align: center;
    	vertical-align: top;
    	top: 5%;
    	z-index: 1;
    }
    
    div.whitebox
    {
    	background-color: white;
    	color: black;
    	border-right: 1px black solid;
    	border-left: 1px black solid;
    	border-bottom: 1px black solid;
    	height: 338px;
    	width: 733px;
    	text-align: center;
    	vertical-align: top;
    	top: 0px;
    	z-index: 2;
    }
    My problem is there is a small gap between the two DIVs that I want to make go away I tried setting the whitebox top: -1px; but it didn't work.

    Thanks for the help

  2. #2
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    padding:0px;
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  3. #3
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried padding: 0px; with no success.

    For the record, I also tried the following for whitebox and the reverse for main:
    margin-top: 0;
    border-top: 0;
    border-spacing: 0;
    border-top-width: 0;

    No joy there either
    From the English nation to a US location.

  4. #4
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <div class='main'><img src='images/header.jpg' width='100%' /><div class='whitebox'><b>a</b></div></div>
    You shouldn't have to, but I know that CR/LF turns into a space often.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I've been caught out by that before too.
    It's annoying when you want your code to look good but the only way of fixing it is to put everything on one line.

    In this case it didn't work though.
    From the English nation to a US location.

  6. #6
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by awestmoreland
    In this case it didn't work though.
    Oh well have to give up for now... Very strange.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  7. #7
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    try this

    this is touching!

    Code:
    <style type="text/css">
    <!--
    div#main
    {
    	color: black;
    	width: 750px;
    	height: 450px;
    	text-align: center;
    	margin:0px;
    	padding:0px;
    }
    
    div#whitebox
    {
    	
    	background-color: white;
    	color: black;	
    	border-right: 1px black solid;
    	border-left: 1px black solid;
    	border-bottom: 1px black solid;
    	height: 338px;
    	width: 733px;
    	text-align: center;
    	margin:0px;
    	padding:0px;
    	
    }
    
    img {
    	margin:0px;
    	border:0px;
    }
    
    -->
    </style>
    </head>
    
    <body>
    <div id='main'>
    	<img src='images/header.jpg' width='100%' /><div id='whitebox'>
    		<b>a</b>
    	</div>
    </div>
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  8. #8
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    D'oh! Padding on the IMG.
    Should have thought of that.

    Thanks for putting me out of my misery Wisbin


    Andy
    From the English nation to a US location.

  9. #9
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by awestmoreland
    D'oh! Padding on the IMG.
    NO - vertical-align:top!!!!!! - is the only change you need to make to fix this! How bizaire
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel


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
  •