Last post Nov 13, 2007 04:50 AM by simonti
Oct 16, 2007 11:48 PM|mysampath|LINK
I hosted my site.
I made my site content text size increase/decrease when the user increase/decrease the text size from their menu bar, View/Text Size.
Basically I used em instead of pixels.
My site works fine in FireFox.
In IE6/IE7, it works when the text size is medium, which is default.
When I increase the size from medium to larger or largest, then the layout got messed up.
Somehow CSS is not working properly.
Can someone help me in fixing the CSS layout when I increase the text size to larger.
Oct 17, 2007 07:12 PM|MikeJ83|LINK
Looks fine to me in IE7/XP. When the users increase the font size the design will naturally get fouled up, that's just the nature of accessibility.
Oct 17, 2007 08:53 PM|mysampath|LINK
Please see the the picture snapshot how the mess up is coming. Mozilla Firefox works fine eventhough you increase the text size(View -> Text Size -> Increse Ctrl++)
Oct 18, 2007 10:24 AM|ashmetry|LINK
I know the new way of doing it is VIA css...and that the most flexible way. But i prefer using tables because of things like that...You can probably get it fixed if you play long enough with your CSS file.
But the quick and dirty way is to use tables...which honestly i prefer.
instead of doing
<div style='float:left'> XXX </div> <div style='float:right>YYY</div>
also using % instead of actual pixels or em would help re-adjust some of these issues.
so instead of doing <table width='700px'>.... you can do <table width='100%'>...
Oct 19, 2007 11:04 PM|mysampath|LINK
I tried to give % instead of em. It is not working.
If we increase the browser text size (Go To Menu Bar -- > View --> Text Size --> Larger) and select Larger, all the 4 boxes will come down but stay on right side. THIS is a problem in IE6/IE7 only. Firefox works fine no matter how big the text size is.
If the height of the left side box is more, the will bring the 4 boxes even more to the bottom.
Can someone help in resolving this sample. The will provide some guidance for my actual site problem.
Thanks in advance.
Oct 19, 2007 11:24 PM|ashmetry|LINK
This is what i meant..
also you can specify a min-width: px or % for a div in CSS..
Oct 20, 2007 11:13 PM|mysampath|LINK
I prefer to use to css instead of table to resolve this.
Can someone show some direction on this css problem?
Oct 21, 2007 12:17 AM|mysampath|LINK
I did some test and found that there is no problem with col_main_left and col_main_right.
The problem lies in div id="featured2_item".
I tried to give width to only one box "featured2_item1" and removed css class for other div tags in the td elements inside <div class="content_right">.
With one item it works. I increased the browser text size to larger and largest and it is good with one item.
If i try to add the second item(I mean if apply css class with width), then it mess up.
Something to do the with the css on div tags inside TD elements.
Someone would have experienced this kind of problem with csk while displaying featured ads.
Can someone test it on your side and let me know why it is happening?
Oct 21, 2007 11:47 PM|mysampath|LINK
The problem was causing by table, tr, td elements.
i replaced them with div tags and it is working fine eventhough I increase the browser text size to anything.
Now everything is working fine.
Thanks to everyone who provided their comments.
Nov 13, 2007 04:50 AM|simonti|LINK
I am having the same problem but its not going away by replacing table elements with div tags. Any one any idea?