CSS Line Breaks

[Hartley]

Hello, I have two problems on this page:

 

http://www.ascendo-tuum.com/atbeta/

 

The page is still being coded, but I want to fix problems as I go so I don't make the same mistake over. Ignoring the table used at the top (it'll be an UL soon), there are two other very noticeable problems.

 

1. The divs line break after the blue bar and the top of the banner. Shows up fine in FF, not in IE.

2. The rollover image that I want placed in the next box area (I changed the background so you can see easier where it's supposed to be) isn't in the right place. I have a feeling it's a coding error I'm not aware of.

 

If anyone could help point out the problem so I can clean up my CSS (and offer suggestions if I'm repeatedly messing up), I would be greatly appreciative!

[Hartley]

Giving a bump to see if anyone knows how to fix this. Thanks!

[SuperBlue]

Dont use tables, not even temporary, they just make it harder to "fix problems as you go".

 

I can point you in the right direction; Using CSS position you should be able to position everything the way you want, again you will still need a wrapper/basement with "position: relative;" applied to it, for "position: absolute;" to work inside the container, for other elements. Many are still giving up on CSS position, before they even learn how to use it, but the point is that Absolute posistion is possible inside containers/divs, making our work alot easier.

 

 

Since your using a fixed layout, you got other more serious problems, because some browsers dosent allow us to lock the font size, meaning the whole layout is being ruined, if the user is using a bigger font-size.

 

The only reliable way to compensate for the above, would be to use EM where needed, just to define width/height of elements; Either way, it must be the user's problem, this way we just avoid that our layout gets spoiled.

 

If you ask me, there really should be a way to "lock" the font size, most webdesigners doing this, know perfectly well what they are doing, its just sad that some people have an outdated idea of how the web should be, and what "allways should" be customizable by the user. If you ask me, that is intirely up to the webdesigner, not w3c veterans or browser devs.

[bronzemonkey]

I disagree about preventing users from changing the font-size. Most websites use font-sizes no bigger than printed media despite the fact that the resolution in print media is many times greater than on the web. Being able to resize text is crucial, and it isn't "the user's problem" if the layout breaks, it is the designer's problem.

 

I know that some browsers now use a "zoom" rather than a text-resize, and so the layout is unaffected, but this also generates a horizontal scrollbar that forces users to scroll in both directions to view the content of a website. IE7's resizing function is extremely strange because it seems to zoom but it will also create large amounts of whitespace below containers in certain circumstances.

 

What might be useful, for designers and users, is to stop font-size increases once a word becomes so large that it break outside of its container. Even if you use elastic layouts that scale the whole site until you reach the edges of the browser window (so preventing horizontal scrolling) there will come a point when a single word becomes so wide that it breaks out of the container.

 

Apart from controlling the maximum size it is obviously a bad idea to prevent users resizing text, because a bunch of lazy designers/developers out there would just create completely fixed designs (as if it were an online poster) and deny users their own reading preferences. I think this is why px have never been used to present absolutely sized text.

[obsidian]

If you ask me, there really should be a way to "lock" the font size, most webdesigners doing this, know perfectly well what they are doing, its just sad that some people have an outdated idea of how the web should be, and what "allways should" be customizable by the user. If you ask me, that is intirely up to the webdesigner, not w3c veterans or browser devs.

 

I completely disagree with that sentiment. I used to be of that mindset, but the longer I have worked in the industry, I have come to the understanding that the web is all about the end user, not the developer. Just like with retail or anything else, you need to give your users the experience they want to have, not simply what you want them to have. It's all about the end user and accessibility. If you are adamant about users not being able to resize your font, then use flash or images to embed the text into the page. Another interesting note is that if you use px rather than em to size your font on your page, IE6 cannot resize those font elements.

 

As to the initial question, for some odd reason (non-compliancy issues, most likely), IE likes to attempt to render whitespace in markup from time to time. If you have line breaks in your markup around certain elements, IE will sometimes actually render those breaks to the screen. To avoid this, even though it looks sloppy behind the scenes, sometimes you need to run your markup all on to one line for the offending portion of code:

<!-- This... -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- May become this... -->
<ul><li>Item 1</li><li>Item 2</li></ul>

 

If you start running markup together just in that portion of your document, that may help with the line break.

 

I'm not sure I understand the issue you mention with the background image, though. Can you be a little more specific on the issues you're encountering there?

[SuperBlue]

Lets just say, that a gaming site, most likely wont need the "ability" to change font size anyway.

 

I wont change my mind; But since you been in the buisness for some time, i can understand you just want food on the table. But dont limit our Design/layout posabilities just becouse of that, if it where down to me, we would allready be seeing the use of 3D Opjects, togetter with css/html, not to mention filters and animation in CSS, witch got mentioned on the css3 info.

 

Mostly its just the webdesigner over-doing the problem, most of the time the problem aint really there, and in the case of lazy webdesigners taking a shortcut, it aint really there; It just gives the veteran more work, since you take the time to considre things others dont, so i wouldent worry about it.

 

 

My skills at creating graphic through a given software, aint that good, but i still think that, by the use of my limited skills, combined; I still end up with some nice looking pages. I still want my pages to be unique, maybe not in layout, but graphically i got many posabilities to make them unique, should i start limiting my page just because a few visitors are sight-handicapped?, no!; However i could provide them with a 2nd version of my page, or a 2nd StyleSheet, without much effort.

 

If you think that hoizontal-scrolling is a problem for a sight-handicapped user, then you are mostly right; However still more people are getting used to hoizontal-scrolling, often modern mouseweals also supports hoizontal-scrolling, witch kinda limit the impact. You sound like a fps player, who is still getting used to using the mouse above the keybord, what is annoying thoug.. Is these percentage pased layouts, where they havent used max-width; Cursing very long lines, THEY could atleast have created a container with a max-width on, maybe even combined it with a scaleable layout.

 

Often the sight handicapped user, will be found using some insane low screen-resolution, 800x600 is pretty normal, that is cursing the h-scrolling on alot of pages, so those motivated will most likely have gotten used to it, and mey even have brought a mouse to support it. But about IE7 zoom, well i cant imagne anyone using it, and i suspect it being the source of a virsual problem with an annoying h-scrollbar on my website; Besides its bugged, and renders some pages wrong.

 

Also, IE7 cant change font-size in PX either; Im just surprised other browsers wont follow IE's examble, because i cant think of a case where you as a the designer would need to define your font-sizes in PX without its for the reason, for them to be locked. Usually you would use a PX value in the body, and EM in the rest of the ducument, or just let the browser deside.

 

Also note, it aint allways the designers problem. I'm thinking about IE7's zoom witch is bugged, and about Safari's text-field fature, if the user mess with our pages, he/she cant expect it to work as orginally intended by the designer, often it is intended that you shell be able to change font-size, and other times it aint. Browsers should respect that, and nothing can or will change my mind about this.

 

To use flash to achive same, is like using a truck to deliver a piza.

[bronzemonkey]

Lets just say, that a gaming site, most likely wont need the "ability" to change font size anyway.

 

That's a big assumption to make. A lot of people with visual disabilities play video games and a lot of people who spend time on their computers prefer text to be larger!

 

But dont limit our Design/layout posabilities just becouse of that.

 

Having a site that doesn't break when font-size is increase is good design. I totally agree with obsidian (and I'm not a veteran at all, just a beginner) because the internet is an interactive communication tool. Websites aren't like printed pages or art galleries. If you ignore text resizing because you think only 10% of people bother with it (for now), and don't make your site work without javascript because only 10% of people are browsing without it, and don't make your site fully visible in browser windows below 960px wide because only 10% of people have 800*600 monitors (what about those of use who don't browse at full screen?), and ignore users using screen readers, and ignore users who browse with their keyboard, etc...then all that adds up to the alienation of, even discrimination against, an important proportion of users. If those users are actually potential customers then it's obviously not good news.

 

However still more people are getting used to hoizontal-scrolling, often modern mouseweals also supports hoizontal-scrolling, witch kinda limit the impact.

 

Horizontal scrolling is different to vertical scrolling and amazingly annoying. It forces people to scroll in both the vertical and horizontal dimension to access content (which is enough to get me to leave a site) and constantly interrupts reading of text as a line is cut off by the edge of the screen.

 

if the user mess with our pages, he/she cant expect it to work as orginally intended by the designer

 

A good designer would plan to make their site function properly in different browser environments and variable user preferences.

 

It's really not about other people "worrying" about those who don't make efforts to improve the accessibility and usability of their sites, it's just about trying to promote methods of working that most of us were exposed to thanks to others promoting them! You say that you will never change you mind, but how can you be so sure that you are right? Better to always think of yourself as a beginner and keep an open mind.

[obsidian]

I wont change my mind; But since you been in the buisness for some time, i can understand you just want food on the table. But dont limit our Design/layout posabilities just becouse of that...

I'm not here for a battle, but what you're saying just simply isn't accurate. You are the one limiting your possibilities, not me. Allowing more users to take advantage of your site only enhances your user base and expands your possibilities; it doesn't hamper them. Simply taking a design handed to you (or coming up with it yourself) and setting it to an XHTML/CSS layout is simple, but making that site accessible is another matter entirely. It is much more difficult to make a site look like the desired design yet make it fluid enough to allow for font-size increasing.

 

Mostly its just the webdesigner over-doing the problem, most of the time the problem aint really there, and in the case of lazy webdesigners taking a shortcut, it aint really there; It just gives the veteran more work, since you take the time to considre things others dont, so i wouldent worry about it.

This just plain doesn't make sense. Are you familiar at all with web accessibility regulations? This approach isn't a web designer coming up with more work for himself, but rather it's an intelligent individual with some forethought to the direction which web requirements are headed. If you are ever to hope to do anything at a corporate level, you need to have an understanding of what may very well become requirements in the years to come. Visually impaired users is one of the largest concerns of web accessibility, and simply allowing for font-size increase can hugely impact your clients. Here are some pages you need to consider taking the time to read:

 

Web Accessibility Initiative (WAI)

What is Web Accessibility?

US Section 508 Standards

 

My skills at creating graphic through a given software, aint that good, but i still think that, by the use of my limited skills, combined; I still end up with some nice looking pages. I still want my pages to be unique, maybe not in layout, but graphically i got many posabilities to make them unique, should i start limiting my page just because a few visitors are sight-handicapped?, no!; However i could provide them with a 2nd version of my page, or a 2nd StyleSheet, without much effort.

You just don't get it, do you? the challenge is not in limiting yourself but in broadening your abilities to account for your users. I also take offense to your flippant non-caring attitude towards those impaired users who do frequent web sites. Whether or not you think you're no good in graphics design or you think you're the next Michaelangelo with a graphics tablet doesn't matter a hill of beans in this discussion. The truth is, you can do what you want, but refusing to acknowledge standards and refusing to better yourself by learning to adhere and conform to standards will be your downfall. Rather than bucking against standards and refusing to comply with the needs of those "few sight-handicapped visitors" you mention, why not recognize the standards and use your abilities to make your existing design work within them?

 

A good GUI coder typically starts with a screen shot of the design anyway. This image is very static, and it is up to the creative talent of the coder to make the design work within standards and still be accessible to users.

 

If you think that hoizontal-scrolling is a problem for a sight-handicapped user, then you are mostly right; However still more people are getting used to hoizontal-scrolling, often modern mouseweals also supports hoizontal-scrolling, witch kinda limit the impact. You sound like a fps player, who is still getting used to using the mouse above the keybord, what is annoying thoug.. Is these percentage pased layouts, where they havent used max-width; Cursing very long lines, THEY could atleast have created a container with a max-width on, maybe even combined it with a scaleable layout.

 

Often the sight handicapped user, will be found using some insane low screen-resolution, 800x600 is pretty normal, that is cursing the h-scrolling on alot of pages, so those motivated will most likely have gotten used to it, and mey even have brought a mouse to support it. But about IE7 zoom, well i cant imagne anyone using it, and i suspect it being the source of a virsual problem with an annoying h-scrollbar on my website; Besides its bugged, and renders some pages wrong.

I am actually shocked you bring this up. This is one of the fundamental things that comes up over and over and over yet again in web design schools of thought. In fact, this very thing (horizontal-scrolling) has shown up on some of the top 10 lists of web design errors since 2002. Now, with mobile media, the need for narrow - or at the least, fluid - pages seems to be even more of a need. Now, I am not of the school of thought that there isn't ever a place for horizontal scrolling, but sites in general should never use it unless there is a distinct reason to do so (such as an image gallery). Read this interesting tip on the matter.

 

Further, not to be accusatory, but you are showing your own lack of knowledge in CSS with your statements. You are griping about people not having max-width set on elements and pages, and anyone with some advanced CSS experience would know, IE does not support the max-height/width or min-height/width attributes, so your solution would do absolutely nothing for you.

 

Also, IE7 cant change font-size in PX either; Im just surprised other browsers wont follow IE's examble, because i cant think of a case where you as a the designer would need to define your font-sizes in PX without its for the reason, for them to be locked. Usually you would use a PX value in the body, and EM in the rest of the ducument, or just let the browser deside.

You are contradicting your whole argument of having absolute control over your website with this statement. Why on earth would you "let the browser decide" if you are wanting your site to be controlled by you? The browser decides based on the user defined preference, so you are still putting your display in the hands of your user with this recommendation. Also, I fail to see the logic in your recommendation to define body with px and then use em on the rest of your site. It actually seems almost counter intuitive. If you were going to want a part of your site to be able to be enlarged by the user, it would make sense that you would use em for the body and then lock down other portions of the site using px in order to not break design, if that's your argument.

 

Also note, it aint allways the designers problem. I'm thinking about IE7's zoom witch is bugged, and about Safari's text-field fature, if the user mess with our pages, he/she cant expect it to work as orginally intended by the designer, often it is intended that you shell be able to change font-size, and other times it aint. Browsers should respect that, and nothing can or will change my mind about this.

 

To use flash to achive same, is like using a truck to deliver a piza.

Once again, you are displaying either a lack of knowledge or experience. It is the designer's problem... always. You know your tool set, you know your client options, and it's up to you to decide how to present your site to them. It's not Microsoft's problem to fix the browser to display your site; rather, it is your job as a designer to recognize the flaws in browsers and be creative enough to design around them. This is what truly separates the good, professional designers from the hobbyist.

 

I don't disagree that using flash to lock text size is bulky and unnecessary, but when that is one of the only mediums by which your desired outcome can be achieved, you cannot be picky. You either do or you don't want to lock text. The fact is, you can't do it with CSS, so if you demand that your user not be able to change your font size, you must come up with a tool to be able to do that. Currently, that is basically limited to using flash or dynamically generated images - reminiscent of mid-90's web design.

 

Basically, this whole discussion comes down to one thing: you're going to do what you want to do, and that's your prerogative and no one can tell you that you have to change your ways. That's one of the beauties of web design. However, we can at the very least try to make you aware of principles and standards that should be considered for every single website that is presented to a user base. Do you personally have to take the advice and facts laid out in this thread? Of course not! Does it change the level and quality of your work? Absolutely! I challenge you to take a step back and, rather than bucking against the recommendations made by those more experienced than you, consider them and better yourself by seeing how you can use your talents within the standards and restrictions brought up. Take it as a challenge, not a requirement.

 

Wow... this is by far the longest post I've ever made on here. I guess there was a nerve touched upon