Archive for the 'css' Category

useful CSS hack - replace an image with an.. er.. image

Wednesday, October 11th, 2006

via hicksdesign:-

img {
width: 0;
padding-left: 20px;
background: url(mynewimage.gif) no-repeat;
}

I have a real-world example of where this would be useful in plone skinning - in some places inline images are still used for icons (here and there - they are generally being phased out). At the moment I usually set them to display:none and apply padding and background image to the containing element, but this may be a better solution.

using BackgroundImageCache to solve background image flicker in IE

Wednesday, October 4th, 2006

Fantastic - at last a solution to IE background image flicker that doesn’t involve applying background images to containing elements. I will be using this - I’ll be interested to know if I can use the IE CSS filter version without a performance hit, as that could just sit in my IE-only stylesheet.

plone livesearch results overlapped by content and action menus

Friday, September 8th, 2006

On a custom plone 2.5 skin we found that the livesearch results were getting overlapped by certain elements of the content including action menus and elements within a composite page, in IE6. After much trial and error this turned out to be because I had used absolute positioning on the search form, which obviously confused something somewhere along the line. I also had to remove position:relative from a couple of containing elements to get it to work. As this was a custom skin already fairly heavily modified (both css and template changes), I haven’t narrowed down exactly what was happening yet, or if there is a better way to address it, but I ended up moving the form and using floats and margins to get it in position.

The plone livesearch template and CSS code seems a little over-complex to me, and I don’t really like the use of an HTML fieldset to render the results, as this is always the first thing I break during a customisation so I may create my own version in due course (in private of course, before I go around claiming I have a better version than the one that ships with plone!).

IE7 plays peekaboo to a new level

Friday, September 1st, 2006

The first site i’ve had to fix for Internet Explorer 7 is our very own www.netsightmcc.co.uk (Netsight Metropolitan Colocation Centre - the website for our Bristol datacentre). It appeared that in IE7 RC1, none of the content of anything other than the homepage was visible. We were only alerted to this by a potential customer phoning up for more information, which the site seemed to be lacking.

The reason for this appeared to be an even more aggressive version of the so-called peekaboo bug found in IE6, although this site works fine in IE6. By applying a (hack) of a 1% height to a div that contained the missing content, it now appears to be working OK in IE7 RC1. I haven’t filtered this hack out into an IE7 specific stylesheet yet, but will if I spot any undesired side effects. Maybe there’s a better way of fixing this? Time will tell, or maybe a stranger will.

Don’t play games with your business email hosting. Find exchange email outsourcing priced just right for your mid sized company. We feature Microsoft Exchange server and ColdFusion web hosting which will make your business look big.

CSS-P = CSS Positioning

Sunday, August 27th, 2006

Apparently CSS-P stands for “CSS positioning”. At least that’s what a quick googling google search querying tells me. I came across the term in a job advert I stumbled upon.

CompositePack drawer overlap plone 2.5

Monday, August 21st, 2006

I’m experiencing a problem where the Kupu drawer used to select content when in design mode on a compositepack page gets overlapped by elements from the underlying page. I thought it was something I had done with a custom skin I was building, but when I switch back to plone default skin, the problem still exists. I don’t think I have come across this before, so my conclusion at the moment is that this is something unique to Plone 2.5

I am seeing this on Firefox 1.5.0.6 (PC & mac) and IE6 PC. CompositePack 1.0 Final

screen shot here (Firefox)

If anyone has a fix for this please let me know!

UPDATE: Fixed

I have now fixed this (thanks Emyr!).

I applied the following to my style sheet:-

.kupu-drawer {
z-index: 3 !important;
}

#region-content .contentActions {
z-index: 1;
}

(the !important is only necessary because of a precedence thing somewhere along the line)

Plone installable custom skins - how to deactivate the ploney bits

Thursday, August 17th, 2006

I’ve been using DIYPloneStyle to create custom installable skin products since.. err.. an early version, and the process always went like this:-

  1. use the generator.py file to create a new product
  2. install the skin product
  3. Use the css_registry to deactivate most of the plone style sheets, so that I don’t have to overide the styles in my custom CSS

The problem with this is that this can cause complications if there is any skin-switching capability, plus if you provide the skin to someone else to install you also have to send instructions to deactivate the appropriate stylesheets.

Today I downloaded the 2.1.2 version, and I was pleased to see that the blank skin product that it creates takes me to exactly the same starting point as I like to start from, i.e. all the plone default styles are deactivated. I say deactivated, but what I mean is there are blank public.css, plone.css etc files in the product, so when the product is installed, these have higher precedence than the ones in the plone layers. This is a much more convenient way to deal with overiding the styles, not sure why I didn’t think of it before!