[OCLUG-devel] CSS - Relative Positioning

Fri May 11 03:51:21 PDT 2007

The <P> tag is causing your problems, it places a line break before the 
opening <p> tag. Remove it, and the page should display as you intended.

Note, some browsers will place a break before and after the <div> element. 
Consider using a <table> tag instead, this should give you a more consistent 
appearance across browsers.

Like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Test 1</title>
</head>
<body style="margin: 0;">
<table style="position: relative; background-color: #ffff00; width: 100%; 
height: 50px; padding: 0; margin: 0; border: 0;">
   <tr>
    <td style="vertical-align: top;">My dog has fleas.
    </td>
   </tr>
  </table>
</body>
</html>

-Eric A. Grun

>From: "Doug Jolley" <ddjolley at gmail.com>
>To: oclug-devel at oclug.org
>Subject: [OCLUG-devel] CSS - Relative Positioning
>Date: Mon, 7 May 2007 05:01:31 -0700
>
>Can anyone please tell me why, in the snippit of code that follows, my div
>element shows up positioned about 16px from the top?  It's as if there were
>a top margin of 16px like there would have been on each side if I hadn't
>inserted the 'margin: 0' style in the body tag.   Most importantly, I'm
>trying to figure out how to get the div element flush with the top.  Thanks
>for any input.  Here's the snippit:
>
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
><html>
><head>
>  <title>Test 1</title>
></head>
><body style="margin: 0;">
>  <div style="position: relative; background-color: #ffff00; width: 100%;
>height: 50px;">
>   <p>My dog has fleas.</p>
>  </div>
></body>
></html>
>
>      ... doug

>_______________________________________________
>OCLUG-devel mailing list -- OCLUG-devel at oclug.org
>http://mailman.oclug.org/mailman/listinfo/oclug-devel

_________________________________________________________________
Like the way Microsoft Office Outlook works? You’ll love Windows Live 
Hotmail. 
http://imagine-windowslive.com/hotmail/?locale=en-us&ocid=TXT_TAGHM_migration_HM_mini_outlook_0507