Posts Tagged “css”
Stephanie • 10th Dec 2009 • webdesign • bcit, code, css, web design, webdesign
Rather than doing one giant redesign and launch, at BCIT, we’ve been doing small updates for a while now.
Take our footer for example, I got to update all of them using the CSS a few times and then we decided we wanted to mix up the HTML. Templates and applications were updated with the new code in phases. There were a few different ways the CSS for this could have been managed but I chose to have the old code co-exist with the new in the same style sheet and differentiated the two with IDs (let’s say I called them #footer and #fatfooter).
We’ve phased in #fatfooter slowly across the 46ish templates, 3 CMSs, and only Brandon knows how many applications with their own code that make up our website.
We should be done now and, unintentionally, I made it easy for us to check. A quick search of the server for id=”footer” turned up all the stragglers.
Some of the stragglers had been neglected for a while and turned out to need more than just a new footer…
So what’s languishing in your code that you can delete?
Stephanie • 14th Aug 2008 • webdesign • accomplishment, css, IE6
Just updated the look of Mum’s campaign website: Barb Hobson | A Strong Persistent Voice for Coquitlam-Maillardville. I changed everything without altering one line of HTML, man do I love CSS (IE6, I still hate you).
Stephanie • 11th Aug 2008 • webdesign • accessibility, browsers, css, friends, frustrating, grr, ie7, image replacement, web design, webdesign
I have a friend who lives his life in low contrast. He is frequently the inspiration I need to go the extra mile and find an accessible solution to a programing quandary. A few weeks ago I had the good fortune to get to visit him and we cruised around the internet while drinking Rusty Nails so I could walk in his shoes for a bit.
His computer is set up to use one of Windows XP’s high contrast colour schemes and he also makes use of IE’s ability to override a website’s CSS.
He started by showing me his university’s home page and complaining about the large black areas which (on my computer) corresponded to the header and main navigation. After a quick look at the code I got the sinking feeling I knew exactly what was happening, and a quick look at the BCIT home page confirmed it. IE7 was giving any elements with a background image defined a black background regardless of the background colour they were assigned in the element.
The Gilder/Levin method basically positions a span with a background image over top of the text you want to replace. In theory, if images are not being displayed the text beneath will show through the otherwise transparent span. IE gives these spans a black background even though they should be transparent.
The screen cap below show the BCIT home page, with the black areas corresponding to span tags using the Gilder/Levin method to place images. You can also see that we’ve changed all of IE7’s accessibility settings to white in an attempt to figure out which one is causing the change without success:
I tried many things but nothing could be done with CSS to fix it. Considering most image replacement techniques use background images of one form or another I imagine the problem happens quite frequently. My friend was still able to navigate (albeit uncomfortably) by hovering his mouse over the navigation menus and reading the tool tips.
The moral of this story could be something about roads to hell and good intentions, but I think the real lesson here is that all accessibility testing should be done over Rusty Nails. Go buy yourself some Drambuie.
Stephanie • 8th Apr 2008 • webdesign • css
Happy CSS naked day everybody.
Stephanie • 18th Jan 2008 • webdesign • bcit, css, design, grr, html, web design, web standards
There’s only one time where I ever really miss table based layouts: when I’m trying to make a flexible horizontal navigation bar with centred links. Like this or this. *chews on keyboard with frustration*
Stephanie • 31st Dec 2007 • webdesign • accessibility, css, dial up, IE6, slow connection
One of my bestest friends lives in the middle of no where. High speed internet has not yet come to this island so I’m on dial up today, which is leading to interesting discoveries.
For example, IE6 loads images in the html before it loads background images from the CSS. Very interesting.
Also, turning off the images is not that easy. I wonder how true the assertion that people with dial up turn them off is.
Bonne Annee!
Stephanie • 19th Dec 2007 • webdesign • bug, code, css, ie
This bug seems to apply to styling elements under a class or id within a link on hover. Stuff like .class a:hover span{} or #id a:hover strong{}. The solution is to define a property on the parent link .class a:hover{} that hasn’t been declared anywhere else in your CSS, like a text indent of 0 or something.
All the work for the solution was done by Tanfa, who wrote an article on IE Pure CSS Pop Ups Bug, I just thought it was worth mentioning that this bug can be generalized to more than the CSS menus.
Here’s what happened to me:
I had some text inside a link, and I wanted some of it to do one thing when rolled over and some of it to do something else. I marked it up like this:
<div class="promo">
<h3>News</h3>
<a href="link.html">IE has lots of bugs <strong>read more</strong>.</a>
</div>
It’s sort of a solution to the fact that “read more” makes bad link text. Bad. And I don’t write the copy.
Then I tried to style it with something like this:
/*default link behaviour*/
a{
text-decoration:none;
color:#8ec3e2;
}
a:visited{
color:#6d80a8;
}
a:hover{
color:#c1fcff;
}
/* overrides for this element */
.promo a{
color:#000;
}
.promo a:hover{
color:#000;
}
.promo a strong,
.promo a:visited strong{
color:#8ec3e2;
display:block;
}
.promo a:hover strong{
color:#c1fcff;
}
Which did exactly what I wanted it to do… in FireFox but in IE 6 the hover was not displaying properly. After a little tinkering the IE bug alarm bells started going off in the back of my head and Google provided Tanfa’s article on IE Pure CSS Pop Ups Bug in response to my query.
I added float:none to my declaration for .promo a:hover{} and all is now well :)
.promo a:hover{
color:#000;
}
Thank you Tanfa!
Stephanie • 4th Jun 2007 • webdesign • bcit, css, firefox, guidelines, nervous, ux, web standards
Who knew web design could be so… academic?
Since I got back from @media I’ve been hard at work on a set of guidelines which ideally will one day guide the interaction and styling of all forms on the myriad of BCIT web applications though right now will only be applied to anything in the ‘public web’ look and feel. I don’t think I’ve done this much research since I finished university.
Here’s a bit more information on my quibble with FireFox: the bug report and ensuing argument. Some one who knows what they’re doing should probably read the CSS3 proposals to see if this can be avoided in the future.
Also, sadly, I’m down to my last two chocolates from See’s in San Francisco.
Stephanie • 28th May 2007 • webdesign • css, firefox, html, learning
Wow, FireFox does not play nice with styling legends.
FireFox, I’m not mad, I’m just disappointed.
Stephanie • 7th May 2007 • webdesign • busy, CADE, conference, css, excited, metablogging, nervous, presentation, work
I have lots to say but trouble finding the time and words to say it.
Blog posts I hope to make in the next two weeks:
- Taking credit where credit is due – in response to a discussion about women in IT at zeldman.com.
- My thoughts on the hiring process and the job market and why I do what I do where I do for the pay I get.
- Some of the steps we’re taking to convert our templates from tables within tables within tables to just… one table, well it’s an improvement.
- Highlights of our presentation at CADE and my thoughts on the rest of the conference.
Until then, if you think of yourself as a web designer – go take A List Apart’s Web Designer survey.
