How do I stop the tabs on the 'my account' page from over running the right side border. I have noticed this on both Garland and Framework themes, doesn't matter if I use IE7 or FF 3.x

I am new to theming and styling, it has taken me long enough to learn the Drupal system and modules, though I can find my way around the files and I know some html as well as I like to think that I understand some of the CSS.

I would sure appreciate a tip! I have included a screen shot of what I am seeing on my site.

CommentFileSizeAuthor
#1 account_tabs.jpg296.3 KBkewlguy

Comments

kewlguy’s picture

kewlguy commented
StatusFileSize
new account_tabs.jpg296.3 KB

Sorry, here is the screen shot.

binford2k’s picture

binford2k commented

It's all dependent on the theme in use. Grab a copy of firebug and inspect the tabs-wrapper div.

kewlguy’s picture

kewlguy commented

Ok, so I got's me a firebug on the go and what do I find but;

ul.primary {system.css?i (line 215)
border-bottom:1px solid #BBBBBB;
border-collapse:collapse;
height:auto;
<strong>line-height:normal;</strong>
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:5px;
padding:0 0 0 1em;
<strong>white-space:nowrap;</strong>

When I turn off the white-space 'nowrap' line the tabs then stay within the content area, though the tabs then want to overlay themselves over each line now...sigh! round and round we go...lol I'm guessing here though I'm thinking the line-height 'normal' might need to change as well?

I go look for this in my theme and I find no system.css, anybody have an idea of how I can 'override' this setting in a theme?

I'd hate to hack it out of system.css on line 215 and then have it come back each time I update drupal core. I've notice that Garland does the same thing to the tabs.

Ideas? Tips? Tricks? Baby Steps? Anyone?

Jeff Burnz’s picture

Jeff Burnz commented

Use white-space: normal, then adjust the other attribute values till it looks right - http://www.w3schools.com/CSS/pr_text_white-space.asp

so in your themes css file:

ul.primary {
white-space: normal;
}

this will override system.css

kewlguy’s picture

kewlguy commented

@jmburnz Thanks for the quality tip. That's the one that hits the sweet spot. ah ha me says!

Should I be reporting this as a bug? I mean since I haven't modified the framework theme yet and I have just been installing modules, sorta, letting them have their way with the tabs. Otherwise this posting could be considered closed. And I am a happier camper!

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Closed (fixed)

Its not really a bug, just one of those design things that works most of the time but not all the time ;)

Its not the theme either, the css comes from Drupal core, and since Framework is a starter theme its not doing so much to override drupal core styles I imagine.