473,729 Members | 2,138 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Fonts, alignment, & Firefox

A few months ago I went to a web site that looked terrible in Firefox,
but fine in IE and Opera.

It turned out that because I had reset my default font size in Firefox
to be larger, that my larger fonts messed up the alignment of the CSS
elements on the web site.

Why does this happen?

More importantly, as a person using more and more CSS, how can CSS be
coded to avoid that happening?

Jun 27 '08 #1
2 2022
In article
<f7************ *************** *******@a70g200 0hsh.googlegrou ps.com>,
Steve <ti*******@gmai l.comwrote:
A few months ago I went to a web site that looked terrible in Firefox,
but fine in IE and Opera.

It turned out that because I had reset my default font size in Firefox
to be larger, that my larger fonts messed up the alignment of the CSS
elements on the web site.

Why does this happen?

More importantly, as a person using more and more CSS, how can CSS be
coded to avoid that happening?
The main reason that this sort of thing happens is because the boxes are
dimensioned in pixels whereas the fonts are dimensioned in eeither
percentages or ems. Naturally, they will then break out of a fixed pixel
box. The solution depends on the design. In general, it is better to
size your boxes in ems so that they too wax and wane with the user text

Where it is not practical to do this, you must be careful not to put in
content like large unbroken text or very long words. So that for all
practical purposes, they will wrap within the pixeled box.

Jun 27 '08 #2
Steve wrote:
because I had reset my default font size in Firefox
to be larger, that my larger fonts messed up the alignment of the CSS
elements on the web site.

Why does this happen?
Because many so-called web designers think a web page should be the same
as a print design. IOW they tend to be clueless about the media.
More importantly, as a person using more and more CSS, how can CSS be
coded to avoid that happening?
Don't try to make a pixel-perfect layout.

One of the worst things you can do is set a fixed height and width on a
text block. The tendency is fix the font size to stay within the
confines of the box, which doesn't work very well even when the box
dimensions are set in ems. Even worse though, is absolutely positioning
those fixed size boxes. Then things get really ugly really fast.

Setting a specific width (in %, em or px units depending on content and
design goals) is common, but leave the height at the default auto so it
adjusts as needed.

The mistake a lot of people make is trying to make complicated CSS
layouts without really understanding what CSS is *supposed* to do, or
the repercussions of various positioning methods. You need to start out
simple and work your way up, just like anything else. Practice makes
perfect, and all that. That's not to say your CSS will ever be perfect
(I know mine isn't), but if you study and practice it will be a lot less
imperfect than all those broken sites out there.

Jun 27 '08 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: anna | last post by:
Firefox Mozilla Browser Fonts / Format / rich text / webmail question I have Comcast. They do not support Firefox so they won't help me. When I use Mozilla firefox browser to access my web mail like comcast webmail, I cannot change fonts, underline, bolden words. I cannot see the icons. I think I have the same problem using Yahoo and Firefox.
by: Atul | last post by:
Hi, I have installed a truetype font (.ttf) on a linux machne (SUSE linux 10, KDE) by copying it to my .fonts folder. I can use the font in all applications like open-office and firefox browser. However, I cannot use the font in a python app that I am writing. The list returned by Tkfont.families does not contain this particular font. Any suggestions ?
by: Arne | last post by:
A lot of Firefox users I know, says they have problems with validation where the ampersand sign has to be written as &amp; to be valid. I don't have Firefox my self and don't wont to install it only because of this, so I hope some of you gurus can enlighten me with this :) In what circumstances can the "&amp;" in the source code be involuntary changed to "&" by a browser when or other software, when editing and uploading the file to the web...
by: ctclibby | last post by:
Hi all Have a customer that wants a specific font included in her web page design; Comic Sans MS. This is one of the MS core fonts. The problem I have is that some of the *nix browsers do NOT include these fonts by default. http://www.diamondvet.com/test renders those fonts correctly using an XP box. After I installed those fonts on my machine, firefox and mozilla both rendered them correctly. So here is the question:
by: KPants | last post by:
I'm currently attempting to fix an issue that's been occuring with the design template I made for my Myspace... At first, it looked perfectly fine in Firefox, but in IE, everything was off the the left side of the page, as apposed to centered. So I added the first two attributes to the code below, and it looks perfectly fine in IE! But in Firefox, everything's splattered over to the left side, similar to the way IE was. My question is: Is...
by: pt | last post by:
Hi, i am wonderng what is faster according to accessing speed to read these data structure from the disk in c/c++ including alignment handling if we access it on little endian system 32 bits system + OS e.g. Windows, Linux, WinCE. I am not quite sure about the alignment of the memory.... soln. 1: should be faster, I am not sure. idx size (bytes) 1 4
by: InvalidLastName | last post by:
We have been used XslTransform. .NET 1.1, for transform XML document, Dataset with xsl to HTML. Some of these html contents contain javascript and links. For example: // javascript if (a &gt; b) ..... // xsl contents abc.aspx?p1=v1&amp;p2=<xsl:value-of select="$v2" />
by: Chris Thomasson | last post by:
Here is some info on a C++ allocator prototype I am working on: http://groups.google.com/group/comp.lang.c++/browse_frm/thread/beeee1f61fdbb52c Any tried-and-true techniques for calculating the correct alignment of any C++ type the user can throw at it? For the initial code, I was assuming that the alignment(T) == sizeof(T)... Now that I am so close to being able to release this thing, I wanted to be able to stitch up this loose end. ...
by: issentia | last post by:
I'm working on this site: http://www.essenceofsoy.com/redesign/index2.html and I'm having a few problems with getting the layout exactly right. 1) When the menu items are rolled over, they cannot be clicked as links unless the mouse pointer is below the word. This happens in both Firefox and IE6. 2) In Firefox, the pink quote banner and two gray form boxes above and below the content aren't centered in the "content" div, and I can't...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.