|
|
|
Forum Member
 
Group: Forum Members
Last Login: 5/22/2008 2:08:53 PM
Posts: 39,
Visits: 61
|
|
| I read that if a user changes the text size on a browser to large or largest, your site elements start to go crazy. They said to use absolute position carefully & NOT to use layers. I designed my site with layers, & when I tested the browser font size by increasing it, it indeed went somewhat nutty. But I know many people use the layers--is there anything that can be done to avoid this problem but still use layers? Probably there are not too many people that change the font size on the browser, but.... Thanks. P.S. I just checked your site, Dustin, http://bradfordbeachjam.com/ & I noticed that it did not change at all in IE6 when I changed the browsers font size. How did you accomplish that?? But it did change in FF but held together pretty well unless I enlarged the type way up. Any help on this, would be very appreciative.
|
|
|
|
|
Supreme Being
Group: Forum Members
Last Login: 8/18/2008 7:16:12 PM
Posts: 87,
Visits: 275
|
|
| Hi Would it be possible to post a link so we can see where the issue lies,
I personally always use relative text size, unless i have no option to used fixed text size.
I also would not take it seriously that not many users increase their text size, lets put it this way if only 5 users going to your site used the Increase Text Size ability, i am sure you would not want them to leave because they could not read the text... If possible paste a link...
|
|
|
|
|
Forum Member
Group: Forum Members
Last Login: 5/22/2008 2:08:53 PM
Posts: 39,
Visits: 61
|
|
| My link is: www.penartdesigns.com The home page are all images so no problem. Click "John's Bookstore" & then you can see the changes when changing the text size. It's not tooo bad in IE6; but FF it is very disconcerting. I used layers as shown in Dustin's tutorial as there was no caveat about using them--at least I don't remember one. Thanks for your help.
|
|
|
|
|
Supreme Being
Group: Forum Members
Last Login: 8/18/2008 7:16:12 PM
Posts: 87,
Visits: 275
|
|
| Hi I have a feeling you have fixed heights apllied to certain DIV's, if you have a fixed height then the text will go beyond that div if the div will not stretch. I hope that makes sense...
|
|
|
|
|
Supreme Being
Group: Forum Members
Last Login: 8/18/2008 7:16:12 PM
Posts: 87,
Visits: 275
|
|
| Hi I removed the height attribute from this style and it has solved the text size issue.. .descripText2Style {
border: 1px solid #999999;
padding: 10px;
position: absolute;
width: 539px;
z-index: 3;
left: 221px;
top: 273px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #999999;
} Now you know where to go with the resr of the issues.
|
|
|
|
|
Forum Member
Group: Forum Members
Last Login: 5/22/2008 2:08:53 PM
Posts: 39,
Visits: 61
|
|
| Thanks, Mamba, for your input. First, can I ask you how you found the .descripText2Style which is in my css file by just looking at the source code on my site? I removed the height in 3 of the areas that appeared to be causing problems & they acted the same way. The .descripText2Style moved down before, the descripTextStyle moved down but overlapped the .descripText2Style. The .buyNowStyle also overlaps as the text gets larger. I guess this is because they are absolute positioned. I tried to change them to relative, but it made it worse, probably because it needs to be designed from the ground up as relative positioned??? I was hoping there would be a quick fix or at least learn how to design the site using good design elements from the beginning. I am a newbie & have run into many, many frustrations (as I hear from others as well). I know it's a big learning curve. If you have any other ideas or suggestions, it would be wonderful. I know it would help all of us a lot. As I mentioned above, Dustin's site (as well as the homepage on this site) somehow does not allow text enlargement using IE. And when I use FF to enlarge his text it all moves down without overlapping. I wonder what secrets he may have. 
|
|
|
|
|
Supreme Being
Group: Administrators
Last Login: 10/24/2008 2:27:36 PM
Posts: 437,
Visits: 632
|
|
Okay, here's a quick rundown of some font issues and layers, that should give you the info you need.
First on the issue of layers, I hate that this convention exists. As far as your html and css is concerned, there is nothing actually identified as a layer. What people commonly refer to as layers these days are absolutely positioned divs, which is what you're using on your pages. I know I did a video once about the different positioning properties and I believe I covered the warnings in that about absolutely positioned divs. I would recommend watching them.
Also, I realize xWeb has a Layers Task Pane, and I use it extensively in the tutorial series. This was only done to make it easier at first for new users to understand the document structure. In more advanced series that I'm making, we will not be using that Layers Task Pane.
With that said however, absolutely positioned divs are not solely responsible for any issues you may have with your text being increased. As mamba pointed out, heights are always a problem to have set on divs. But even if you didn't have any hard value heights set, you still would have issues. Really, if you want your whole page to react to text resizing, you need to have a whole site coded that way, which honestly is almost more trouble than its worth and I don't see many people who do it really. Sometime maybe I could make a tutorial on doing it, but even knowing how to do it, I don't do it most of the time myself. You have to basically build your site all with percentage (or em) values, so that the whole site can react to size changes, but that opens up a lot of other issues. In the meantime if you're really interested in that you can search for either "fluid layout" or "liquid layout", that is what it's normally referred to as.
Okay, and the text size issue. The reason my fonts don't change in IE on the noted site is because I used pixels for my font values, which I actually don't do anymore. IE 6 and below cannot resize pixel fonts, so it's not really a trick on my part, as much as a flaw on IE's part. IE7 was supposed to fix that issue, and in MS's opinion they did, but they really didn't. (You actually zoom INTO the page itself when you do it in IE7, which is much different. Try it in IE7 and FF and see the difference.) So for the most part, if you use pixel values, IE cannot resize it. And seeing as IE is still about 70% of the browser market, that's a lot of users. So if you want people to not resize, you could do that, however, it would be irresponsible of me to not follow that up with a warning to avoid doing that unless absolutely necessary.
I teach other web courses, and everytime I talk about this issue, I get asked, "but how many people resize the text anyway" and I don't have any good answer for that. However, the web has really come around to the understanding that the web works best when the user has control. There are people that know they can resize the text, and there are people that do it. Heck I do it on certain sites.
The right way to declare fonts these days is with ems, but that's a bit more of system, and a post for another day.
=========================
My wife has given birth to our twins, so I'm still going to be spotty around here. It never seems to correct itself does it? I'm sorry, I'm trying.
=========================
|
|
|
|
|
Forum Member
Group: Forum Members
Last Login: 5/22/2008 2:08:53 PM
Posts: 39,
Visits: 61
|
|
| Thank you, Dustin, for taking the time to explain this subject. I'm really looking forward to your new website & to learn the best way, with all it's limitations & implications, to design a good website--pros & cons, warts & all! One question, anyone: If you use "divs" instead of "layer divs," can you get a list of those divs like you get with the layers pane? I couldn't find a way to list the divs if they were not layers.
|
|
| |