Notes

IE6 – Items moving when hovering over another element

I know this is a common problem, and is well documented on a number of sites, but each time I run into this problem I seem to forget the best method for narrowing down where the problem is coming from.

First, the problem

This is a real example from a project I’m working on at the moment. This layout worked perfectly in FF3, Chrome, and IE8. It was only when I came to look at the layour in IE6 that I saw the problem.

When first loading the page the following shows:

The way it looks

Broken in IE6

As you can see the box with the tick in it is in completely the wrong place – it’s supposed to be just above the “read more” link. Now is where IE6 shows it’s real strangeness. When I hovered over the read more link, or the item itself, it moved to the right place.

I’d seen this problem a few times before, and thought I knew what I was doing to fix it – a light smattering of Position:relative, and Zoom:1 and I’d be done. Unfortunately, it wasn’t that simple. My next step was a search around the internet-o-web where lots of people seem to describe something very similar, and most of them recommend applying Position:relative to the parent of the float. This didn’t work for me.

A bit more playing with my setup revealed that applying Position:relative to the list item (the parent’s, parent’s, parent) fixed the problem. One to file away for the future!

Here it is where it’s supposed to be.

The way it should look

<ul id=”incomeList” class=”checkboxes nostyle clearfix”>
<%
foreach (var i in ViewData.Model.Income)
{%>
<li class=”item”>
<div class=”backgroundRpt rounded”>
<%foreach (var f in i.Factors){
var isChecked = f.UserValue != 0 ? “checked” : “”;
%>
<div class=”checkbox”>
<input id=”incomeFactor<%:f.FactorId%>” type=”checkbox” <%:isChecked%> value=”<%=f.Id%>_<%=f.FactorValue%>”/>
<label for=”incomeFactor<%:f.FactorId%>”>
<span class=”amount” id=”factor<%=i.ItemId%>”><%=Html.FormatCurrency(((f.FactorValue) * -1).ToString(“c”))%></span>
<%:f.FactorTitle%>
</label>
<a href=”#” class=”modallink linkButton rounded” title=”<%=f.FactorTitle%>”>read more<span class=”ui-icon ui-icon-circle-zoomin”></span></a>
<span class=”modaldetail”><%:f.FactorDescription%></span>
</div>
<h4>Consequence</h4>
<ul class=”consequencesCount nostyle clearfix”>
<li class=”consequence <%:f.UserConsequence.Css%>”>
<%Html.RenderPartial(“ConsequenceLink”, f.UserConsequence);%>
</li>
</ul>
<%}%>
</div>
</li>
<%}%>
</ul>

Image buttons in an Asp:datagrid for edit/cancel/update

The Datagrid with text links.

Just recently I had to style an asp datagrid that another developer had created. Now almost all of our default styles for this site use simple image buttons for actions but the datagrid automatically pumps out the Edit, Cancel, and Delete buttons as plain text. Unfortunately Microsoft have given very little control to designers/developers over what is pumped out onto the page, so it’s pretty much a link, or an input button as standard.

I had a brief look for a way around this and found lots of people with similar problems but no perfect way round this problem.

The simplest way I found around the problem is to put an image tag into the text attribute. E.g.:

First impressions of YAML

YAML logoOkay, I’ll be honest I’m a bit of a magpie when it comes to web development, and in particular css frameworks. One week I’ll be telling everyone that’ll listen (which isn’t many people) about how great YUI is, and the next week I’ll be waxing lyrical about the excellent Blueprint framework.

So with that little disclaimer out of the way, here’s my take on the rather excellent YAML CSS framework, and my first foray into using it to layout a site.

First things first; YAML seems to be very well thought out. It claims to be cross browser compliant in almost every browser that’s still in use by more than one man and his dog, and it fixes most of the major problems web developers run into with the older browsers.

Unlike YUI and some of the other Frameworks you’ll need to download the css files etc. and host them yourself. These can all be downloaded from here.

YAML lets you get off to a flying start without any real work creating css reset files etc. After slicing and dicing a design I’ve been working on for a week I managed to get a site up and running cross-browser on the first attempt. This seems to happen very rarely for me. I’ll admit there were a few tweaks here and there to make it perfect, but overall it just worked.

It’s got a few default styles that are well thought out and I’m already finding myself duplicating them in other projects I work on that don’t use YAML. I’ll cover details of some of these styles and a bit more on how to use the framework in later posts.

[ad#ad-2]

IE6 on Vista the easy way…

IE6 Working

It seems that there’s two main reasons why people still need good ol’ IE6 running even though they’ve gone all new fangled and got Vista installed:

  1. Some old Intranet programs just refuse to work with ie7 or Firefox. Some don’t even try and fail as soon as they see the browser isn’t ie6, others try and fail miserably because of code targeting ie6 specifically.
  2. You’re a developer, and as a large number of your users still use IE6 (mainly because of the reason above) you need to test that your website or application works for them.

The good news is that Microsoft is well aware of the need for Vista users to be able to use IE6, and they’ve made some tools available to the publci for free. all it’ll cost you is a bit of time…

By |August 22nd, 2008|Development, IE6, Notes|1 Comment