What To Do About User-Side Text Increase?

Doctor_Varney

08-27-2010, 02:51 AM

Hi, I'm having real trouble with the idea someone might increase their text size whilst browsing my page. Fine at medium/default, but when I alter text size (or magnification in Firefox), the layout is destroyed because text pops out the bottom.

What I'm looking for is advice on a method of design that can be used to make sure the whole wrapper and all the columns can somehow scale, to accomodate.

I hear people saying CSS is flexible, but I've never found this to be so. I find it rather rigid and confusing to be honest.

Sorry, I can't show you any examples at present because I don't have anywhere to upload to but I can post my code here.

Firstly, I have a lovely little menu that scales beautifully with text-increase. It goes like this:

#column_3 img {
margin-left:40px
}

#column_3 p {
font-size:10pt;
text-decoration:none;
width:325px;
text-align:justify;
margin:0 auto;
margin-top:10px;
}

#column_4 {
width:192px;
float:left;
background:url(menu-middle_back.gif) repeat-y
}

#menu-top {
width:100%;
height:123px;
background:url(menu-top_back.gif) no-repeat
}

#menu-middle {
width:100%;
background:#000 url(menu-middle_back.gif) repeat-y
}

#menu-bottom {
width:100%;
height:43px;
background:url(menu-bottom_back.gif) no-repeat
}

And the corresponding markup, thus:

<div id="column_4">
<div id="menu-top">
 
</div>
<div id="menu-middle">
<ul>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
</ul>
</div>
<div id="menu-bottom">
 
</div>
</div>

But this... well, I don't know what to do with it. The text falls out the bottom when the text is increased.

#column_3 { /*Main content area*/
width:432px;
height:auto;
float:left
}

#col-3_upper {
width:100%;
height:20px;
background:url(col-3_upper-back.gif) repeat-x
}

#col-3_middle { /*Where the text goes*/
width:100%;
height:auto;
background:#fff
}

#col-3_bottom { /*a way of making a footer which spans column_3 only*/
width:100%;
height:100px;
background:#fff
}

Perhaps I should add that these columns are floated, there being a total of four in the line.

What I'm stuck on is, I don't quite know how to make a proper wrapper for my page. So far, my wrapper looks like this:

#wrapper {
width:762px;
height:800px;
margin:0 auto;
background:url(wrapper_back.gif) right bottom repeat-y;
}

Any help and advice will be appreciated.

Many thanks

Dr. V

abduraooft

08-27-2010, 07:14 AM

What I'm looking for is advice on a method of design that can be used to make sure the whole wrapper and all the columns can somehow scale, to accomodate. You'd need to make an em based layout, read The Incredible Em & Elastic Layouts with CSS (http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css)

effpeetee

08-27-2010, 10:47 AM

Dr Varney,

I have tried to assemble it here (http://www.exitfegs.co.uk/DrVarney.htm)but something is obviously wrong. If you point me to it I'll correct it so that you have an uploaded version to try out. I can leave it there for a few weeks if needed.

Perhaps you could give the whole of your code in line.

Frank

Doctor_Varney

08-27-2010, 04:35 PM

Cheers, Frank... Only, the part you've reconstructed is the div system for the menu that works.
What I am stuck on is the rest of the page. I know this is really difficult to express without me having a server-side example but I've been left high 'n dry without my host.

Thanks for the link Abdura. I'm reading it at the moment. Plenty to sink my teeth into there. I have a distant memory of em elastic layouts. I think this is probably the way, though calculating pixel widths from a Photoshop layout might prove challenging. Any tips?

Many thanks

Dr. V

effpeetee

08-27-2010, 06:44 PM

Didn't you see this page from VIPStephan?

Pixels to Ems Conversion Table for CSS

A companion reference to the article, The Incredible Em and Elastic Layouts With CSS.

The em values in the table assume that the generic browser default setting of 16px font size has not being changed. It also assumes that the <body> has font size set to 1em or 100%.
px font-size em equivalent * Rounded to 3dp 1px in ems Notes
11 0.689 * 0.091
12 0.750 0.083
13 0.814 * 0.077
14 0.875 0.071
15 0.938 * 0.067
16 1.000 0.063 Browser standard default
17 1.064 * 0.059
18 1.125 0.056
19 1.188 * 0.053
20 1.250 0.050
21 1.313 * 0.048
22 1.375 0.046
23 1.438 * 0.044
24 1.500 0.042
25 1.563 * 0.040
26 1.625 0.039
27 1.688 * 0.037
28 1.750 0.036
29 1.813 * 0.035
30 1.875 0.033
Formula to calculate em equivalent for any pixel value required

1 ÷ parent font size (px) × required pixels = em equivalent

Useful references here *. (http://exitfegs.co.uk/Sources.html)
Use the Search facility. Single words are often best.

Frank

Doctor_Varney

08-27-2010, 09:01 PM

Yes, I eventually found that and the simple formula for converting px to em. I'm liking it so far but for one thing...

This method now plays havoc with my div background images

And the inline images won't obey their margin positions, even when finely calculated to em. They seem to pop out of their containers, when I increase the text size.

Any advice on that?

Dr. V

Doctor_Varney

08-27-2010, 09:54 PM

Okay, getting there... slowly, with Abdura's advice there. What I've now done is absolved some of the images and my entire menu block from the em rules, leaving just the text column, it's nested elements & margins to obey them. So (and what the article doesn't state is) it seems okay to mix pixel measurements with the scaleable ems, depending on how we want each element to behave. Make sense? I hope so.

Now I do still have a minor problem with a div background not being able to scale with the rest of the layout but compared to the mess I was in earlier, I'm still able to count the improvement.

Dr. V

Doctor_Varney

08-28-2010, 03:44 AM

Okay look - can anyone please level with me here? I've been hand-coding for nearly 8 hours solid here, pushing stuff around and going in little circles for what seems like forever. I feel sick. Am I THE ONLY one here who is actually worried about user text increase???

If not, then how do YOU design for it... because quite frankly, (no pun intended, FPT) there doesn't seem many sites out there using the elastic-man layout - and everyone else seems happy.

But THEIR sites don't fall apart.

Something is wrong with my way of thinking and I can't seem to settle here. Any advice appreciated now, as I can feel one of my famous coding migraines coming on...

And maybe even a bunch of tables (if we're lucky)!

Thanks

Dr. V

effpeetee

08-28-2010, 11:56 AM

It would help if we could see your whole code.

Have you tried HTMLPad for editing. You can get it on 30 days free trial. I now use it all the time.

Frank

Doctor_Varney

08-28-2010, 06:18 PM

I use Notepad++ (which is open source) and have both Moz. and IE open for previewing. I can't see an advantage to changing my code editor, unless it provides WYSWYG drag & drop editing. Does HTMLPad have that?

I used to use Dreamweaver MX to do table layouts but that was no gaurantee the pages would not muff up at some point. Plus, it created horribly bloated code. I'm glad I dumped it.

Dr. V