CSS margin problem

greg posted this at 16:02 — 26th August 2008.

Joined: Nov 2005

Could someone please take a look at the following code (css nav menu) and tell me why it seems to have a top margin of about 25px.
It doesn't matter what container it's in or what object is above it, a DIV, on its own etc it always has a 25px space above it.

dl#clanmenu dt {
  display:none;
  }
dl#clanmenu dd {
  padding:0; 
  margin: 0;
  }
a.xmenu, a.xmenu:visited {
  display:block; 
  width:5em; 
  height:3em; 
  background:#000; 
  text-decoration:none; 
  text-align:center; 
  color:#137796; 
  float:left;
  }
a.xmenu span, a.xmenu:visited span {
  display:block; 
  width:3em; 
  height:0.5em; 
  border-top:0.5em solid #000; 
  border-left:1em solid #000;  
  border-right:1em solid #000; 
  border-bottom:0.5em solid #000; 
  background:#137796; 
  overflow:hidden;
  }
* html a.xmenu span, * html a.xmenu:visited span {
  width:5em; 
  height:1.5em; 
  width:3em; 
  height:0.5em; 
  overflow:hidden;
  }
a.xmenu:hover {
  color:#40BFE7;
  }
a.xmenu:hover span {
  background:#40BFE7;
  }

decibel.places posted this at 17:18 — 26th August 2008.

He has: 1,494 posts

Joined: Jun 2008

Hey greg,

Can you post a link? of the full code?

my guess would be somewhere in here:

display:block; 
  width:5em; 
  height:3em;

display:block; can do funny things

also, depending on your body font size, 3em could be arond 25px?

another idea:

doesn't dl have a default top margin? try

dl#clanmenu{
  margin-top: -25px;
  }

greg posted this at 17:53 — 26th August 2008.

He has: 1,581 posts

Joined: Nov 2005

Hmm, I'll have a look at the block thing. I know what you mean, I have yet to master that element, I often find weird things with it.

As for the default margin on the dl, the dl in the code is assigned a margin of 0. If I change that to a minus value it does shift the bit up I want to shift up, but why would it be 'down' if set to 0?

EDIT
I made a new line with dl#clanmenu{margin: 0;} and that seemed to sort it.

Cheers.
I also find some CSS things like that wierd, I have the margin set to 0 on the code

dl#clanmenu dd {
  padding:0;
  margin: 0;
  }

But it seems to want an exact instance of it. Presumably that's then only for the dd within the dl.
urgh

decibel.places posted this at 19:32 — 26th August 2008.

He has: 1,494 posts

Joined: Jun 2008

yes, I guess setting the margin to 0 overrides the default.

Hooray!

yes, since the dd is a child node of dl, you are setting the margin for that, not for the parent.

Cascading Style Sheets: think of the styles as a waterfall, always flowing down...

BTW - I know everybody uses Firebug, but in the Firefox Web Developer tool, there is an "edit CSS" feature that allows you to change the css for every stylesheet in play and immediately see the results (you still have to save and upload it) - great for Drupal theming!

kamaldeeps posted this at 12:01 — 3rd September 2008.

They have: 2 posts

Joined: Sep 2008

But it seems to want an exact instance of it.