Argh! Fucking fuck! Stupid CSS crap.
Okay, so I'm getting irritated trying to redesign some websites I'm responsible for. The cut-tag has details, but if you're not into web design, don't waste your time. You'll get bored quickly.
Design Standards Issues
Trying for CSS 2 and XHTML 1.0 Compliance
I'm currently working on four different sites: my own, a client's, my work subdomain and some internal documentation for work (you can't see that, sorry).
My goal is all pages I design are CSS 2 and XHTML 1.0 Strict compliant, but it's not like that's very feasible, just an ideal. The reality I have and will settle for is XHTML 1.0 Transitional compliance. Which, honestly, I'm still okay with, but it's tough when I don't know the proper methods for certain positional standards and other preferred practices.
But I do know I will not backstep to HTML 3.2 because it's fucking ugly, kludgey and allows shit design practices too easily. I like the models for XHTML 1.0 compliance and the overall concept of separating form and function, content from style. It's a good idea and allows for much greater design flexibility. So, that's my goal: all pages I design from here out will be XHTML 1.0 compliant, no more HTML 4.0 or 3.2, everything nice and well-defined with proper XHTML and CSS 2.
The Catch
The problem is I can't get the proper design layouts with CSS 2 positioning without ignoring certain functionality problems encountered with older browsers. If everyone would just learn to get their fucking browsers up to date, I'd be fine, but I know there are at least half the visitors out there who'll be hitting pages I make with shitty old Internet Exploder browsers and ancient versions of Netscape Navigator (like 4.0 or some shit).
Why, when so many browsers out there are improving with each release, do these people continue to just accept that the pages they view are retarded looking when they could see the page in all its design glory by simply updating or switching to a nice, compliant base? Even IE 7 is looking like it's shaped up a good deal (no, seriously, I mean that), though it's going to destroy some of the work-arounds people created to fix problems only IE had in the first place and will continue to have after the hack is broken in the new release.
Opera's latest bitch is a good one, sure to set a few standards for some other browsers in terms of functionality, though Firefox is still running strong in the web-savvy community and has a dedicated following (which I may or may not still be a member of, let me check out the latest Opera and get back to you on that).
Anyhow, the thing about all this that irks me is that only by using old, ugly HTML 3.2 code, with some CSS 1, still sticking with embedded styles and such, will I be able to maintain a design standard that is cross-platform friendly and displays in a nearly transparent fashion across the major browser types. Fuckity fuck.
Specific Problems
The Table Verses Div Positioning Layout Structure
Using my most important project as the main example, we'll begin with this long-time issue. I've hated table-based layout for a while now, but in my client's pages-rcairbrush.com-it was a simple solution which had complete cross-platform support, for the most part, and seemed reasonable enough at the time, considering my experience with CSS was limited and my knowledge of HTML 3.2 was perfectly good.
Now, I need to add another gallery page, so in an effort to give her a decent shake on our contract, I'm upgrading the code to XHTML 1.0. The first issue is to add the new page into the index page menu where the gallery is linked. The menu idea is the typical images with text below, like this shrunken image here:
Technically, the new design (using styled and positioned div's and one table of content signifiers rather than the old all-tables approach) is XHTML 1.0 Transitional compliant, but I hate putting a table in there. I wanted to use positioned, floating divs, but I can't seem to get it to work properly. The images hang slightly left and/or the margins break out the max-width of the container div. The table version works and looks like the image above (I forget if that's the old or new code seen there, but I think new with tables).
Worse, when I begrudgingly allow myself to use a table to contain the menu, I move from Strict compliance to Transitional compliance, other than one little attribute issue described below. How the hell can I get these damn images aligned properly, with their text, inside individual divs with floating definitions? Right now I have the table set up with a tag around it, which annoys me since-being depreciated in XHTML-it breaks my Strict verification, relegating me to the begrudged acceptance of Transitional compliance. But what the fuck else can I do if all the floating and positioning CSS approaches break cross-browser transparency in non-compliant browsers? Which, we have to remember, most people are using.
Fuck...
Anyhow, that leads to my next issue.
Depreciation of Tags and Attributes
In the interest of segregating style away from content, while allowing greater control of styled elements, XHTML 1.0 in conjunction with CSS 2 is supposed to be the web designer's dream come true. We can now generate any page to look almost any way we want by writing clever conditional style settings, custom class and id definitions, Document Object Model (DOM) alterations and so forth. Won't it be splendid?
We'll be able to completely alter the layout, color schemes, accessibility, format and overall feel of an entire site through astutely managed style sheets and never have to touch the content to make subtle to drastic changes to how a site is viewed and navigated. Wow... that would rock.
But, is it really necessary to kill the functionality of some of the more useful tags? How, for instance, can I simply center a container without having to include a bunch of hacks for the non-compliant browsers or even just the compliant but slightly quirky implementations of different browsers? For example, positioning is the largest problem for me when it comes to CSS implementation altering the presentation of a page in multiple browsers.
Personally, I try to use cross-browser friendly CSS, but some things come out funny in IE when I've just spent 3 hours getting a page proper in Firefox and Opera, so I have to use hacks. Hacks which apparently are broken in IE 7, but the positioning problem is still there. The Molly hack won't work in IE 7, from what I read, unless some specific settings on the user's end are true. Which means if I use it, they won't be set that way. Grr.
How have I decided to fix this issue? Reverting to tables and using the tag (see above). Ah, but the tag is fucking depreciated in XHTML 1.0!
While CSS has the text-align:center; attribute, it doesn't have anything to align basic objects that I've found valid yet. When implementing tables and divs that show up as centered in Firefox, IE will left-align them sometimes, depending on the CSS.
Or how about simple attributes that everyone uses such as target="_blank"> to open links in new windows, keeping your visitor on your page while offering them additional content related to your work?
User-Selected Style Sheets
While Mozilla based browsers such as Firefox offer the ability to select author-defined "alternate stylesheets" (using the code and such) via their View menu, most users aren't aware of this. Even if they are, such options are not apparent unless you check each page you view for the option to be available in the menu. It'll be nice when this functionality is common and easily utilized by end-users, but it isn't yet. Most other browsers don't even offer it
In fact, while most browsers have some method for the user to control style settings, the vast majority wouldn't have the first clue about what this means for them and have no clue the options exist. Yet nearly everyone I know loves having the choice over how a page is displayed, in terms of the superficial things like colors and layout. So, having put forth the effort to design multiple stylesheets, how does the author give users the option to choose a style preference?
The answer so far has been through two methods:
- Design every page of the site in a number equal to the number of style options, then linking them directly on each and every page. Number of pages, times number of styles... huge amounts of fucking tedious and wasteful work, in most cases. (Especially the case with my own site, which has a large number of pages for one person to manage).
- The definitions of linked style sheets into categories of "stylesheet" and "alternate stylesheet" in the header, then offering some kind of scripted method in links or drop-down menus.
Naturally I looked for the second method and eventually found this article using JavaScript. I once tried another method I found, but the code never seemed to work properly (no style change would actually happen).
But now I seem to have come across a problem: sometimes, I believe if the user hasn't already chosen a style setting and the page isn't cached with their browser anymore, the page will display with no style settings applied at all! Obviously, I consider this a huge fucking problem.
Now, in the case of rcairbrush.com, I had initially chosen the first method because the whole site was only three pages with two styles. 3 times 2 being a whopping total of 6, I didn't mind. Honestly, I'm leaning toward doing it this way anyhow, and just accepting the fact that I don't have the skills at this point to implement everything the way I'd like best. Now, I'd have a grand total of eight pages, but I've already stripped the HTML of the style-based code and made working CSS sheets for them that work fine cross-browser. All I'd need to change is the single line for which style-sheet the page uses, no additional mucking with content required.
But it's so fucking backward to me. I want badly to have the more elegant solution, but I don't see one open to me if I can't get through this problem where the styles won't actually apply using the scripting method. Le sigh...
So I Have Some Questions
- How the fuck to I center a div or table without using the tag? (And don't tell me it's margin:auto; because that shit doesn't work.)
- When and why did the target attribute become invalid?
- What the fuck can I replace it with that offers the same functionality?
- What damn options do I have for user-chosen style sheets?
Sigh... I'm still looking for answers. Anyone out there with answers to my questions, or who can tell me where I'm wrong, please, please, please... let me know the correct information!