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.
Recently in CSS Category
Hopefully you'll be able to post comments to this blog with ie7 now. I had to remove the css styling for the fields and make it into a table as I couldn't work out which bit of css was breaking in ie7 (but working in ie6 and firefox)
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.
The same posting viewed in firefox - looks great
and in firefox again, extra wide - the image stays within the background box.
Remove the float left and the picture appears in internet explorer
But if I set float=left within css the image disappears again.
Add position="relative" and the image reappears again and looks great
Until I change the width of the browser and then the image bleeds outside of the box.
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?
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.
Stu Nicholls | The CSS Playground | Cutting Edge CSS is some Stu's own version of CSS Zen garden with some really good style sheets. They look pretty complicated though but well worth the effort in working out how they work.
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.
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.
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.
Continue reading new fof style.
I stumbled across the Wordpress CSS guide a while ago which is really handy for understanding how Wordpress reads the CSS and applies it to the blog but I really wanted a MT version. Although I've not quite come across the same thing, the following posts help a great deal.
A nice presentation of the Beauty and Business of CSS. The figures on projected bandwidth savings are amazing!
From Slayeroffice is a Mouseover DOM inspector which to the unitiated is a bookmark you put on your links bar and then when you click it and move your mouse over the webpage a popup window tells you whether the area is a div,p,tr,td etc. VERY handy for debugging a rogue web page.Thanks to ScriptyGoddess for this useful link
Useful CSS sites, HTML Dog and CSS Problem Solving
I tried to use Firefox at Movable Style with the really neat Modern Lines style sheet last night and it worked great - I really like the clean look for it (but shouldn't it be called Movable Styles?). However for best effect the Style Selector plugin needs to be installed as you can then switch between styles from the icon in the bottom right of the statusbar (as well as from the drop down list on the web page). The annoying thing is that the styleselector extension has gone missing from the Firefox list of plugins. It does still work though as I'm using it right now.
Incidentally I tried using the EditCSS plugin to see what this page would look like with the Modern_lines style and the date text disappears which is annoying and it was too late last night to work out why (and too early right now to try again)
Apparently when posting bold text and italic text you are meant to use strong and em tags instead of b and i tags (which look like bold and italic) due to the latter tags being used for formatting and don't *mean* anything. Personally i reckon that bold text means a lot more to people that strong text does. Does this mean that one day we are going to see the Worlds Strongest Text on tv (with the endless repeats?). Thanks to A List Aparts page on hacking dreamweaver which incidentally looks like a good way of customising the editor. Zempt uses the strong and em tags when writing posts, but bloggar doesn't. Fortunately in this case I happened to use Zempt to write this post.
Ever wondered about all the fuss made over CSS? Take a look at the css Zen Garden and just see how the use of a few graphics and css can dramatically alter the look of the page.
Looking at The Realm of Chadness shows a weird effect with Firebird in that the text of the main posts are truncated at the right hand side. If I disable the CSS completely with the StyleSwitcher then the entire page is unreadable. Text wraps in ie6 ok though.
I've found that if I go to the GGSearch blog, all of the links in the main column are non clickable until you get down to the Download.com button. After that they work ok. However if you disable styles and then re-enable them, all the links work! Weird. Anyone else have this problem? I'm using Firebird 0.6 by the way.
UpdateThis has now been fixed by not putting the dtd into the doctype specification. I used to know what that meant and I'm pretty sure Neil does, so you'll have to wait for him to comment to explain it!
Simon Willison's Using bookmarklets to experiment with CSS' has some excellent bookmarklets that include two that help with building cascading style sheets. Once they are dragged to the links toolbar and activated, a window pops up with the current page and you can then either type in css and immediately see the effect it would have or do the same thing, but this time have the existing css already loaded ready for editing.
More bookmarklets can be found at Jesse Ruderman's site.
Thanks to Firda's help and a clearer head this morning (coding at 10pm at night is never a good idea) I've now got the main design working as I wanted and is now live too. It is only the front page at the moment but thats a start on my MT migration. If you don't like the design and you are using a browser that enables you to switch styles, then you should be able to do so too. However i'd appreciate a comment as to what you don't like about it.
Does everyone have hassles trying to get CSS to format data in the way that *you* want? I just can't work out *what* i need to change to get this test page to work correctly. If you have a large resolution then it displays correctly, but if you only have 800*600 for instance then the right hand column overlaps the middle blog content. Sometimes I am so tempted to just go back to using tables.
UpdateThanks to Firda's comments I'm getting there on the stylesheet - its not completely ready yet but i'm a little bit further on.
