Sexy Panels CSS Menu problem in FF

[Franco50]

1) Script Title: Sexy Panels Vertical CSS Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...vertical_menu/

3) Describe problem: I am building a new website using the Sexy Panels CSS menu. The test page I have put together looks fine in IE8 but in Firefox (v3.6.22) the menu buttons have gaps in between them.

Sample page - http://www.raceandrally.co.uk/revamp/index2.htm

[ddadmin]

The presence of "P" elements inside your menu is what's causing the gaps in between the menu items. You can forcibly remove them by adding the following CSS rule to your existing CSS:

.sexypanels p{
margin:0;
}

Or to retain some bottom gap, do the following instead:

.sexypanels p{
margin:0;
margin-bottom:2px;
}

[azoomer]

I always begin the css with a Meyer reset

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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" ""
}

It helps getting the same look across browsers
but ok it may be overkill in this case

[Franco50]

Thanks for the help guys. I went for ddadmin's solution as it seemed the easier option. This has cured the problem.