negative margin of tabs causes errors [#1240450]

when the canvas width is smaller then the with of the #page-title + primary tabs, one element is getting below the other. nice so far. but the negative margin on the tabs causes that the the label of the tab gets cut. (see attachments)

it gets fixed when you adjust the margin of the tabs like this:

ul.primary {
    margin: 0 0 -3px;
}

but I cannot see what causes the 3px gap in the first place. maybe this should better be fixed instead of adding negative margins to other elements

Comment	File	Size	Author
#1	style.css_.txt	17.02 KB	loominade
	less_space.png	35.43 KB	loominade
	much_space.png	27.86 KB	loominade

Comments

Comment #1

loominade commented 5 August 2011 at 12:45

Status:

Active

» Needs review

Status	File	Size
new	style.css_.txt	17.02 KB

I figured out a solution:

style.css line 297:

ul.primary {
    border-bottom: medium none;
    float: right;
    font-size: 12px;
    line-height: 30px;
    margin: 0;
    padding: 3px 0 0 8px;
    text-transform: uppercase;
}

style.css line 310:

ul.primary li a, ul.primary li a.active, ul.primary li a:active, ul.primary li a:visited, ul.primary li a:hover, ul.primary li.active a {
    background-color: #A6A7A2;
    border-color: #A6A7A2;
    border-radius: 8px 8px 0 0;
    border-style: solid;
    border-width: 1px 1px 0;
    color: #000000;
    font-weight: bold;
    padding: 7px 20px;
}