Search jQuery

jQuery Forum

nathan.ma..

Font sizes

in Using jQuery UI • 14 years ago

<div>Below is a bit of code that show how the font sizes inside of a ui component change when the elements are inside of a table. How can I get the font/input elements to adhere to the ui styles?</div><div>
</div><div>
<html></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><head></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><link type="text/css" href="/css/ui-theme/jquery-ui-1.7.2.custom.css" rel="Stylesheet" /></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><style type="text/css"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>body{ font: 62.5% "Verdana","Arial","sans-serif"; margin: 50px;}</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></style></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></style></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><script type="text/javascript" src="<a href="http://www.google.com/jsapi">http://www.google.com/jsapi</a>"></script></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><script type="text/javascript"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>// Load jQuery</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>google.load("jquery", "1.3.2");</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>google.load("jqueryui", "1.7.2");</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></script></div><div></head></div>
<div><body></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><div class="ui-widget"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><div class="ui-widget-header"></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>Header</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><div class="ui-widget-content"></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>

Hello from JS Bin

</div><div><span class="Apple-tab-span" style="white-space:pre"> </span><table></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><tr></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><td></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>test font</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></td></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></tr></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></table></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div></div><div></body></div><div></html></div>

Replies(2)

nathan.ma..

Re: Font sizes

14 years ago

bump<div>
</div><div>I was really hoping to figure out a best practice on how to get the fonts/elements to look the same inside of a table that is in a ui-widge element.</div><div>
</div><div>Nathan

scottjehl

Re: Font sizes

14 years ago

Hi,
Tables have a default browser font size that's sorta large, so even if
you pull all the UI classes out of your markup, the TD will be
significantly larger than the text that precedes it.
By applying the ui-widget class to a parent element, you'll be setting
a font-size for that element which will cascade through into child
nodes, including that table, which will increase its size even more.
UI doesn't usually set font-size on specific elements, but rather just
classes, so you'll need to style elements within UI widgets
accordingly.
Most of the gallery themes on the ThemeRoller site have a global font
size of 1.1em, sometimes varying a little depending on the font
family. You'll want to set font-sizes on child elements of ui-widget
so that they can size proportionally to their parent elements. The
alternative to this is to set a px-based global font size, which will
prevent font-size inheritance but won't scale well in older browsers.
In your case, it looks like this rule:
table { font-size: 1em; }
will bring the table's font-size into a more consistent size.
Does this help?

Top Reply

Response title

Attachments

jQuery Forum

Font sizes

Replies(2)

Re: Font sizes

Re: Font sizes

Statistics

Tags

Actions

Related Posts