CSS improvements
Posted by Super G on March 22, 2006 - 6:51pm
HTML-savvy Oil Drummers may have noticed that I've been struggling quite a bit to get a liquid 3-column layout to render properly in all of the popular browsers. Well, reader xaxat finally pointed me to a solution that seems to work on all of the browsers I can get my hands on. So, in honor of TOD's 1st birthday, I present you with the new layout. The new layout no longer uses tables, the right sidebar no longer gets chopped off in Safari, and the page renders much faster in Firefox and IE.
Let me know if you have any problems!
“Where ideas are concerned, America can be counted on to do one of two things: take a good idea and run it completely into the ground, or take a bad idea and run it completely into the ground.”
—George Carlin
Contact
- Content: editors at theoildrum dot com
- Tech support: support at theoildrum dot com
License
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Ads by blogads posts to the left of center and obscures the column of post text on IE6.0.2800.
Rendering speed vastly improved.
Thanks for your efforts.
I modified the z-index property of the center column so it appears "on top of" the sidebars. This should make the main content more visible.
I suspect the problem is not the display size, but the text size. A lot of people these days have huge monitors and high-res graphics cards. Of course, that means text looks like microfilm when you're browsing a Web that still seems mostly designed for 800x600 displays. The solution is to increase the text size. Especially if you're north of 30. But this does screw up the formatting of some web pages.
You might check to see what happens when you increase the browser text size settings.
Using Opera 9, tech preview 2, works like a champ. Touch the "+" on the keypad and blow it up as big as you want.
If I had my way, everyone would be using Firefox. But according to our stats, 53% of TOD readers use IE, so I have to make sure it works for IE.
Super G - I checked before I left work and it was fixed. I then minimized the browser window so I had three equal size columns and the blog text rendered correctly within its third of the browser window with no overlap. Firefox 1.5.0.1 does the same with no problem. Also Opera 8.52
Now just tweak the CSS to blow the ads off the screen altogether - Oops, forget I said that. Just trying out my Cherenkov imitation. Still needs work :-)
One weird thing I noticed: when you click on a thread, the two sidebars don't display. Not really a problem; makes the thread very readable. Very odd, though. The sidebars display in Firefox fine, but just aren't there at all in IE.
as far as i can see i cant update to safari
without buying 10.3.
thats a no go for me, I'm a luddite with a free
computer and free broadband!!
lefthand bar is still in the middle of the screen
however everything is much faster
and i can skip between applications,
something i couldnt do before.
if i can download something please tell me,
please
thanks super G
you the man
thankyou leanan
BTW, great job, Super G! I'll have to look at it on a phone now.
I've pulled this up a number of times on my Treo 650. Works OK. I do it when the withdrawal gets too bad and I need a fix before I can get to my laptop.
Super G, there's ways you can test for phone-based clients and generate an optimized page for the itty-bitty screen size.
P.S. I discussed wind power scalability issues with my friend in the business. As a courtesy to him, I did tell him that it was research for public consumption. So what I know is necessarily general. I want to do some extra reading to fill in some blanks.
the first post!!
the left handbar
has moved into the centre
so i cant read posts properly
that are at the top of the page
and this is as far as ican type
i am reading this through
explorer on a macx OS
I've got the 'FasterFox' extension and the pages were taking over 50 seconds to download most days (mostly due to the off-site stuff). But the last few pages I've looked at have loaded in about 15 seconds!
Great Job! As you Americans would say.
Thank you, and very nicely done!
As best I can tell, that problem seems to have been corrected. Or maybe it is just because the page was rendered so much more quickly. Either way, no complaints.
under an ad. Thanks! And Thanks for all your work.
1.larger images then the width of the text collom in the middle get choped off by the right collom.
2.plase state on the main page that this site needs java and java script enabled or you cannot post.
both of these apear in Epiphany version 1.8.4.1
http://www.gnome.org/projects/epiphany/
I may suggest Avant Browser a free dustribution browser which has none of this problems with the same (or better) ease of use.
I love Firefox. There are a few pages that don't display correctly, but they are getting fewer and fewer all the time.
What I most love is that there are extensions that do almost anything you can imagine (including post HTML to blogs like this one). And you only have to load the ones you use. (Ad-Block has made the Web so much more pleasant. Not to mention faster.)
And it's a pretty lean and mean program. You can usually install it even if you're not an adminstrator, because it doesn't entangle itself with Windows' innards the way many other programs do.
My preference for Avant comes from the fact that it's a Multiple Document Interface aka MDI. You can play arround with the tabs on the browser, change size, drag them arround etc. And of course it interprets correctly my asp code.
By the way what was your problem with the Favourites folder(s)?
I always loved Netscape, so Firefox has been a dream come true for me.
I have now gone over to netscape navigator and that is working just fine.
I use Avant Browser and I'm having that under 600 pixels problem. In the post comment page it is worst than that (try it with IE).
Here's a print screen of it.
I'd like to use Firefox too, but it doesn't interpret correctly ASP.NET generated code. That's why it hasn't completely overcome IE.
I can live with it this way, after all it's the ads that go away.
- When I adjust the tab's hight the right column simply desapears.
- When I scroll up and down, the blue background on the blockquotes and on the comments header desapears, entirely on partially (haven't found why).
You should experience theese same problems in IE.As for the width problems try to shorten the value of min-width in the body style. If min-width is lower the side-columns should be present at a lower tab width.
I'm seeing it too. It sounds like this bug, except that it's occuring in top-level comments, which aren't inside a dl tag. Weird.
Can you tell me what's the problem with simple code like this?
It doesn't solve the speed problems, but it is all HTML standard.
If a browser doesn't support standard HTML one should be pragmatic and drop it, don't you think?
Internet Explorer's table rendering algorithm requires that the table's entire contents be loaded before the table can appear. In the table-based layout, the entire content of the page was inside a table, so a user had to wait at least 5 seconds before the content appeared. Using a CSS-based layout solves this problem.
Still I've no problems with this new layout, I can see the posts and comments clearly. It just seems to me that a table based one can be better than this. Better said than done though.
Are you making an argument against supporting Internet Explorer?
Very fast loading on a 'not too fast' DSL connection.
When I look at the list of articles on the home page, I see one with (14 new, 28 total). When I eventually navigate through other articles to that page (using the next or previous topic menu at the top), the comments show (0 new, 28 total) at top & bottom, but there are 14 new comments. I would think the new comments would still be unread.