Posted by Dan Eastwell
Thu, 08 Jan 2009 13:35:00 GMT
A quick test of IE8 shows a 'bug' ( It may be correct behaviour, it's not clear from the spec), where if you have two floated elements (e.g. an a, containing a span), the background colour for the child element will not show on the hover state, if the background-color for the normal state is not specified.
See this test case for an example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IE8 Test page</title>
<style>
body{ font-family:sans-serif;}
a{
background-color:#ffcc00;
color:#000;
padding-left:10px;
text-decoration:none;
float:left;
}
a span{
float:left;
}
a:hover{
color:#fff;
text-decoration:underline;
}
a:hover span{
background-color:#000;
}
</style>
</head>
<body>
<a href="#">
<span>Text</span>
</a>
</body>
</html>
Specifying the background-color on the span in this example will cause the a:hover span background-color to show. Setting it to transparent will not.
Posted in Browsers, CSS | Tags background, bug, bugs, class, color, css, debugging, exlporer, explorer, hover, ie8, internet, internet, psuedo, state | 2 comments | no trackbacks
Posted by Dan Eastwell
Tue, 11 Nov 2008 21:00:00 GMT
A quick example of a CSS style guide - I've been reading about unit testing for jQuery and wonder if an analagous approach could be used on a CSS system.
Probably not, but a style guide featuring every type of box, unit, module and typographic style on the site can quickly allow you to not only see if any changes you make have knock-on or regression errors, but allow you to see what your styles imply.
What do I mean? Well, if you have a particular form style, a style guide should have all form elements shown, even if they appear nowhere on your site - eventually, they will.
If you have a module style, what will it look like at different widths, and in combination with other similar boxes (even if you're building a fluid layout)? A style guide will help you find out and troubleshoot.
I've written about CSS systems analysis, and am happy to find a kindred spirit in Natalie Downe in her article, which covers not only CSS systems analysis, but also the concept of css style guides in any documentation handover.
Posted in CSS, XHTML, Interface Development | Tags analysis, css, guide, style, systems | 1 comment | no trackbacks
Posted by Dan Eastwell
Mon, 29 Jan 2007 10:14:00 GMT
You'd think that with IE7's zoom feature, we'd get rid of one real testing headache when creating scalable layouts with CSS.
That's true in the vast majority of cases, but there are still issues with techniques we've come to get used to.
Take this example: www.digitaluk.co.uk.
With one level of zoom, you find that the calculation for the centering of the navigation gives a different result to that for the main content:
And is greater at the second level:
This may be due to the fact that the navigation is absolutely positioned, within a relative parent container, a technique for getting main content first on the page (normally for SEO), but not first when viewed in the browser.
This may be an issue we front-end developers need to tackle, or it may be a bug in IE7's zoom facility, I've not tested this thoroughly enough yet, but there is an issue that needs resolving.
Posted in Browsers, CSS, XHTML, Interface Development | Tags css, html, IE7, resize, resizing, zoom | 1 comment
Posted by Dan Eastwell
Wed, 03 Jan 2007 15:57:00 GMT
One of the biggest banes of today's modern internet is how to clear elements that appear after a floated element.
This has been covered well, within this article on easyclearing from position is everything. However, the solution for firefox is a bit of a hack - you don't need to add an invisible dot after the content.
Now that IE7 has hit the ground running and has better standards support, we can make use of this to solve our problem
What we actually need is a selector that applies to everything immediately after our floated element, or its container. The W3C spec already has this element: the adjacent selector: A + B.
This will apply styling to B, where it is the first sibling of A - in our example the thing that follows our floated element, or its container.
Apply to all
We'd like to have all types of element that follow our floated element to be cleared. There's a CSS selector that allows us to do that: the universal selector *
Thus we have the following code:
div.container + *{
clear:left;
}
What about other browsers?
Now, this is recklessly untested at the moment, but should work in Firefox and IE7. IE6 will still require clearing from the old easyclearing hack ({height: 1%;}), although that would probably be best placed in a conditionally commented file, rather than using the old * html hack.
Edit: This method doesn't appear does seem to work in Safari.
Edit: This method 'causes problems' in IE5.01, so will need to be hacked out in your tweaks file, possibly using this method:
@media all{
* html div#container + * {
clear: none;
}
}
The main point still stands, though, no hack is needed to get clearing in standards compliant browsers and the existing hacks are needed in < standards compliant browsers. Shame about IE5.10 ruining the party for everyone. Again.
Posted in Browsers, CSS, Interface Development | Tags adjacent, clear, css, easyclearing, float, selector, universal | no comments | no trackbacks
Posted by Dan Eastwell
Sat, 25 Nov 2006 11:26:00 GMT
Seeing as my site's called The Thought Balloon and I write a lot about CSS, Javascript and HTML, I get a lot of search engine queries for people looking for a 'CSS balloon' or a 'javascript balloon'.
Read more...
Posted in CSS, XHTML, Interface Development, Javascript and the DOM | Tags balloon, coding practice, comment, css, graceful degradation, html, javascript, popup, progressive enhancement, xhtml | 3 comments | no trackbacks
