Tuesday September 19, 2006 Base Tag & The Named Anchor
I recently ran into an accessibility problem while
developing a very large site. To make development easier I used a <base>
tag, but what I hadn't planned for (now that I was about 280 pages into
development) was the "skip to content" anchor that is needed on every
page.
After much cursing, I sat down to hack out a solution. Implementing the anchor
link globally wasn't a problem (I just put it in the header include and had the
anchor link jump to a div ID, rather than an physical link). This solution
technically worked fine, this is where the <base> tag trouble comes into
play. I 'Googled' for about 3 hours to find out that this is a fairly common
problem, but there aren?t many large-scale fixes out there for it. So I sat
down with a co-worker and we came up with this stuff:
Just to clarify:
With the <base> tag, we'll call it: http://www.<root>.com/, is in
the header of every page; a normal anchor link "#content" will load
up the page http://www.root.com/#content....every time. This is a problem on
all pages, other than the index (and there are A LOT), because we can't have
people clicking on an anchor and getting sent back to the homepage.
SOLUTION 1:
This is for a static HTML page...
base tag: <base
href="http://www.<root>.com/"></base>
current page: http://www.<root>.com/contactus.html
anchor link: <a href="contactus.html#content">skip to
content</a>
Your anchor links should work just fine, and you can still use the <base>
tag. This is a good solution (IMO) for a reasonably size site.
If you have a large PHP driven site here is the solution we came up with:
SOLUTION 2:
base tag: <base
href="http://www.<root>.com/"></base>
current page: http://www.<root>.com/contactus.php
php in header include:
<?php
$replaceTxt = 'http://www.<root>.com';
$anchorUrl =
str_replace($replaceTxt,'',$_SERVER['SCRIPT_FILENAME']);
?>
anchor link: <a href="<?php echo $anchorUrl;
?>#content">skip to content</a>
again, I made the anchor jump to: <div id="content"> because I
already had it in every page, you can also use a regular named anchor.
That's it, pretty straight forward and it works great! DON'T FEAR THE BASE TAG!
cheers,
Tim
Wednesday August 30, 2006 CSS Wildcard - Solving Cross-browser Problems
Many of the problems I've noticed people having while
developing a web site is browser compatibility issues between IE 6/7, FireFox,
Opera and Safari. And since IE7 removed some of the old hacks we used (the
!important tag and the box hack), it's become even more frustrating.
For starters, now we need to make a special CSS file for Internet Explorer, we
do this by using an 'if statement' in the HTML. And that looks like this:
<link href="file.css"
rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet"
href="file-IE.css" type="text/css" media="all"
/>
<![endif]-->
That being said, I've been using this method for a while now and noticed that
the IE style sheet can get quite large. So I took a step back and tried to
think of an easier way to solve the browser compatibility problems. I then ran
into the CSS wildcard character. The wildcard will override all values (and
browser defaults) defined within it, this is what it looks like, and it should
be located at the very top of your CSS file:
* {
margin: 0px;
padding: 0px;
border: 0px;
font-family: Verdana;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
It will remove all default margin, padding, borders, bolding (anything you want
to define) from ALL elements. These can all be redefined later in the CSS file
like this (for example):
h1,h2,h3,h4,h5,h6{font-weight:bold;}
This method will solve a lot of your browser compatibility problems and can cut the IE style sheet down to only a few elements. it's especially helpful when styling forms since there are a lot of default padding and margin values on forms and form elements that many don't think of often enough.I hope this helps, enjoy.
cheers,
tim
Posted by tcwrigh2 ( Aug 30 2006, 12:58:28 PM EDT ) Permalink Comments [2]
Tuesday August 29, 2006 CSS3 Preview
I found a preview of some of the new properties coming out in ver.3 of CSS; some are very cool, few are actually useful, and I think 2 or 3 work in IE7 (Beta 3).....so there's not too much to be used in it. There's a border-image feature built in that kind of works, pretty neat, I'm not sure how much it'll get used.Most of the stuff probably won't get used, so I'll just sum up the one's I like the most.
- multiple background images, this is an OUTstanding feature to have, it should cut down div tag use a lot. I can see it getting abused a bunch too though. This, however doesn't work in IE7 or FireFox 1.5.0.6...so again, probably low usage, but very cool.
- text-shadow, exactly what it sounds like, no more need for image drop shadows on text. This, surprisingly, looks pretty good for a generated shadow, not as hard as the old one. It only works in WebKit right now, I imagine Safari will pick it up soon too.
- text-overflow, this inserts an elipsis (...) in text if it reaches a certain defined point. This is GREAT for when you want to sample text and put a "more..." link at the end. Oddly enough, this is supported by IE6+ and not FireFox 1.5.0.6
- background-size, conrtolling the size of a background image. this doesn't seem very usefull to me for things other than thumbnail images with a hover command, possibly zooming...but it's still pretty neat.
- border-radius, this is BY FAR my favorite new feature, it allows you to set the curve radius of a border, so in theory you could put a circle border around something....BUT of course, no IE support, as of right now. I'm hoping this get put in IE7 before it gets released in the Fall, but I doubt it. This works in FireFox 1.5 if you want to play around with it.
For more CSS3 checkout: http://www.css3.info/preview/
-Tim
Posted by tcwrigh2 ( Aug 29 2006, 10:33:36 AM EDT ) Permalink
Thursday August 24, 2006 JavaScript Form Checker
I just came across this link that was sent to me about a
month ago, it's very cool so I thought I'd share: Remember the Milk.
You don't have to sign up for anything, I'm posting it, basically, to show the
form-checking. Up to now I've been using Dreamweaver?s form validator to check
if my forms are complete. It's very easy, but doesn't t really add any *POP* to
a page.
This is using a JavaScript function to check each form field to see if it?s
complete and then producing a check or an 'X' accordingly. Lemme see if I can
go a little deeper into that...
The JS file is here if you want to take a look at it
A quick way to get this effect would be to download the .js file, mimic the
form, and then customize it accordingly. You?ll get a bunch of code you don't
need, but it's a lot faster than hacking through the JavaScript.
They have a cache function called cacheDom that checks each form field if
you're a repeat visitor, you might want to take that out, but otherwise, it's
pretty clean script.
I really don't have anything of merit to say, just thought I'd share that link.
-Tim
ps. I have another post for dealing with browser compatibility in CSS (IE vs FF
& Safari), but I'll save that for another day...suspenseful isn't it?
Wednesday August 16, 2006 CSS Resources
This is just a list of CSS resources I've used in the past, I give them the "Tim Seal of Approval" - in no special order- CSS Layout Techniques
- CSS Insider Blog
- Styling Forms
- Position is Everything
- CSS Creator
- Random CSS Imaging
- Styleboost
Enjoy,
Tim
Posted by tcwrigh2 ( Aug 16 2006, 09:46:35 AM EDT ) Permalink