Help on font sizes and browser resizing issues

When browsers resize the text, they can have a significant impact on the my designs. I am using CSS positioning, and not tables. I am also using relative font sizes, usually ems. I can get everthing to look right on my pages when the browsers are set at the normal or medium text size. But, i run into problems when the browser is set at the large or largest text size. I need help dealing with this issue in general. But, here's an example that best illustrates the problem:
I set some white-colored text on a dark background in a banner at set at 800px x 50px. The font size is set at 1 ems. The background color for the rest of the page is white. So, when the white-colored text fits easily within the banner, everything works okay. But, when the browser resizes the text, the white text flows beyond the dark background color of the banner and becomes invisible on the white background of the page. Is there some way to use margins, padding, or line size to manage this type of situation?
What are the best tactics to use regarding font size when using CSS positioning ?
Thanks for any help on this question.

Thank you for your prompt response. I will put my page on a test server when I can. But, for now, here is my code below.
I get your point about flexibility.The question is how? What are the best approaches to use? I have the sense that more experienced designers have some conventional tactics for ensuring the pages read reasonably well even when the text size is enlarged in the browsers, but I am not sure what approach might work in general.
Part of the issue with this particular design is that I am actually using a background image in the header/banner. And it has a set height:51 px. I don't want it to repeat it vertically whenever someone enlarges the text size in their browser.
Again, I would appreciate any help offered.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="Container">
   <div id="Banner">
     <div class="imageleft" id="Logo"><a href="pricinginfo.html"><img src="images/Logo177x51.jpg" alt="Darragh Logo" width="177" height="51" border="0" usemap="#Map" /></a>
<map name="Map" id="Map"><area shape="rect" coords="8,7,166,41" href="pricinginfo.html" alt="Darragh Logo" />
<area shape="rect" coords="167,39,168,53" href="#" /></map></div>
     <div id="Bannertext">wines to savor with family and friends </div>
     <div id="Email"><a href="mailto:Darragh Cellars, Proprietor, Andrew Aitken [email protected]">Darragh Cellars, Proprietor, Andrew Aitken [email protected]</a></div>
   </div>
   <div id="FlashArea"><img src="" alt="" name="FlashArea" width="800" height="400" id="FlashArea" style="background-color: #CCCCCC" /></div>
   <div id="leftBlock">Darragh Cellars produces boutique wines that express a balance between earth and fruit. Our wines are crafted to provide a rich wine experience for all palates.- Proprietor, Andrew Aitken Produced & Bottled ByCRUSHPAD San Francisco, CA www.crushpadwine.com </div>
   <div id="rightBlock"><a href="pricinginfo.html" id="astandardlink">Reservations & Contact Information</a>: Darragh Cellars offers an extremely limited supply of Pinot Noir and Chardonnay vintage wines. Reservations may be placed directly with Proprietor Andrew Aitken. </div>
</div>
</body>
</html>

Similar Messages

Need help with margins & footer, and browser display issues....

Hello,
I am working on a splash page in Dreamweaver, but am having trouble with the margins and the footer.
1. Margins: I basically want/need the center contents of the page never to extend past the contents of the header and footer.
If you look at the page header, the logo on the top left and "Student and Faculty Portal" should be the margins. Seems to look fine on some users' systems, but not consistent across our department.
2. Footer: I can't seem to figure out how to keep the footer at the bottom without rising above the background image across all browsers & screen sizes. Looks fine on some, but too high or low on others. (Looks the worst when the background image shows underneath the footer).
3. Browser/Screen Size: Depending on which PC I am using, my page changes. At the office, on my 26" monitors, my page looks fine, however, when on different laptops, my right div (that contains the login table) goes under the left. How can I code my page so that it looks consistent on all?
I guess my main complaint/need is for my page to look consistent regardless of screen size, browser or system.
If you could take a look, I would greatly appreciate it.
Your expertise and time is greatly appreciated. I hope I was clear enough, but please let me know if there is any confusion.
http://www.saintleo.edu/PortalLanding/PortalSplash.html
Kind regards,
JK

1. Create a div around your content, give it a width and margin: 0 auto;
2. Follow this tutorial. It will be a lifesaver and it sounds like what you are trying to do: http://css-tricks.com/snippets/css/sticky-footer/
3. See #1. In addition, remove right-margin from login box, add float: right; and remove float: left; from main content.

Change font size and layout of reports in Report painter

Hi,
I want to change the print layout and the fonts of reports created in Report Painter.
In the print output i am getting 40% of the total screen
My requirement is to increase the font size and the print layout to fullscreen so that the report layout fits to the page.
Kindly help.
Parin

Hi,
Well i generate a report which has two three columns.....
1) Description
2) Column 1 for fiscal year 2009
3) Column 2 for fiscal year 2008 for comparison
Here after these columns we have unformated space as a column.
Now we tried to hide this column but the system is not allowing to hide this.
How can we remove this unformatted column/space from the print output.
Thanking you,
Parin

Pages Copy & Paste Style Buttons don't change font size and style?

Shouldn't the font size and style also be copied and pasted when I use the buttons to copy & paste the style within a page?

Hello
It seems that the description of these buttons in the Help is not clear.
After several attempts, one may understand that they don't apply to attributes inserted "by hand" with cmd + B for instance but to "styles" defined in the Styles drawer.
Yvan KOENIG (from FRANCE dimanche 30 mars 2008 20:34:35)

Set-up custom font, font size, and color for writing new and reply e-mails in Thunderbird

I know that I can select the font, size, and color for writing each new and reply e-mails in Thunderbird, but I don't want to have to do this each time. I want to set-up the default font, size, and color for all new and reply e-mails. It already comes up with a default one, but I want to change it, but can't figure out how to do this. I'm sure it is quite simple, but I don't know how to do this. Thank you in advance for help.

Tools > Options > Display > Formatting tab
Default font: select font
Select size : eg; 14
Click on 'Advanced' button and set all the sizes to 14
Select : 'allow messages to use other fonts'
click on OK
Click on 'Composition'
Under the 'General' tab
Suggest you set HTML font to 'Variable width' and Size : 'Medium'
Select the 'Text colour' you would like to compose email using
Select the 'Background colour' you would like to use when composing emails.
click on OK to save all changes.
This will set the display email list to the selected font.
It will allow received emails to use the font the sender used.
When you compose an email it will also use the same font settings.
The message 'Display' settings in the above section also apply to messages that you compose. The settings are not sent, so they do not affect how your messages appear to recipients.
The settings in the ''Composition' section can affect how messages are sent. If you make unusual choices, then people who receive messages from you might find them difficult or impossible to read. Hence, why I suggest you leave it as 'Variable width' and allow the 'Display' settings to set the default used for composing emails.
More info:
* http://kb.mozillazine.org/Font_settings_in_Thunderbird

Font size and Colr

Here is a simple program just for demonstration.
I would like to change the font size and color of this program to SMALL and
RED respectively(when I install it in my handset, it does not fit in the screen
properly). I have tried read the Font in the midp api but am not getting it; its just talking
about I don't know Canvas and such kind of stuff.
Please could someone just help me with this program just as a demonstration
so I could know exactly how to go about it. Thanks in advance.
import javax.microedition.lcdui.*;
import javax.microedition.midlet.*;
public class AddTwoNum extends MIDlet implements CommandListener
     Display display;
     Form mainForm = new Form("Summation of Numbers");
     TextField firstNum = new TextField("First Number", "", 15, TextField.NUMERIC);
     TextField secondNum = new TextField("Second Number", "", 15, TextField.NUMERIC);
     TextBox sumBox;
     Command exitCommand = new Command("Exit", Command.STOP, 1);
     Command calCommand = new Command("Calculate", Command.SCREEN, 2);
     public AddTwoNum()
     public void startApp() throws MIDletStateChangeException
          display = Display.getDisplay(this);
          mainForm.append(firstNum);
          mainForm.append(secondNum);
          mainForm.addCommand(exitCommand);
          mainForm.addCommand(calCommand);
          mainForm.setCommandListener(this);
          display.setCurrent(mainForm);
     public void pauseApp()
     public void destroyApp(boolean unconditional)
          notifyDestroyed();
     public void commandAction(Command c, Displayable d)
          if (c == exitCommand)
               destroyApp(true);
          else if (c == calCommand)
               int first, second, sum;
               first = Integer.parseInt(firstNum.getString());
               second = Integer.parseInt(secondNum.getString());
               sum = (first + second);
               sumBox = new TextBox("Summation", "The summation is\n"+sum, 25, TextField.ANY);
               sumBox.addCommand(exitCommand);
               sumBox.setCommandListener(this);
               display.setCurrent(sumBox);
}

only StringItem supports setFont(Font) method. if you want the Font support for TextField
and TextBos, you should implements it !
or write your own CustomItem
good luck

Changing font size and style in quiz slides

Captivate v4
Can anyone help explain how I can change the font size and style (italic for example) of the 3 text entries with a quiz slide.
1. Quiz Name
2. Question
3. Answer
When I create a new quiz the Quiz Name is Arial 22, The Question is Arial 18 and the Answer is Arail 12.
I am pretty sure i must have selected these somewhere - but unable to find where and I need to change these to some new default settings, as I am having to amend each slide as I insert it.
NEL

In Captivate 4 you'll have to select one of these items and change the font size, then Apply to All objects of the same type. In Quiz Slides the Question Title caption, Question Text caption, and Question Answer caption are all special types of captions unique to quiz slides. So by changing one and then applying to all, you can do all such items in the quiz easily.
In Captivate 5/5.5 you can achieve the same result by changing the Object Style.

When I put Pages in fullscreen my bar with fonts, size, and format disappears

in old pages, in fullscreen i could scroll my mouse up and i would get the fonts, size, and formant, etc. bar. but now it just disapeares?
                                                                 |
                                                                 |
                                                                V

Are other apps working fine in full screen? Just Pages?
It is working for me, so perhaps a restart to see if that helps?
But like many, I am sticking with the old Pages for now.

Is there a way to change the font size and color of text in the calendar app?

Does anyone know a way of changing the font size and color of text in the calendar app that comes with the iPad 2? It is very hard to see the small gray numbers on the calendar. Thanks

Looks like you didn't get a reply on your post, but it is still a problem. Font size is supposedly changeable via "Accessibility" in Settings, but it doesn't work. You can turn on "Zoom".

How to change font size and style in keynote for ios

How to change font size and style in keynote for ios

Same situation for report parameter input value font. What ever we do , it is still Arial and size 10.

Font size and style

How can I change the font size and style?

From what I've seen YOU CAN'T! I've just posted to Apple to include such a basic rudimentary preference. I can't believe this option has never been available.

Font size and color

can I change the font size and color of the items in a list?Font size can be changed and it is working in emulator but not in phones.I am using Nokia 6630 for testing purpose. I can't find any options to change color.

graphics can change color ( in later versions off wtk)

How do I change the font size and color in a text box?

How do I change the font size and color in a text box?

Really frustrating to find the first time but simple once you figure it out. I think I spent hours trying to find this. Simply right click on a blank spot in the toolbar up top and select Properties Bar. There it is! The available properties will change depending on whether you have the content (text) selected or the box itself.
I haven't found a way yet to make it show up as a regular part of the toolbar. It floats around and gets in the way so I don't leave it on and then have to open it again when I need it. Again - frustrating; but at least it's there!

Can we change font size and font type in reports

Hi All Technical/Functional Masters,
We are developing some transactional reports in ISU. this report has 20 columns to be printed. On screen, display is not a problem but client has a requirement to download this report in PDF format and wants to print on A4-paper in Landscape. Although we have managed to accommodate all the columns on A4 paper but have to compromise with font size that are very small and not visible. If we download the report in excel format we are able to maintain the font size 8 and accommodate all columns after little format but same in PDF is a problem.
Can anyone tell whether we can increase the font size and change font type(from SAP standard to 'Arial') before sending the output in PDF ? Is there any property or utility that can be changed or used for this purpose.

Function Module : CONVERT_ABAPSPOOLJOB_2_PDF
Include : THSTXWFPL
for modify font size
decrease fontsze foncharacter will increase
fontsize = 120.     <-- Change
fontsize = 100. or fontsize = 80
Depend on your logon lang. My case logon 'TH' or 2. I modified font ZCORDIA (refer CordiaNEW thai font)
if is_cascading is initial.
case language.
when '0'. "Serbian
    font = 'COURCYR'. devtype = 'SAPWIN'.
when '1'. "simpl.Chinese
    font = 'CNHEI'.    devtype = 'CNSAPWIN'. cjklang = 'X'.
when '2'. "Thai
font = 'THDRAFT'. devtype = 'THPDF'.
   font = 'ZCORDIA'. devtype = 'ZMTHSWNU'.
    font = 'THANGSAN'. devtype = 'ZPDFUC'.
when '3'. "Korean
    font = 'KPSAMMUL'. devtype = 'KPSAPWIN'. cjklang = 'X'.
when '4'. "Romanian
    font = 'COURIER'. devtype = 'I2SWIN'.
when '5'. "Slovenian
    font = 'COURIER'. devtype = 'I2SWIN'.
when '6'. "Croatian
    font = 'COURIER'. devtype = 'I2SWIN'.
when '8'. "Ukranian
    font = 'COURCYR'. devtype = 'SAPWIN'.
Add font Cordia Thai
SE73 --> Fon familia --> ZCORDIA
Load Font Cordia thai to system
SE38 --> RSTXPDF2UC
load CORDIA.TTF
SE73 --> printer font --> 'ZMTHSWNU'
Add ZCORDIA font and copy AFM Metric from = 'THDRAFT'. devtype = 'THPDF'.
Modify AFM
example
*----- OLD--
StartFontMetrics 2.0
sapFamily ZCORDIA
sapHeight 000
sapBold false
sapItalic false
StartCharMetrics 0183
WX 0500 ; N space                          ;
WX 0500 ; N exclam                         ;
WX 0500 ; N quotedbl                       ;
WX 0500 ; N numbersign                     ;
WX 0500 ; N dollar                         ;
WX 0500 ; N percent                        ;
WX 0500 ; N ampersand                      ;
*--NEW--
StartFontMetrics 2.0
sapFamily ZCORDIA
sapHeight 000
sapBold false
sapItalic false
StartCharMetrics 0183
WX 0375 ; N space                          ;
WX 0375 ; N exclam                         ;
WX 0375 ; N quotedbl                       ;
WX 0375 ; N numbersign                     ;
WX 0375 ; N dollar                         ;
WX 0375 ; N percent                        ;
WX 0375 ; N ampersand                      ;
Result : decrease space between character.   Then Your PDF will have BIGGER FONT.
Rdgs,
Suwatchai

A mode to change font size and bold in every page?

Due to problems described here https://support.mozilla.org/en-US/questions/1012057?esab=a&s=&r=0&as=s I have clear that I need something (an extension, maybe) that allow me to recognize and change font size and bold of the fonts in every page.
Does exist something like this?
Maybe also for bookmarks toolbar...

Hi RichterB,
You can change this in the Content Settings of Firefox. Go to "3 bar" menu and click on Options. Click on content and uncheck "Let websites choose their own styles" and select a bold font type.
Also try [https://addons.mozilla.org/en-US/firefox/addon/stylish/ Sytlish].

Help on font sizes and browser resizing issues

Similar Messages

Maybe you are looking for