CSS

New design

Well after being thrown in the deep end I think I have ironed out most of the kinks and I’ve learnt a lot about the various Movable Type tweaks needed. A lot of the old plugins have been ripped out and I’ve discovered that using widgets to include code as needed in the site will make it a lot easier to migrate in future – no need to go hacking around in the template files to remove references to plugins that are not used any more (the chief culprits for this were the scode and comment challenge plugins).
The header image was taken by Tim Perdue and was drastically cropped to give an image of the Columbus skyline. It was hard to find a picture that was sufficiently wide enough to give a recognizable skyline when cropped.

Missing pics with ie – update

I’ve been puzzling over the missing pictures in internet explorer after the post two before this one had the picture missing. In internet explorer on the main page at absoblogginlutely.net you will get just an empty space where the google map picture is, but if you click on the space you will get taken to the larger image so it really is there.
If you click through to the monthly archive or individual entry the image shows up fine.
I know the problem is partly to do with the align=”left” attribute on the image – if I remove this, then the image appears again properly. I know that this should really be styled with css, so I put the float=”left” on the image and the image disappears again. If you add the “position=relative” to the css then the image appears again and the text wraps around correctly but if the page is wide the graphic overflows out of the background image and spoils the effect.

There are several posts on the internet that I’ve found describing my problem but I couldn’t find a solution.1 2 3

The following posts were made from a sample posting to demonstrate the problem (I chose a garish yellow background to make it easier to see where everything is). As all these screenshots are hosted on zooomr and I’ve used the blog picture functionality, which includes styling on each picture posting, these images look ok in this posting but the styling is a pain to type in for each picture and not exactly easy to remember either.
The original posting with an empty picture.

Set float=left or align=left and the image disappears

The same posting viewed in firefox – looks great

Looks great in Firefox (narrow screen)

and in firefox again, extra wide – the image stays within the background box.

Looks great in Firefox with a wide screen the post just expands

Remove the float left and the picture appears in internet explorer

The hammock picture is in the wrong place.

But if I set float=left within css the image disappears again.
Add position=”relative” and the image reappears again and looks great

Set position=

Until I change the width of the browser and then the image bleeds outside of the box.

Image bleeds over the containing box.

New css design needed?

I think that this blog may need a new design, at least for browsers that are running at low resolution. The old laptop can only do 600*800 and when I add pictures to the blog (or long lines) then they break out over the bordering lines of the central column and go over the top of the right hand column making it look weird. The problem is not as pronounced in higher resolutions but it does occasionally happen (like in my previous opera post). If I remember or notice, I will tinyurl the weblink to make it fit, but I can’t do that in the opera post or when putting in paths to files with long directory names.
Having said that, I still get the occasional comment from people who like the theme so it can’t be too bad – unfortunately there is a large wasted space to the left where I am in the photo – but that is the focal point of the layout.
I might wait to see how MT3.2 looks on the local machine and see if a new design or theme can be made then. In the meantime, what are your thoughts?

Print css updated

I’ve drastically updated and corrected my css stylesheet for when you print this blog using <link rel=”stylesheet” type=”text/css” href=”styles/print.css” media=”print” />
On the main front page the adverts and navigation bar no longer appear and the text is set to wrap within 3% of the page so everything fits nicely which avoids the annoying habit that other pages have where the right hand side of the page is missing from printouts.
Im currently revamping the individual archive pages which were using a messy style sheet based on the default mt installation and not the css file that I originally thought!
I’ve not rebuilt all the old entries as this will take time to process and I don’t want to run this everytime I make a change so only new posts will get the new css settings.
Update Individual item pages now carry the same style and print cleanly….next stop are the category archive pages.

Kristen’s stylesheet

Well I’ve discovered a weird “feature” in internet explorer where half the time the logo in Cuptealuv only half appears and sometimes it only does the top 10% – but only in ie. The same page in firefox displays just as I want it. The problem is that ie doesn’t have webdeveloper extensions so I can’t turn on the borders around div’s to try and work out what is going wrong. Even in html kit in an offline copy it seems to work in ie in the preview window (which uses ie) but then doesn’t when you view in the browser itself – very frustrating and any clues appreciated. I’ve been using the tips at wordpress guide to get the look and until i had the height of the graphic correct it wouldn’t even appear correctly in preview but now that it does I’m stumped.
Update Well I’ve given up on the css style of doing the header but as it was just a graphic it was “easier” to just load the graphic in place of the header information for the webpage. I say easier as I had to edit the individual templates in MT and add the line in and then rebuild all the entries but it now seems to work. If you are still only getting half a pic or one and a half pics then press refresh.
Neil – thanks for the info, it didn’t help me solve the problem but will be of use for further development, thanks.

site design and trackback closure

I’ve used David Raynes: Closing comments on old entries script to hopefully close trackback on Kristen’s blog and at the same time I have started to play with some css for some learning time before I roll out a new blog/site. She now has a header image and we’ve also changed some colours and fonts although you get the best effect if you have curlz mt font installed. I’ve got to look up how to embed the font into the webpage. I know it is possible but can’t remember how to do it right now.

new fof style

Willy Morin posted his stylesheet for Feed On Feeds, the (web based) rss reader that I use. However his files were uploaded in some weird compression routine so I’ve reloaded them up as a zip file which can be downloaded here.
As I also use the non frames version I edited the css slightly and saved it as fof.css in the fof directory (as well as keeping his download in the frames directory). The edits I made are in the extended entry.