CSS - Backgroud/text Size Query

I've been using a 3 column fluid layout and so far so good - works in all browsers and resolutions with some standard hacks...

Except with huge text sizes in Firefox.

I've used ems all the way and was wondering what the majority of people do when considering how much work to put in to ensure that people with really really poor eyesight can actually get the same experience as everyone else.

I tried expanding the text size on dozens of major websites and it appears there probably is some limit where it's not worth considering fixing overflowing divs on large text size.

So what does everyone else do?

Is this the right place to ask?

Hey,
wondering if any of you could help me with regards to syntax needed in CSS (im guessing) to make text fields in a form taller and wider?
Thanks,Sean

Hi,
This is only happens in IE, in firefox (the only 2 browsers I tested) works fine.

http://nazgulled.no.sapo.pt/test.html

There's only one image inside the <div> tag, and I have set that div tag style to have a 10px height. But that doesn't work on IE... it's like there were some spaces wich because of the font-size it makes the height be more than 10px.... I wanted to fix that but how can I do it?

One solution is to make the div tag like this:
Code:

<div id="test"><img src="spect.gif" width="300" height="10" /></div>

instead of this:
Code:

<div id="test">
  <img src="spect.gif" width="300" height="10" />
</div>

But I don't want to fix it that way...

Any help would be hot, thanks.

how can you specify a new font size in a select list. I need to make the items appearing in that list smaller than they already are.

I have this problem making this menu and I have multible <h1></h1> on each title of the of stuff. It seems that the text gets bigger and bigger then when its to big then the text in the <h1> goes back smaller. Is there a way to fix this?
Here is my code.

Code:

h1 { font-family: cursive, sans serif;
 font-weight: normal; font-size: 200%; font-style: cursive;}

EDIT:The strange thing is that I know of this wird effect only happens in IE.

Thank you, sorry to be a bother but I do want to have a good first impression on my site that I am working for Ernies Bar & Grill at my town.

I am having few html pages with external CSS used. Now when i want to change the brower text using View->Text size, its not allowing.
Yes, i can change the font size in my CSS but I dont want all should see in the same font. Few people viewing those pages may not like that font.

So, Can any body help me to find out how to change the text size of an html page having CSS.

hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like:

Code:

<div class="column3">
<div class="padding">
<?php if( $this->countModules('right') ): ?>
<jdoc:include type="modules" name="right" style="xhtml" />
<?php endif; ?>
</div>

And css for that part of the page is:

Code:

#index .box .column3 {width:252px;}

Hello: I am building a website for a broad audience. I need there to be an option for text to be resized for those who have trouble with reading screens. I am trying to have the text on HTML pages be changeable through CSS.

Two examples I offer are (URL address blocked: See forum rules) and (URL address blocked: See forum rules)

On the top right corner of the screen, there are options to change the text size without switching to a new HTML page. I believe this is done using CSS (perhaps Live StyleSheet Selector). I'm not really sure.

If anyone can help me, I would really appreciate it. Thanks!

Deanna

Hi,

Can anyone recommend how best to how to dynamically constrain amount of Text/Content in a DIV area that can vary in size??

That is, say you have:
(a) a content (DIV) area on your view that can expand/contract depending upon browser size ( i.e. when someone is re-sizing the browser window) and
(b) dynamic text/content that is to be displayed, based upon user input - e.g. image a defined area/size for several user comments for example. Users can create their own comments, but you only want them to be able to take up a given amount of screen resource, and then perhaps have a "...more" link at the bottom if they go over.

How can I best setup this up? e.g.
(1) How to setup the layout/CSS so that if more text / content is present in the DIV area that can be displayed that the DIV area doesn't expand due to the extra content the user put forward, and/or
(2) Do I need to also complete this by programming what content comes out? E.g. in Ruby on Rails say then the question would be how to calculate how much text/content can fit in the current size of the DIV (noting browser re-sizing) so that you get the chance to put the "...more" link at the bottom? Hopefully this approach isn't required.

Any other suggestions welcome that address what I'm trying to do are welcome, which is really offering a area for display of user feedback where each piece of feedback has a maximum area it can take on the main screen only, and also that browser re-sizing is possible.

Tks
Greg

I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want.

simple example:

CSS:
Code:

a:link, a:visited, a:active {
    font-size: 1em;
}
a:hover {
    font-size: 1.5em;
}

HTML:
Code:

<div>
    <a href="#">Text</a>
</div>

Hi there,

I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right.

Code:

<font color='white'><font size='1' face=verdana size=1>

I couldn't find the equivalent of this in CSS

This is my last experiment but it doesn't seem to work either

Code:

fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}

Thanks

Okay here's the problem, I have used px instead of % and I have a feeling it's ruined my whole site because of the fact that users can set their font size custom which TOTALLY messes up margins and things that I have set so precisely.

Here is my site: www.msredimp.000webhost.info

At small it works perfectly and the forms stay all normal, but when it's increased or decreased it totally ruins it.

Is there a way to force the settings in Mozilla to normal size? Or any other way?

Thank you, and sorry for being such a newbie.

I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)?

So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0,


How do you get a simple tag like

body {
font-size:small;
}

to be equal in all browsers?

Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way?

By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it.

It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering.

B

New to CSS, but I'm looking for the following:

I would like to create this matrix, with say 3/3 fields. Each of these fields will have an image of a particular size. The size for all 9 fields are identical. So something like:

*******************************
* * * *
* Image 1 * Image 2 * Image 3 *
* * * *
*******************************
* * * *
* Image 4 * Image 5 * Image 6 *
* * * *
*******************************
* * * *
* Image 7 * Image 8 * Image 9 *
* * * *
*******************************

I defined the matrix using div with the code:

.matrixX10 {
margin-top: 10%;
position: absolute;
}

.matrixX20 {
margin-top: 20%;
position: absolute;
}

.matrixX30 {
margin-top: 30%;
position: absolute;
}
.matrixY10 {
margin-left: 10%;
position: absolute;
}

.matrixY20 {
margin-left: 20%;
position: absolute;
}

.matrixY30 {
margin-left: 30%;
position: absolute;
}

I defined each field as in eg:
<div class="matrixX10 matrixY10">image 1</div>

That actually works, but I would like to define the size of these images. Defining the size of the div does do anything (do I overlook something) and I do not like to, well define all images individually. Do I need to add another class, or am I writing a really messy code?