That's how I feel about blogger layouts and cascading style sheets ATM. Before the great migration, I had a blog layout that was slow and clunky, but worked. I've been trying to replicate that layout in the new version; unfortunately it seems that no matter what I try, it fails to work in Internet Explorer. This isn't so much a problem for me, as I use Firefox - but obviously I'd like it if people stuck in non-tabbed browser hell (often through no fault of their own) could read it too.
The problems all seem to revolve around my preference for having a sidebar on the left, which then causes various problems for the body of the blog which can only really be solved by whacking the sidebar with "position: absolute". On the plus side, this means I can get the body to load first, giving people something to look at while the vital "recent comments" javascript does its stuff. On the minus side, it means that in IE6 the page is always bigger than the window, which causes obvious problems reading (I shudder to think what it looks like in older versions). Still, at least it kindof renders properly - some of my attempts earlier tonight saw the blog body split after the first post or the sidebar disappear entirely in IE, which was even worse.
So, anybody know how to fix these things? Or how to ensure the blog body takes up its full available width, rather than shrinking to fit in some post windows (e.g. Sedition by Example). Or how to get my sidebar and body the same height (a minor annoyance compared to the others, but still something I'd like to fix - ideally without needing background pictures or more obnoxious JavaScript). I am planning to do a new layout some time, but don't have the time at the moment for serious work (let alone the design skills), so at the moment I'm trying to (mostly) reproduce what I had.
Of course, I could always switch back to the old table layout I was using before, and I'll do that by the end of the week if I can't solve these problems - but that would lose some of the functionality I was hoping to gain by upgrading. So, any suggestions?
Firstly, get Firebug, if you haven't already. It will help take the pain out of hacking on the CSS under Firefox and other browsers to a lesser extent.
ReplyDeleteThen have a look at the layout and CSS articles on A List Apart, particularly Creating Liquid Layouts with Negative Margins, and Multi-Column Layouts Climb Out of the Box.
I'd suggest looking at mine, but it occurs to me that I've never checked it in any version of IE.
JWM,
ReplyDeleteYour blog when viewed on ie6 has the side panel down the centre of the screen. NBG in ie6.
remember this is normal
ReplyDeleteAll my web sites designs use tables. Easy, foolproof and work in ie (any version).
ReplyDeleteie7 with its tabbed format works pretty good. At least colour modified sroll bars to match the web pages colour schemes work in ie. Also table border colours work in ie but not in Firefox.
I test in both ie and firefox and if it looks good in both it works.
But then again I use a very simply HTML editor (SoThink), write a lot of code and dont rely on Dreamweaver type software to make up web pages. I think the problem lies in the web creation software and with designers who dont know how to correct the dodgy script this type of software creates.
You can use position: absolute; on the sidebar, and add a left margin (or padding, depending on what effect you want) to the content.
ReplyDeleteTo make the sidebar and content (appear) the same height without using background images, wrap them both in something with the same background as the sidebar. That'll only work for long pages (like the main page) and not short ones. For that you need a 200x1 image to set as the background of that wrapper:
background: url(sidebarbgcolor.png) left no-repeat white;
Targeting perfect functioning in IE6 is a waste of time - you'll never get it since the box model is so broken, but you can fake it by giving them an extra stylesheet using conditional comments and get it at least usable.
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/style/iesucks.css" />
<![endif]-->
You might need the same for IE7, but not to nearly the same degree.
Table border colours certainly work perfectly well in Firefox, I use them myself.
I have just completed (well, except for the acceptance testing & any bugfixes that crop up) a contract developing a website.
ReplyDeleteIt was my experience that UI issues surrounding browser incompatibilities and CSS vagaries took as long to resolve as the core business logic took to develop.
Actually, Explorer 7 has tabs. IE is now the _tabbed_ browser from hell.
ReplyDeleteI struggled with changing mine over as well. Getting it to play with IE and Firefox is just nuts. I ended up compromising on site design to get it to working on both... I've still got a strange gap under my header in IE, but it doesn't look too bad, so I'm not fussed.
ReplyDeleteI'd suggest creating a new blog to fiddle with the template to your hearts content, so not to disrupt your site, and then copying over the template when you're happy.
The height thing isn't solvable without java or an image.
To solve your width problem, you need to set your a width that matches the heading.
Using conditional comments you can give IE a completely different stylesheet, and fix all the rendering bugs it throws up. It's just a case of tweak-and-reload until you have it looking ok. That way, people with half-decent browsers don't have a compromised experience and people in IE won't notice there's anything wrong: you could make it look completely different if you wanted.
ReplyDeletejames
ReplyDeleteI've still got a strange gap under my header in IE
If we're thinking of the same gap, it's in firefox on my PC. Does this help?
#header-wrapper {...
padding-bottom: 0px;
...
}
And yes, I do have better things to be doing with my time.
looks fine with the gap, mind
ReplyDeleteHaving toyed with some of the suggestions, I seem to have something that now mostly works. Post-pages are no longer too narrow, though they are usually too short. The sidebar is grey to the bottom on the frontpage, at least in FireFox. IE is now ugly as hell, but a bit more usuable than it was (and would be less ugly if I wasn't relying on blogger's widgets for links).
ReplyDeleteUnfortunately I wasn't able to use the negative margins properly, otherwise they'd solve one of my minor niggles, and probably IE too.
(Of course, I could solve everything by reverting to a table, but I suspect that would adversely affect load time. I'll try it sometime over the weekend and see).
So, what do people need fixed next?
Oh, and Firebug is neat - it helped me solve several IE problems once I could see exactly what each piece of code was doing.
ReplyDelete