Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Font Size Increase Problem
Hi,
I have a couple of div boxes floated left containing thumbnails and excerpts. —> see example here
The CSS code for this is as follows (simplified):
<code>
.column-one{
float: left;
width: 380px;
height: auto;
}
.article-wrapper {
height: 120px;
width: 380px;
margin-bottom: 0px;
margin-top: 0px;
}</code>
<strong>My problem:</strong>
If the user increases the font size in his browser the excerot text next to the thumbnails is of course pushing downward to get more space.
Is there a method to prevent this from happening? Some sort of rule or font unit size that allows the font size to only be 11px and nothing more or less and therefore prevents that text from increasing?
Thank you!
Last edited by dada78 (2005-12-29 02:43:24)
Offline
#2 2005-12-29 06:11:57
- Mary
- Sock Enthusiast
- Registered: 2004-06-27
- Posts: 6,236
Re: Font Size Increase Problem
No. All methods can be worked around. You shouldn’t force text size anyway.
Offline
Re: Font Size Increase Problem
Don’t force a height on .article-wrapper. You should also be clearing your floats before you add the footer.
Offline
Re: Font Size Increase Problem
But how do you accomplish on having equal sized thumbnail + excerpt boxes like here without defining the height?
Thanks
Offline
#5 2005-12-31 23:55:25
- andymiller
- Member
- Registered: 2005-12-05
- Posts: 17
Re: Font Size Increase Problem
Mary is right. Fortunately I’ve not come across a webpage where Safari/Firefox didn’t allow me to resize the text. And Hoorah for that!
There are some things you are just going to have to let go of as a designer – unless you want to go back to using tables.
I had a quick play with the CSS on your site using the Webdeveloper extension to Firefox. Could I suggest that as step one you simply delete all of the height declarations – they only mean that the layout breaks more quickly when text is resized. If you don’t have a height declaration then the height can expand to fit the text size.
Could I suggest that you buy borrow or steal a copy of Dan Cederholm’s book Bulletproof Web Design. It’s a brilliant book – one of the best I’ve seen in a very long time. He has a whole chapter devoted to what I think you are trying to do with the left hand column and thumbnails (quick clue: his approach involves floating the image left and the text right within a containing div that is also floated).
If you really want to specify the height, and the thumbnail absolutely has to be the same size as the text why not specify the height of the image in ems? That way the thumbnails can increase in size as the text is resized. (That’s not as mad as it sounds – but you need to have a bigger thumbnail so that it can upsize without loss of quality)
PS (Maybe American English is different but shouln’t it be ‘thieves’ in the heading?).
Last edited by andymiller (2006-01-01 09:46:31)
Offline
Re: Font Size Increase Problem
Hi Andy,
thanks for the suggestions and the hint “thieves” (sorry, I am German – I guess I should have run it through a spell check…)
I ordered the book by Dan Cederholm before I saw your post, so I think this was a good decision since you recommended it too.
If you really want to specify the height, and the thumbnail absolutely has to be the same size as the text why not specify the height of the image in ems? That way the thumbnails can increase in size as the text is resized. (That’s not as mad as it sounds – but you need to have a bigger thumbnail so that it can upsize without loss of quality)
<strong>This really sounds like a great solution to the problem I am having and I will definitely try this method out!</strong>
quick clue: his approach involves floating the image left and the text right within a containing div that is also floated).
I tried this approach before but it didn’t seem to work (maybe I was missing something – I will take a look at the book once it arrives). But according to you how should this method change the layout?
After I have tried several methods, it seems to work better when the text is not floated as I currently have it styled (as only the image really needs to be floated since the text floats automatically alongside the img).
The only problem I am really having is that with increasing text which you addressed above.
Thanks a lot for your input!
Dada
Last edited by dada78 (2006-01-01 20:31:50)
Offline
Pages: 1