CSS problem

Extra space between 2 divs

Page 1 of 1

4 Replies - 858 Views - Last Post: 24 December 2009 - 03:28 AM

#1 Daily.matters  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 20-November 09

CSS problem

Posted 23 December 2009 - 10:08 AM

Hi everyone. I'm currently designing a webite with a fellow designer. The thing is, i'm having a problem with an extra space between 2 divs, and in my css code, there's nothing that indicates that space.

(i attached the image off the problem i'm having)

This is the HTML code (both of this divs are inside another div "principal"):

	<div id="principal">
	<!-- separa toda a informação do background -->
	
		<div id="top">
		<!-- contem o banner do topo -->
		</div>
	
		<div id="menu">
		<ul id="menu">  
			<li><a href="inicio.html"><img src="botoes/botao_off_01.jpg" border="0" id="i1" onmouseover="mouseOver1()" onmouseout="mouseOut1()"></a></li>  
			<li><a href="hospital.html"><img src="botoes/botao_off_02.jpg" border="0" id="i2" onmouseover="mouseOver2()" onmouseout="mouseOut2()"></a></li>  

...		
			</ul> 
			
		</div>	


And here's the CSS code:

#principal{
	background: url(images/backcontent.png) repeat-y;
	width: 861px; 
	margin: 0 auto;
	padding: 10px;
}

#top{
	background: url(images/cabecalho.jpg) no-repeat;
	margin-left: 20px;
	width: 801px;
	height: 118px;
}

#menu{
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 5px;
}

ul#menu {list-style: none; } 

ul#menu li {float: left; } 


Can anyone help me with this.... I really don't know.... I don't have paddings between the divs, so i really don't know. It should be something simple, but i'm not seeing it.

Thx in advance,
Cláudio

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: CSS problem

#2 Lemur  Icon User is online

  • Pragmatism over Dogma
  • member icon



Reputation: 1335
  • View blog
  • Posts: 3,398
  • Joined: 28-November 09

Re: CSS problem

Posted 23 December 2009 - 11:19 AM

Set margin-top to 0, sometimes it doesn't default to that and needs to be zeroed to fix errors like that.
Was This Post Helpful? 0
  • +
  • -

#3 Daily.matters  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 20-November 09

Re: CSS problem

Posted 23 December 2009 - 11:23 AM

View PostLemur, on 23 Dec, 2009 - 10:19 AM, said:

Set margin-top to 0, sometimes it doesn't default to that and needs to be zeroed to fix errors like that.


Yes, that's right, it wasn't reseting the margins... found it, 2 minutes before i read your repy, but thanks anyway ! The scheme at w3schools helped me realize that borders and margins are in the level above padding !
Was This Post Helpful? 0
  • +
  • -

#5 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Re: CSS problem

Posted 23 December 2009 - 04:42 PM

You may want to create a css file called reset and use it, as it will do this to everything so that ALL browsers start from the same foundation before you start styling. Here's my reset sheet:

@charset "UTF-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* -------------------------------------------------------- */
/*			  RESET START OFF'S				*/
/* -------------------------------------------------------- */


html, body {
	font-size: 1em;}
	
h1 {
	font-size: 1.5em;}

h2 {
	font-size: 1.3em;}
	
h3 {
	font-size: 1.1em;}
	
h4 {
	font-size: 1em;}
	
blockquote {
	margin: 5px 10px;}

p {
	margin: 10px 0;}
	
ul, ol, p {
	line-height: 18px;}

a {
	text-decoration: none;
	color: #000;}
	
a:hover {
	text-decoration: underline;}
	
blockquote {
	margin: 10px;
	padding: 10px;}
	
strong {
	font-weight: bold;}
	
small {
	font-size: .6em;}
	
img.right, img.left, img.normal {
	margin: 10px;}
	
img.right {
	margin-right: 0;
	float: right;}
	
img.left {
	margin-left: 0;
	float: left;}



Hope that helps.
Was This Post Helpful? 1
  • +
  • -

#6 Daily.matters  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 20-November 09

Re: CSS problem

Posted 24 December 2009 - 03:28 AM

Yes, i'm defintly going to do that ! I'm going to inspire on your sheet but build my own, since there are a lot os the "presets" that I seem to always use !

Thx a lot !
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1