Site not Mac friendly - Should I replace my CSS professional?

Get Started
21

Hmph. This brings up bad, bad memories of a non-profit org I work with who hired a rent-a-designer to revamp the site. He spent months with PS mockups and so forth, pontificated and lectured us on what good design constituted, and eventually provided a “working draft” that not only was broken, it was broken in every major browser, and broken differently. (It barely functioned, with serious and different sets of glitches, in FF and Opera, wouldn’t open in Safari, and was shattered in IE. The draft had hundreds of validation errors. Tommy Olsson and Dan Schulz almost had heart attacks when I showed them the site.) He told me that it was “finished,” I used bad language and some personal invective, and he yanked his design and quit.

What this has to do with your situation, I’m not sure, but if you’re considering firing your CSS “guru” because he doesn’t give a hoot about validation and can’t fix problems like the ones above, you very well might be going in the right direction. :twocents:

22

Wow, Black Max! My situation could have been worse. In the guru’s defense, we started this project with an unreasonable deadline. That may have driven his decision to use the template css provided by the e-com service provider instead of starting from scratch.

Over the last few days, I decided to take on the work myself. (Guru is ignoring most of my messages anyway.) I made some advancements and got some pages lined up, but didn’t notice that other pages were getting ruined in the process. Same story with fonts. Fixing font sizes in one place ruined them elsewhere.

The guru liked to blame the creators of the e-com platform. I can tell you that many of the sites built on that platform share the alignment issues I’m facing, so he might have a valid point. But this e-com company wouldn’t be in business if their product was complete rubbish. Maybe the “ugly” sites started with the same styles.css template or they were designed by that company’s designer. In any case, finger pointing gets me nowhere.

Our styles.css is now a mess, so my strategy is to:

  1. Make this site work on the current platform.
  2. Rebuild styles.css from scratch, with focus on clean code that validates.
  3. Consider hosting the non e-commerce/shopping cart functions of this site on Joomla, leaving the e-com server to do the dirty work of selling our family’s products.
  4. Consider moving everything to Joomla or Drupal before our hosting contract renews in 2011, a daunting task because of the many backend API links.

Hopefully once this is all over I’ll know enough to contribute to the Sitepoint community. I feel a little like a leech now. :blush:

23

That’s an understandable and defensible decision on his part.

Not defensible, and perhaps unprofessional. (Not knowing the details of the situation, and not being an Arbiter from Above, I can’t say with any certitude. I can say that I’d be p!ssed that he wasn’t returning my messages, and I would d@mn sure drop a virtual rock on him.)

Hmmm, having an all-inclusive, properly executed stylesheet from the outset would have most likely avoided all of this.

So, is there a reason why this particular e-com platform is so good that it is worth putting up with poorly executed CSS? Other platforms out there produce worthy product without these kinds of issues. And why didn’t he fix the alignment issues out of the gate?

You definitely should not feel that way. We’re here to help. At some point, if you feel motivated to “pay it forward” by helping others coming down the pike, that would be great, too. That’s how I got started in here, coming in bothering the grown-ups :goof: with “knucklehead” questions and getting polite, helpful answers in return. Now look at me, dispensing almost-worthless advice :slight_smile: and wearing a shiny badge and everything… :lol:

24

So, is there a reason why this particular e-com platform is so good that it is worth putting up with poorly executed CSS? Other platforms out there produce worthy product without these kinds of issues.

In my naivete, I didn’t know how too pick a good e-com provider over a bad one. All I knew was that after a month on the job, our old system was too slow across the wire and the order fulfillment process was painful. The old system wasn’t going to work. One of the first tasks handed to me call on a new e-com company.

I reviewed a few companies that catered to the wine industry. Company A was built on the same platform as our old system and by the same guys. Company B was its own product. I was sold on Company B’s back end, and I dreamed of the day when we would have a call center full of people selling our niche wine with their ingenious system. I had no clue about web development.

Just days after signing up with this e-com company, I started looking for a CSS guru. Found him through referrals and showed him our old system and the new system. He said, “sure, I can handle this. Piece of cake. If I rebuilt your site from scratch it would take two days.”

Sounded promising still. The e-com provider built out our database and turned us loose with FTP access and all in January. I attended all four of their 2-hour training sessions. The guru attended one training session that we thought pertained to his job. Once training was done, we had two weeks to do the job that he said would take two days. I asked for an extra two weeks, but four weeks, my boss was livid with the results.

I started reading my first Sitepoint book 16 hours ago, and only now do I realize how much I didn’t know. I thought migrating from one CMS to another would be as simple as copy and paste. A CMS migration is something that should be approached differently than a from-scratch development.

I have a backup of the *.css from our old site. Four months ago when this project started, I had no idea how useful that was - so I couldn’t have gone through it with our guru to translate and convey what my boss wanted. As self-styled project manager, I suppose that was my responsibility.

And why didn’t he fix the alignment issues out of the gate?

What I learned in the last 16 hours is that some of these “alignment issues” that made my boss so mad are actually on every site hosted by the e-com provider. They were probably never meant to be changed, as the ids (of maybe they’re classes, don’t know yet) are used on elements that live on multiple pages. This problem affects me most on forms that collect address information from the customer. I can post examples if you’re interested or if this doesn’t make sense.

I learned this all by doing a simple Google search. The e-com provider puts a tagline at the bottom of every page they host, so putting that into Google along with the name of the page that’s giving me fits (newsletter.aspx) was quite telling. My CSS guru wasn’t pulling my leg, but I sure wish he could have explained this all to me so I could pass the word on to my type-A boss.

25

I had a good weekend reading books on CSS. Now I’m getting closer to the goal of passing W3C CSS validation just by cleaning out the guru’s temporary comments that were not really valid, like “xwidth” and “*width”.

I might need to more into more specific Sitepoint forums on two issues:

  1. Everything can’t be !important. It’s easy for me to spot lines that my hired expert added to styles.css, because almost all of them end in !important. I guess he didn’t want to think too hard. I need a strategy for cleaning this up. Maybe I’ll take all of them out, and put my brain to work.

  2. A Java-based drop down menu probably isn’t a good idea. Earlier in this thread, Stomme poes showed us screenshots of the site with Java turned off. Since my goal is to eventually make this site mobile friendly, I think I have to switch to a CSS-based menu. That would cure some of the other cross-browser problems that my guru was using hacks to fix. I have lots of [if IE] sections that don’t validate and can probably be eliminated with thought and planning.

What do you think? Should I start new threads or keep this one?

26

Now I’m getting closer to the goal of passing W3C CSS validation just by cleaning out the guru’s temporary comments that were not really valid, like “xwidth” and “*width”.

*width and _width are for when you’re targetting IE5.5 and below… first you use the Tan Hack to hit IE6 and below…

  • html #element {
    width: 200px;
    padding: 0 20px; /in normal browsers, this means inner content area is 200px and total width of the box is 240px… but in IE5.5 and below, it’s total width is 200px and the inner area has shrunk by 40px…/
    }

but you know IE6, when not in quirks mode, can deal with the “good” rules, so then you add the special rules to make IE6 act like every else:

  • html #element {
    width: 240px;
    padding: 0 20px;
    _width: 200px;
    }

Now the boxes are the same for everyone… IF you are actually bothering for IE5. Most don’t, unless they know they have a client who is still using that browser. Yeah, it’s illegal according to the validator, but I’ve kept styles like that in my main stylesheet for the ctrl-f value : ) If you have a ton of styles like that, and still want to support IE5.5 and below, a separate stylesheet called with IE conditional comments is better.

  1. Everything can’t be !important. It’s easy for me to spot lines that my hired expert added to styles.css, because almost all of them end in !important. I guess he didn’t want to think too hard. I need a strategy for cleaning this up. Maybe I’ll take all of them out, and put my brain to work.

It’s considered bad form anyway, because while the original CSS specs said !important was for us (authors), since CSS2.1 it’s been given to users (user stylesheets can use !important to set their own styles to override author stylesheets). Since this use by users of !important is considered necessary for accessibility reasons (they may need whole differnt font-sizes, styles, higher-contrast colours, whatever), using it in your own author stylesheets is usually a no-no (there are exceptions, like getting arounf FF users with the Google Toolbar getting yellow-background form inputs).

Usually if the rule isn’t working without !important, you can just make it a hair more specific, or change where it is in the code flow (similar-level code who comes later overrides).

So, you are correct to try to remove these.

  1. A Java-based drop down menu probably isn’t a good idea. Earlier in this thread, Stomme poes showed us screenshots of the site with Java turned off. Since my goal is to eventually make this site mobile friendly, I think I have to switch to a CSS-based menu. That would cure some of the other cross-browser problems that my guru was using hacks to fix. I have lots of [if IE] sections that don’t validate and can probably be eliminated with thought and planning.

Careful, Java is a pedantic strongly-typed classical-inheritance back-end language used by all those kids who went to computer school to learn that uber-awesome JAVA!

Javascript is a loosely-typed prototypical (not class-based) front-end (client-side) language for all those who want jawsome fading-dancing-singing AJAX-FORM-VALIDATION LOLMIGAWD stuff : )

Okay I’m picking on it, it’s been way too abused, not really a bad language (just some bad stuff in it), but always be clear between the two languages because they’re quite different!

[edit] I actually didn’t look, is this a dropdown menu?? Lawlz, if not, ignore EVERYTHING about menus below this!! Plus, mobiles don’t like dropdowns anyways, because they often can’t :hover anyway!

Anyway, the menu I usually recommend is the Son of Suckerfish menu because the CSS is exceptionally clear… though it does have one little IE7 bug in it that you’ll only notice if you use something else besides the Suckerfish Javascript in the <head> of the document (there are only two ways I know of to get dropdowns working in IE6 without Javascript… and most people just use JS as the crutch for that crippled browser).

Though I’ve also used a version called Part Deux by Blake Haswell for extra keyboard-ability : )
It also has a bug in Gecko browsers and IE6 which is also fixable. Then there’s a small JS overlay that does both the crutch for IE6 AND makes the keyboarding experience way more awesome, plus a slight off-hover delay for those with shaky mice, so they don’t lose their dropdown because they went a pixel too far for a billionth of a second… which is nice. In general, more than two levels is getting closer to inaccessible for many, and I wouldn’t go as deep as Blake’s myself.

While Keyboarding through the dropdowns is cool and all, generally I would just make sure the main-level links are clickable (they go to some page where users can then reach everything that was inside the dropdown… because there’s always someone who can’t get the dropdown to drop down).

So, your HTML will be good and simple and the same, and the css can be as complicated or simple as you want. Dropdowns are a world of their own and they took me a while to “get”. You start out just copying one like Sons that works and then tweaking it from there, while later you “get” it and can just write your own out of your head. My one keyboardable Haswell version I still copy-pasta from the site I wrote it for just because the original took a lot of trial and error and I’m too lazy to go through that again (and forget about Opera! I couldn’t get that one to bring anything onscreen).

You can also read about dropdown accessibility and Mega dropdowns here:
http://www.useit.com/alertbox/20001112.html (try not to use them)
http://www.useit.com/alertbox/mega-dropdown-menus.html (megas are actually fairly user-friendly if you do it right)

And Tysson has a nice list (a bit old, but not outdated) of various dropdowns, all vying to be the Holy Grail of Dropdowns lawlz:
The DropDown Low Down
[/edit]

Lawlz or if you meant a plain ol’ regular menu, you can find good ones anywhere… and there’s a couple of ways to do it, just be aware of some IE bugs : )

: )

What do you think? Should I start new threads or keep this one?

Hm, dunno. I think for the dropdown menu itself edit IF it’s a dropdown, regular menus are peanuts! , if you need some handholding as you go through it, you’ll want to start a new thread specifically in the CSS section. For the rest… I suppose could go either way.

27

Poes, I really like Haswell’s menu. Thanks for the link. :slight_smile:

28

^be aware of the Gecko :focus bug. Ie6 gets it too with :active.

29

Thank you, Stomme poes. Now that I am starting to understand the concept of CSS and CSS styled menus, I have a better appreciation for the CMS design guide provided by the e-com software provider.

My original awe with CMS systems was that you could create new categories and sub-categories and they would magically appear on the site. Great idea for quick changes, right? What I am learning now is that this doesn’t just happen by magic. The style sheet made a lot of that stuff work on our previous CMS/e-com platform.

Our poorly implemented Javascript menu
First, our current page does not decompose properly when Javascript is turned off. I recently learned that my users are also people in the wine trade, many of whom want to look up data using their BlackBerry, iPhone, and possibly WM or Android browsers. If it doesn’t work well on the BB and iPhone now, it will need to in our next phase.

Second, I killed ease of use for myself when I let the guru implement a Javascript menu that was not tied into the CMS. Our current homepage was designed by a friend who was fresh out of university. She spent a month doing focus groups and card sorting until the client got impatient and we ended up with that. Then we hired the CSS guru to make the ideas all come to life. With time running out, he just made it happen with no concern for the CMS.

If I want a new menu item added, I have to ask him and wait. While I wait, I have my boss ask why it’s so hard to do something simple like add a menu. Plus, the menu seems cobbled together because it doesn’t always line up properly. Based on those two issues alone, I now also understand the importance of conforming to the CMS instead of brute-forcing a design into existence.

Back to basics: looking at the CMS
I think our CMS is capable of generating HTML that can drive either the Son of Suckerfish or Haswell menus. I just have to turn on the right column or unhide the IDs and use them. The advantage to working within the CMS’s capabilities is that I can run the site as one person and do site maintenance fast enough to please my boss.

I’ll take my new found knowledge and look at what is generated by CMS for navigation. I’m hoping for unordered lists. Then the next challenge will be yanking the Javascript menu out and putting one of these menus in.

Finally, my big question of the day: Will either Son of Suckerfish or Haswell dropdowns layer on top of the flash presentation that’s currently showing on our homepage?

30

I recently learned that my users are also people in the wine trade, many of whom want to look up data using their BlackBerry, iPhone, and possibly WM or Android browsers. If it doesn’t work well on the BB and iPhone now, it will need to in our next phase.

Those may need their own versions… mobiles are tricky like that, as some of them expressly ignore your specially-made-for-them stylesheets and try to render the one built for desktops… despite not being able to handle simple sh*t like :hover (excessive eye-rolling here).

Then again, a wine site CAN be simple in design and just “work” will all devices, depending. But yes, JS being off is even more of a consideration when you need your menu and yes, your FORMS to work without it (everything done on any forms needs to go 100% through the server).

Finally, my big question of the day: Will either Son of Suckerfish or Haswell dropdowns layer on top of the flash presentation that’s currently showing on our homepage?

Possibly not.

There are tricks to get around that. The most popular one (and the one to try first) is to set the windowmode/wmode to “opaque” (or “transparent” if it has a transparent background… I don’t have Flash installed on this machine so I can’t see it… transparent takes more work for the browser so if you can do opaque, do so). Second is to make sure the menu itself (the main ul) is positioned (has relative positioning) and a high-as-heck z-index, like 1000 or something cwazy.

Beyond that, if IE esp causes problems then an iFrame shim could be used, but that complicates stuff. If wmode combined with zindex doesn’t fix it, then I’d go ahead and use JS to elevate the menu (since those with Flash are quite likely to have JS, or you may even have JS setting up the Flash such as with SWFobject or FlowPlayer).

I should take a look at your current site in a everything-on browser, just to see what it’s supposed to look like.

I would try to avoid a dropdown menu if possible, OR make a non-dropdown mobile version. We don’t have a :touchwithfinger psuedo-class.

I mean, check this one out http://blackestate.co.nz/ I’m not saying it’s a great site, but the design seems to enhance the wine/company.

Without Flash (and the iSomethings don’t come with Flash), there’s pretty much nothing to the main page.

31

I would suggest, at this point, for you to take a hard look at other e-commerce providers (possibly open source providers). For a few bucks a month you can get a little server space to play on. If you are paying the current provider much $$ and not fully satisfied you should consider firing them as well! Sounds like they’ve got you by the nads by not allowing you access to the source files.

There are many ecom solutions on the market all the way from free to reasonable to expensive. Since you are in charge of this operation it would be good for you to learn the ins and outs of e-commerce. The only way to do this (that I’m aware of) is to roll up your sleeves and get your hands dirty. I would suggest you learn everything from install to customization.

I can understand you wanting to stick with solutions that ‘cater to the wine industry’ however you really need to take a step back from your industry stance and ask yourself what YOU really need. Wine, no matter how special it may be, is in essence just another ‘product’. How you present it (the View) and what the customer sees has virtually NOTHING to do with what industry your ecom caters to.

HTML and CSS are extremely simple to learn. Pick up a few books (I recommend sitepoints personally) and watch a few online tutorials. You will be an HTML and CSS guru in no time. Then after you learn that you can begin to learn whatever language your ecom system is written in whether it be php, asp…etc?

I’d suggest checking into another open source (or less costly) e-commerce system. Develop it from the ground up, learn it, breathe it, eat it, sleep it. Within a year you will BE IT!! You will then be able to make changes and modifications that will be necessary in the future to mold and grow your online business.

32

You will be an HTML and CSS guru in no time.

Lawlz, I’m goin’ on 4 years here : )

33

I totally agree, rustybuddy. The e-com company has got to go. The truth is, online sales are only 1% of our business, so they are low priority compared to pleasing brick-and-mortar distributors.

We have a 1 year contract that started in January. My goal is to be ready to leave the e-com company in a year.

This weekend I finished Sitepoint’s beginner level CSS book in 24 hours. That was an eyeopener, and I got a cool scuba diving website for my efforts. Now I’m working on the Style Master CSS Tutorial. One thing I’d share with anybody in my situation is that there are no shortcuts aside from rolling up your sleeves and working in this stuff. No wysiwyg tool is going to do the job for you.

Before finding this forum, I’d set up a Joomla server just to get my feet wet two weeks ago, but now I see that cool stuff can be done with a very basic server and a text editor.

I wear so many hats in this small company, I might not get the time needed to play with development enough to start from scratch and work without community support. I’m falling back on Joomla. I’ll have a look at Magento as well. The club aspect of our wine shipments will take a little bit of backend work. We have some folks who automatically get 3-6 bottles every quarter, we have affiliate links, people calling in for quotes on cases of wine, all sorts of stuff that I need time to develop. I should quit my whining and spend weekends learning php.

Thank you for your advice, encouragement, and especially the snippets of code.

How you present it (the View) and what the customer sees has virtually NOTHING to do with what industry your ecom caters to.

HTML and CSS are extremely simple to learn. Pick up a few books (I recommend sitepoints personally) and watch a few online tutorials. You will be an HTML and CSS guru in no time. Then after you learn that you can begin to learn whatever language your ecom system is written in whether it be php, asp…etc?

I’d suggest checking into another open source (or less costly) e-commerce system. Develop it from the ground up, learn it, breathe it, eat it, sleep it. Within a year you will BE IT!! You will then be able to make changes and modifications that will be necessary in the future to mold and grow your online business.

34

I’m back. I did yet another CSS tutorial and have a slightly better understanding of it all.

Now I’m ready to tackle those niggling things that keep my boss unhappy with the site. What seems like it should be easy is getting consistent positioning of site elements and a page that doesn’t seem to jump a few pixels in any direction while navigating.

I want http://www.heritagelinkbrands.com/heritage.aspx[http://www.heritagelinkbrands.com/heritage.aspx](http://www.heritagelinkbrands.com/heritage.aspx) to be my standard of a well-aligned page.

If I open http://www.heritagelinkbrands.com/US-Distributors.aspx in another tab and quickly switch between tabs, it looks like that margin varies by 1 or 2 pixels. But both pages show the same margins in the Layout section of Firebug.

I can start fiddling with margins and make the page move, but that won’t help overall.

Where should I be looking for the source of this alignment issue if I want all of the pages to be consistent?