View Full Version : Sexy Panels CSS Menu problem in FF

09-23-2011, 04:30 PM
1) Script Title: Sexy Panels Vertical CSS Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/sexy_panels_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

09-23-2011, 05:43 PM
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{

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

.sexypanels p{

09-23-2011, 05:48 PM
I always begin the css with a Meyer reset (http://meyerweb.com/eric/tools/css/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

09-26-2011, 01:01 PM
Thanks for the help guys. I went for ddadmin's solution as it seemed the easier option. This has cured the problem.