FF text size

freenity · 03-12-2008, 08:28 PM

Hi
I always use my Firefox with text size a bit zoomed, and I was wondering if there is any way to bypass this, because now I'm developing a wordpress theme and when I see it in ff (with zoomed text) it looks aweful, so I just reduce it a bit to a normal size and it looks fine.
Is there any technique to bypass this??

p.s. the theme of course uses css...

Thanks.

DeMo · 03-12-2008, 09:06 PM

You mean preventing the user from zooming in/out your page? If that is case then I guess there's no way to do it, the zoom is a user-controlled feature of the browser, we can't manipulate it via CSS or JavaScript.

You can, however, create a JavaScript system that increases/decreases font size on the fly. Take a look here for an example, you're gonna see 4 letter A's, clicking them will change the font-size of the article. I don't know Wordpress but there's probably a plugin out there to add this feature.

freenity · 03-12-2008, 09:39 PM

thanks.
This feature is used in phpbb3 also.

What I want to do is make it zoom friendly. So when a user zooms it, it doesn't look so bad

Gareth · 03-13-2008, 09:07 AM

To make sites zoomable I think you would have to make everything use a percentage value for their size. e.g.

Code:

.blah{
     width: 75%;
     font-size: 1.2 em;

Gareth

Aaron · 03-14-2008, 10:58 PM

Normally, you use EM or PT for font sizes. To make them not scroll, use PX.

If you want to code everything well, you want to make everything work at any size. All of my sites work on both super small screens and super large screens. Most of the time using a % is the best way to go, unless if you want a specific value, such as the width of an image.

And while you are at it, try not to use div's at all. Scary thought, huh?

freenity · 03-14-2008, 11:22 PM

Quote:

Originally Posted by Aaron

Normally, you use EM or PT for font sizes. To make them not scroll, use PX.

If you want to code everything well, you want to make everything work at any size. All of my sites work on both super small screens and super large screens. Most of the time using a % is the best way to go, unless if you want a specific value, such as the width of an image.

And while you are at it, try not to use div's at all. Scary thought, huh?

:\ what do you mean not using divs ???
What should I use then?

wGEric · 03-18-2008, 06:10 PM

He means make your code schematically correct. So titles use h1, h2, etc. Paragraphs use p. Don't throw everything in a div with a class or whatever.

freenity · 03-18-2008, 06:14 PM

of course I don't put everything in a div directly.

Aaron · 03-20-2008, 02:45 AM

I was actually being sarcastic. It was more of a challenge than anything; try to make a working web page without using a single div.

Semantically correct code is the next best thing though ;)

Salathe · 03-20-2008, 03:02 AM

Quote:

Originally Posted by Aaron

Semantically correct code is the next best thing though ;)

You appear to be implying that using DIVs is somehow not semantic. That's a general statement to make and on the face of it is completely wrong. There is no reason why the HTML markup cannot be both entirely semantically written and include DIV elements. So long as they're used for their intended purpose (hmm, what does DIV mean...) then it's a-ok to use them. That said, there's no reason why using DIVs should come as any particular requirement when writing a HTML document.

In contrast, I think we all know not to use:

HTML Code:

<div class="article_wrapper">
    <div class="title">My Article</div>
    <div class="paragraph">This is my cool little article</div>
</div>

... or maybe not.

Aaron · 03-20-2008, 11:28 AM

Divs used correctly name elements. So their intended purpose is to provide a block level <span>. such as below:

HTML Code:

<div id="HomeFooter">
  <ul>
    <li><a href="#">Footer Text</a></li>
  </ul>
</div>

In here I am naming the footer, but don't think that I am naming it just because I use ID.

Id is used for elements that are used once in the page; logoStrip, leftColumnContent, footerLinks, ect. are all things that need ID's.

Classes are for elements that are used more than once, so on this forum each post can have its own css class.

[/rant]

My post above was just saying that coding semantically correct is hard for some people. the code block you illustrated proves it. IPB Board uses too many Div's as well. Coding without <div>'s, however, looks like an impossible feat to many people. I just made a fun little navigation with that is just a list and a LOT of css :/. I even had to take a shortcut and put <br /> tags before the link text to move it down.

mew mew

if anyone can help me out on the navigation to remove the break tags I would be grateful.

And, Freenity, sorry for hijacking.
edit:
Read more: The global structure of an HTML document

Salathe · 03-20-2008, 01:20 PM

Quote:

Originally Posted by Aaron

HTML Code:

<div id="HomeFooter">
  <ul>
    <li><a href="#">Footer Text</a></li>
  </ul>
</div>

Why not any of the following?

HTML Code:

<!-- *far* more concise than your html -->
<p id="footer"><a href="..." title="...">Footer Text</a></p>

<!-- oh, so you did want a list? -->
<ul id="footer">
    <li><a href="..." title="...">Footer Text</a></li>
    <li><a href="..." title="...">Footer Text</a></li>
</ul>

I know you were just giving an example, but it's always nice to give useful, reasoned examples. Notice the title attribute for all links, I think that was an important omission in your example, since we're on the subject of giving elements meaning.

Quote:

Divs used correctly name elements. So their intended purpose is to provide a block level <span>

Um, no that's not it at all. The DIV element is there to DIVide a document into a sub-section. A DIV used correctly defines a discrete section of the document, with or without a name or some form of labelling/hook for CSS styles to reference.

The fact that browsers display a DIV at a block level is merely convention (it makes sense) but a DIV can quite happily be used inline or floated and still have good semantic value -- the DIV is dividing up the document, regardless of how the document is presented. A SPAN is something entirely different, and its meaning is easy to understand; just read the tag literally and you've got it.

Aaron · 03-20-2008, 08:56 PM

Quote:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV)...

The global structure of an HTML document

The way that you phrased it is right, but <div>s displaying at block level isn't just convention.