By JasonMoreland on

I have been trying to place a little space between the Top row and the wrapped row. At the moment the sit tightly on top of each other. Is there a way to space between them say 3-5px? I have tried padding but don't seem to be getting anywhere with this one or just overlooking something simple.

Here's the code I'm using so far. It looks Ok but a small space would make the top row more readable.

ul.tabs.primary,
ul.tabs.secondary {
width: 700px;
white-space: normal;
}

ul.tabs.primary li,
ul.tabs.secondary li { margin:0;
padding:0;
display:inline;
white-space: nowrap;
}

⋅ Categories: Drupal 6.x

Comments

israelshmueli’s picture

israelshmueli commented

Something like:

ul.tabs.primary li,
ul.tabs.secondary li {
margin:0 6px;
}

instead of just margin:0;

Baker’s picture

Baker commented

I was having troubles making the tabs wrap on the profile page in Garland too. I wish this code would be included with the next Drupal release so others don't have to waste as much time as I did with this.

The file you want to add this code to should be in the :sites:default:css directory. Bumping the margin didn't work in Google Chrome, so I wound up adding this code to the end of my default .css file...

ul.tabs.primary,
ul.tabs.secondary {
width: 650px;
white-space: normal;
}

ul.tabs.primary li,
ul.tabs.secondary li { line-height:20pt;
display:inline;
white-space: nowrap;
}

Baker’s picture

Baker commented

I had to modify ALL of the CSS files in that folder to get the effect I wanted for all pages. I used Firefox with Firebug plugin installed to find which CSS files were affecting the look of the page. The CSS were being generated on the fly when a page is hit though, so there were many files I had to open and copy & paste that code into.