Member Avatar for stevenpetersen

My name is Steven and my problem is that my div's have a space between them and i need them to set together.

Style sheet Code:

body 
{
body {
background: url(../structur_folder/i_gradient.png) repeat-x;
text-align:left;
font-family: Lucide Sans Unicode;
font-size: 100%; 
font-style:none; 
font-weight:none
}

h1 
{
color: #008080; 
text-align:left;
font-family: Lucide Sans Unicode;
font-size: 300%; 
font-style:none; 
font-weight:bold; 
text-decoration:none; 
letter-spacing:1pt
} 

h2 
{
color: #D2232A; 
text-align:left;
font-family: Lucide Sans Unicode;
font-size: 300%; 
font-style:none; 
font-weight:bold
letter-spacing:1pt
}

h3
{
color: #D2232A; 
text-align:left;
font-family: Lucide Sans Unicode;
font-size: 160%; 
font-style:none; 
font-weight:bold
}

p 
{
color: #008000; 
text-align:left;
font-family: Lucide Sans Unicode;
font-size: 150%; 
font-style:none; 
font-weight:none
}

a:link    
{
color: #D2232A; 
text-align:left;
font-family: Lucide Sans Unicode;
font-size: 160%; 
font-style:none; 
font-weight:bold
}

a:visited 
{
color: #D2232A; 
text-align:left;
font-family: Lucide Sans Unicode;
font-size: 160%; 
font-style:none; 
font-weight:bold
}

a:active  
{
color: #D2232A; 
text-align:left;
font-family: Lucide Sans Unicode;
font-size: 160%; 
font-style:none; 
font-weight:bold
}

a:hover   
{
color: #D2232A; 
text-align:left;
font-family: Lucide Sans Unicode;
font-size: 160%; 
font-style:none; 
font-weight:bold
}

#header
{
border-width:0 0pt 0pt 0pt;
height: 30%;
width: 100%;
margin: 0 auto;
}

#nav
{
border-width:0 0pt 0pt 0pt;
height: 5%;
width: 100%;
margin: 0 auto;
}

#body
{
border-width:0 0pt 0pt 0pt;
height: 80%;
width: 100%;
margin: 0 auto;
}

#footer
{
border-width:0 0pt 0pt 0pt;
height: 30%;
width: 100%;
margin: 0 auto;
}

The Webpage Code:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta name="Microsoft Theme" content="auto 011, default">



</head>

<body background="structure_folder/i_background_gradient.png">

<div id="header">
<img src="/structure_folder/i_psc_header.png" width="100%" height="100%"/>
</div>
<div id="nav">
<img src="/structure_folder/i_nav_placer.png" width="100%" height="100%"/>
</div>
<div id="body">
<img src="/structure_folder/i_placer.png" width="100%" height="100%"/>
</div>
<div id="footer">
<img src="/structure_folder/i_psc_footer.png" width="100%" height="100%"/>
</div>
</body>

</html>
  • 3 Contributors
  • 5 Replies
  • 109 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by stevenpetersen

Dani AI

Generated

A few likely causes and safe fixes based on the code and replies in this thread.

Browsers have default margins and different layout modes; a missing doctype or syntactically broken rules can make those defaults kick in and produce gaps. Also, images are inline by default and can introduce baseline/line-height gaps when stacked. Percentage heights only work when the parent has an explicit height, so using percent heights without setting html/body height often produces unexpected spacing. 's quick negative-margin workaround can hide the symptom, but it’s fragile; and touched on related issues (font names and unit usage) that are also worth checking.

Practical steps:

  • Add a standards doctype so the page isn’t rendered in quirks mode (MDN: Doctype).
  • Reset browser defaults for html/body and set html/body height if you rely on percentage heights (MDN: height).
  • Make images block-level and scale them responsively to remove inline whitespace and avoid forcing heights that don’t exist (MDN: img element).
  • Fix any CSS syntax errors (missing semicolons, accidental nested rules) so important declarations aren’t ignored.

Example minimal fixes (replace with your real class/ID names):

<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <!-- your sections -->
</body>
</html>
html, body { height: 100%; margin: 0; padding: 0; }
img { display: block; width: 100%; height: auto; }

If you need fixed vertical sections, use a column flex layout or give outer elements explicit pixel/viewport heights rather than relying on nested percentage heights. Finally, validate the CSS (browser dev tools will show computed margins/heights) so the root cause is fixed instead of masking it with negative margins.

Member Avatar for stevenpetersen

i solved it.... opps <code> margin: -4 auto;</code>

Member Avatar for Member #360561

Digression:
The font name is "lucida". I guess you won't ever see it when the name ends with an "e".

Member Avatar for stevenpetersen

Lucide Sans Unicode works fine thats the one i want to use... thank you anyway

Member Avatar for MidiMagic

0px is an invalid style in some browsers. Use 0 instead. Those browsers throw out the whole style when they encounter a 0 with a unit of measure.

"Lucide Sans Unicode" is not a valid font name. It may work on YOUR browser, because you have it defaulted to that font. But nobody else will see it, because they have no font file named "Lucide Sans Unicode" on their computers.

Your spelling has to agree with the name of the file on the OTHER user's computer. The other computers have "Lucida Sans Unicode" instead. You can't make up your own spellings and expect them to work

Member Avatar for stevenpetersen

thank you setting me on the right path

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.