CSS global page style is affecting my toolbar DIV

[OldManRivuh]

I don't know if this is a theme question, but it seemed better here than Extension Development.

I have a problem with a self-created toolbar in a DIV that is being made 100% of the window size because
of an inherited 'global' "width: 100%" style.

There are up to 6 buttons in this toolbar, and the original author just let the DIV auto-re-size
based on however many buttons were chosen in options.

I can't see how to make it ignore that "100%" and just auto-size the width.
This only happens on certain web pages that do the 'global' width thing.

There's no way to tell a DIV to ignore all other styles is there?
That's really what I need.

Here is more of an explanation: viewtopic.php?p=12494831#p12494831

[patrickjdempsey]

DIV is an HTML page element and certainly not an XUL "toolbar" element. Not really in the realm of "Themes" and somewhat outside of the usual Extension expertise. A screenshot of the problem and a screenshot of DOM inspector showing how this all works would be helpful. Aside from that it would probably require someone to tear apart that extension to figure out why it does what it does.

[patrickjdempsey]

OK, it took me a little while to figure out what your extension does. Your problem is a very basic problem with HTML layout. The gist of it is this: HTML is an ancient language designed for webpages that look like documents and is miserable for layout. A DIV is what is called a "block level" element. As such by design it fills the entire width of the page. You can use CSS to force it to be an "inline element":

http://www.webdesignfromscratch.com/htm ... nd-inline/

[OldManRivuh]

Thanks for trying to help.
That didn't work, but maybe I'm on the right track now.

I'm pretty sure it's the "overriding" 100% that's making it go wide.


FIXED. I added "width: inherit !important;".

[patrickjdempsey]

No clue without spending hours digging through the code. I would recommend adding some kind of debugging mode that makes the toolbar always visible so it's inspect-able with DOM Inspector, then you can modify the code "live" using a CSS editor.