Spannah in the works

Thursday, April 26, 2007

Firefox background image bug

Grrrr am soooo frustrated!!! Have a teensy issue with Firefox displaying a background image. The background image will only appear if I set a border-bottom to the div to which the background image is applied. Now that completely stuffs up my design and have struggled to get round the problem. Opera and IE display it fine and as you would expect it to behave. The fact that Opera seems happy leads me to believe it may be a bug in Firefox? If anyone has any experience/solutions please do reply! If I find a workaround, then I will post back.

Wednesday, April 18, 2007

Em 'n' em

I've started looking more seriously at scalable websites - or elastic sites, whatever you want to call them. Basically, replacing my pixel measurements with ems so that as the font sizes increase and decrease, the constraining elements on the page expand and contract accordingly.

I did this by attacking a fixed width site I'd built using pixels, with the font size described in ems. I went through and converted the pixels to ems and kept increasing and decreasing the font size in firefox, IE and Opera to test how the site worked. It actually seemed to convert pretty smoothly. The main problem I encountered, was addressing image placement. For instance, if you have a site with a 780px width, the top banner can be an image of 780px. When you increase the font size, the width of the site doesn't change. However if you set the width to ems and increase the font size, the width of the site adjusts accordingly and suddenly your 780px width image is left stranded, surrounded by space.

To try and tone down this problem, I created a wider image and feathered the right hand edge to the background colour, then aligned this background image to the left. As the width of the site expanded beyond its default width, the image just gracefully faded to the background colour rather than jarringly halt at a set width. Not perfect, but a reasonable solution I felt!