This tutorial builds on a previous post for creating a rounded inset image from a square picture, this tutorial adds a complex border to make the image look like a stylish porthole. The parts of the (w)hole The final image is made up of: The original image which has a drop-shadow and border applied via …
It’s easy to create round pictures from square ones using just CSS. It does mean using some proprietary css, but it’s relatively well supported – FireFox, Chrome, Safari, Opera, and IE9 are all OK with it. Adding an inner-shadow to make it look like the image is embedded into the page is just as easy, …
There is now a javascript based WordPress plugin for adding Page Peels to your site. Take a look at it on Code Canyon. The jQuery version of the page peel script has been very popular on SmartRedFox.com, and I’ve finally got round to making some updates and changes to it. Since I wrote the original …
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 …
Image buttons in an Asp:datagrid for edit/cancel/update Read More »
Okay, 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 …
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: IE6 ignores the !important and sets the height using …
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. …
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 …
Image button not aligning vertically with input box Read More »
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 …
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 …
