Web Development & Stuff » XHTML http://web-development-blog.co.uk Some interesting findings from web-dev land... Thu, 22 Dec 2011 15:35:11 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 XHTML element/tag not visible until selected Internet Explorer 6 http://web-development-blog.co.uk/2009/10/04/xhtml-element-tag-not-visible-until-selected-internet-explorer-6/ http://web-development-blog.co.uk/2009/10/04/xhtml-element-tag-not-visible-until-selected-internet-explorer-6/#comments Sun, 04 Oct 2009 17:41:11 +0000 admin http://web-development-blog.co.uk/?p=199 God I hate IE6! The day it’s finally laid to rest will be party day at my place. Everyone is invited!

This is probably an oldie but I came across it for the first time today.

I had some elements that were invisible in IE6. Only until I selected them by mousing over and left clicking.

I managed to make them re-appear by doing this in my IE style sheet. I haven’t checked it but I don’t think it’s a valid CSS property. So best keep it out of sight of the W3C validator.

1
2
3
div#problem {
    zoom: 1;
}
]]> http://web-development-blog.co.uk/2009/10/04/xhtml-element-tag-not-visible-until-selected-internet-explorer-6/feed/ 0 Nested form labels / inputs technique using Ruby on Rails form helpers http://web-development-blog.co.uk/2009/03/18/nested-form-labels-inputs-technique-using-ruby-on-rails-form-helpers/ http://web-development-blog.co.uk/2009/03/18/nested-form-labels-inputs-technique-using-ruby-on-rails-form-helpers/#comments Wed, 18 Mar 2009 16:36:37 +0000 admin http://web-development-blog.co.uk/?p=101 It was, (not 100% up on WAG2 yet) a W3C WAI accessibility recommendation to nest your form fields (inputs/selects etc) inside your label tags. So they were contained by the label much like you’d put an <img> tag inside an <a> tag to make it a link.

The Rails helpers don’t seem to have much scope for this (please correct me) but it is hack-able doing some concatenation stuff like this:

1
<%= f.label "Screen name:" + (f.text_field :screen_name) %>
]]> http://web-development-blog.co.uk/2009/03/18/nested-form-labels-inputs-technique-using-ruby-on-rails-form-helpers/feed/ 0 Neat conditional IE6 IE7 css style sheet solution http://web-development-blog.co.uk/2008/03/26/neat-conditional-ie6-ie7-css-style-sheet-solution/ http://web-development-blog.co.uk/2008/03/26/neat-conditional-ie6-ie7-css-style-sheet-solution/#comments Wed, 26 Mar 2008 19:14:10 +0000 admin http://web-development-blog.co.uk/2008/03/26/neat-conditional-ie6-ie7-css-style-sheet-solution/ OK we all know that IE6 & 7 render styles differently to good old FireFox. I must say I continually find myself cursing Internet Explorer for this exact reason!

So in some cases the only way to solve these issues is to load in an additional style sheet. After your main style sheet has loaded. One that overrides (or adds) CSS selectors for Internet Explorer.

I personally didn’t want 2 (or more) additional style sheets for each version of IE (6&7 – heh yes I’m ignoring older versions, bit before my time!). So I came up with this solution.

In the head area of my XHTML documents I use this code

Regular style sheet:

1
<link href="/css/main_stylesheet.css" rel="stylesheet" type="text/css" />

Then right after (on the following line) I load in the Internet Explorer additional style sheet:

1
2
<!--[if IE]><link href="/css/ie_stylesheet.css" rel="stylesheet" type="text/css"></link>
<![endif]-->

I use the main style sheet in the normal way.Then in the Internet Explorer style sheet I define anything I wish to be applied to IE7 like so:

1
2
3
h1 {
font-size: 200%;
}

Then directly after I over-ride this property with an IE 6 property prepended with an underscore (IE6 interprets these definitions). So I end up with this:

1
2
3
4
h1 {
font-size: 200%
_font-size: 100%;
}

Using 2 separate style sheets is going to lead ultimately to more flexibility but this technique meets all of my needs neatly. Let me know if you find it useful at all or have any suggested improvements ;]

]]> http://web-development-blog.co.uk/2008/03/26/neat-conditional-ie6-ie7-css-style-sheet-solution/feed/ 0 HEAD NOSCRIPT CSS validation workaround http://web-development-blog.co.uk/2008/03/23/head-noscript-css-validation-workaround/ http://web-development-blog.co.uk/2008/03/23/head-noscript-css-validation-workaround/#comments Sun, 23 Mar 2008 11:40:22 +0000 admin http://web-development-blog.co.uk/2008/03/23/head-noscript-css-validation-workaround/ I wanted to apply a different set of css styles to a degraded non-javascript version of a page to maintain some accessibility aspects.

I wrestled for a while with the <noscript> tag but this fails to validate in the head section of a HTML/XHTML document. This wasn’t a good enough way to do things.

Eventually (with a little help from a friend!) I found a solution and that was to add a class attribute to the <html> tag with Javascript. So I added this in the <head> section:

1
2
3
4
5
6
7
<script type="text/javascript" language="javascript">

  /* This adds the class js to the html tag. Allowing us
        to apply different styles if javascript is enabled.*/
    document.documentElement.className = “js”;

</script>

So if Javascript is enabled my <html> tag now has this class <html class=”js”>

Allowing me to apply different styling to both the Javascript enabled or degraded versions:

No Javascript

1
html h1 { font-size: 100%; }

Javascript

1
html.js h1 { font-size: 200%; }
]]> http://web-development-blog.co.uk/2008/03/23/head-noscript-css-validation-workaround/feed/ 5