Categories
css Development Notes Uncategorised

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.:

Continue reading “Image buttons in an Asp:datagrid for edit/cancel/update”
Categories
Development jQuery

Free Jquery page peel script

Update 21/01/2013 – There is now a javascript based WordPress plugin for adding Page Peels to your site. Take a look at it on Code Canyon.

UPDATE 09/10/10 – There is an updated version of the jQuery page peel script now available.

page_curlJust recently I needed a page peel script for a client. A look around the ‘net lead me to a script that seemed to do everything I needed it to, but it used the document.write method which I’m not a big fan of, and it all seemed a bit inefficient.

My client was already including jQuery in their pages so it made sense to rewrite the javascript using jQuery. This also has the added benefit of meaning you no longer have to include the script inside the body tag to get it work in IE7.

While we were testing with users I also spotted a problem with some earlier versions of flash not showing the pictures. The simple but strange solution for this was to use two large images, instead of one small and one large. If you’re not worried about users with old versions of flash you can just use a 100px x 100px image instead of two 650px x 650px images.

You can download the script here.

Or see a demo here.

To use this script you need to edit the peel.js file and put the link and image paths in that you want to use, then put the following in the head of your page:

<script src="/pathtojquery/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/pathtopeel/peel.js" type="text/javascript"></script>

That’s it. Just add those lines and the script does the rest. Obvisously change /pathtojquery/ to the path to jQuery for your site, and change /pathtopeel/to point to where you uploaded the peel.js file.

[ad#ad-3]

Categories
css Development Frameworks html Notes YAML

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]

Categories
Uncategorised

Firefox very slow with Visual Studio and Vista

Microsoft Visual Studio

Today I ran into a strange bug that saw me and another developer pulling our hair out, and reverting back to older and older code trying to work out when we introduced the bug.

The problem is this: we have a drag and drop desktop page that does an ajax call when a module is moved (it’s based on Jquery and Ajaxpro). It all worked fine a few days ago, and it worked fine on our test server that runs IIS, but in the local development environment (Visual Studio 2008 using its local web server) it runs really slow in Firefox3. Other browsers seem fine – we tested with Chrome, and IE7 with no problems.

After I managed to narrow down that the problem doesn’t occur once we publish the current code to an IIS box I started to do a little Google fu…

The problem was actually simple –  It looks like this is a problem with Firefox’s IPv6 setting. To fix it type About:config into the address bar in Firefox, Agree to the warning message, and then navigate to the net.dns.DisableIPv6 setting. Double click this setting to set it to true, and close the tab. That’s it! The problem should now be fixed.

Credit where credit is due – I found the fix here through my Google fu.

Categories
Development IE6 Notes

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…

Continue reading “IE6 on Vista the easy way…”
Categories
css html IE6

Min-height in IE6

We all know the problem: You need to set a minimum height on an object but IE6 ignores it and ruins your layout. Well worry no more, there is a simple fix:

selector {
min-height:500px;
height:auto !important;
height:500px;
}

This takes advantage of two IE6 bugs:

  1. IE6 ignores the !important and sets the height using the last line.
  2. IE6 treats height like it should treat min-height and lets child objects cause the parent to expand.

I found this helpful solution here.

Categories
css html

Keeping your footer at the bottom of the page

Created a site design but keep getting white space showing below your loving crafted footer? Me too, a bit of research later and I’ve found a fix that works well, integrates with the yui framework, and seems to work well cross-browser.

The basic principle is pretty simple.

  • Make the body 100% tall no matter what.
  • Give it a negative bottom margin the size of your footer.
  • Move you footer up into the space left by the bottom margin

There’s a few other steps to make it work cross-browser (ie6+) but that’s basically it.

I found the solution here.


Categories
css html

Image button not aligning vertically with input box

Mis-aligned button in IE7

This is an odd problem. You have a perfectly normal search box with a go button next to it – a classic layout some might say. The problem is that the go button seems to sit about half-way up the side of the search box. Now, having tried to fix css/html problems cross-browser before, I was fully expecting to spend a few hours looking for solutions trying them in FF, IE etc. and then mixing and matching my perfect solution… In this case I was stopped short… Very short in fact. The fix is simple as adding a position:absolute to the button. Problem solved. See here for where I found the fix.

Categories
css Firefox html Safari

Removing spaces below images in FF & Safari

Here’s an annoying problem. A site renders perfectly in IE6 (this alone is surprising) but in Firefox2 and Safari it shows a 4px space below each image:

Images naturally sit on the baseline. This means that they’re about 4px up from the bottom normally. Setting vertical-align: bottom or display:block seems to clear it.

The solution for this was found here.

Categories
css html

Centering absolutely positioned elements

Having problems setting auto margins on an absolutely positioned element? Me too… until I found that I was missing one simple bit of css.

When centering an absolutely positioned element horizontally you have to specify the left and right properties as zero for this to work!

I found the solution here but I thought I’d note it down for all those people that may not have come across this themselves. Somehow it seems to have passed me by…

Auto-margins can center an absolutely positioned element inside its containing block.

For this to work, you have to

  • specify the offset properties (of opposite sides) with same values, i.e. by setting left:0; right:0; for horizontal centering and top:0; bottom:0; for vertical centering,
  • set dimensions along the axis you want to center along,
  • enable auto-margins along the axis you want to center along.

Internet Explorer note: IE6 can not relate absolutely positioned elements to opposite sides of containing block, so only one of the offset properties is used. This brings the element out of balance and renders auto-margins useless.

I hope someone finds this useful…