Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
[wiki] TextBook fixes for IE CSS
The current CSS for IE6 in TextBook is a little FUBARed – main content is partially hidden underneath left navigation, search box is hidden underneath logo.
To fix, edit IE60Fixes.css:
1. ‘#column-content #content’ – increase ‘margin-left’ to 16.2em
2. add the following:
#p-search {
position:fixed;
}
#p-search .pBody {
width: 17em;
}(Edit: updated code to it would display properly. :) -Mary)
Last edited by Mary (2006-03-25 17:32:29)
David @ 1 Cog
“Follow the shoe!” … “No, follow the gourd!”
Offline
Re: [wiki] TextBook fixes for IE CSS
Excellent. Thank you. I’ll add these tout de suite!
There’s CSS for IE5 mac too, but I’m inclined to excise that from the cluster since it’s officially dead.
Offline
Re: [wiki] TextBook fixes for IE CSS
:)
I’d drop the IE5 Win as well. Also, you can combine the IE5.5 and IE6 by adding an XML prologue to the template. That’ll throw IE6 in to quirks mode and render as IE5.5. You then just need one CSS for both. At the same time use ‘lte IE6’ in the conditional comments, and (with a bit of luck!) you won’t need to make any changes when IE7 arrives. If you’d like me to do that work, just shout.
David @ 1 Cog
“Follow the shoe!” … “No, follow the gourd!”
Offline
Re: [wiki] TextBook fixes for IE CSS
Honestly, considering the community here and the real users of the wiki (people using Textpattern), I’m inclined to think we could even drop IE5.5 and simply focus on IE6; what are your feelings about that? (There’s some who would argue to even drop IE6, but I think that’s a bit overzelous.) Either way, I think it’s probably time to get some kind of browser support statement on the home footer or something.
I’m not sure what you mean exactly by the “XML prologue”, but I do know what you mean by the ‘lte IE6’ in conditionals.
In any case, there are some complicated style arrangments on the backend. Before we go down any of these roads, which are good ideas, maybe it would be an interesting and worthwhile exercise to really look at all the existing files and relationships and really clean things up comprehensively.
Here’s what I propose. I’ll make the contents of all relevant CSS files (including those involved with the JavaScript) and the main template available in the wiki as individual pages, where we can really see what’s going on and which gives us a means (by way of the talk pages and editing features) to break things down.
Some worthy objectives for this might be:
- Continue to move forward with the new wiki presentation in collaborative fashion (it could use some polish I’m having trouble finding the time for it).
- Eliminate as many files as deemed reasonable agains target audience (ie, ie5mac, ie5.0, ie5.5, whatever).
- Make rules as concise and hack-free as possible in each file, while still accounting for whatever quirks we want to shoot for.
- Organise the CSS file contents more coherently with better grouping (related rule sets), commenting, etc. (I’ve done a lot of this in the main.css file already, but it could use some more work.)
- Maybe consider breaking rule groups out into their own files for easier editing in the future. (Could have value, but maybe more work than worth it. In any case, it would be a very last thing to worry about, if at all.)
I’ll need a couple days before I can get to this, but I’ll start a jump-off point from the TextBook Admin Planning page somewhere, which itself needs a bit of editing. The jump-off point be a mini ToC of all the relevant templates and CSS files that serve the TextBook skin. Then people can have a look, think about them a bit, and work together to buckle them down. Through it all it could be a good learning experience for practitioners and onlookers alike about managing MediaWiki styling.
By the way, nice article here: Having Layout, which has a section on Hack Management for IE7.
Offline
Re: [wiki] TextBook fixes for IE CSS
OK, launchpad is started, but no file content yet. Let’s make sure we are creating only the wiki pages we really need to.
Oh, and there doesn’t appear to be any JavaScript, only reference to it, so that’s dead code we can likely cut out of the template.
Offline
Re: [wiki] TextBook fixes for IE CSS
Good plan – Mediawiki, for all its strengths, has some of the most overly complex and bloated CSS I’ve seen. It’s probably the reason that nearly every Mediawiki install I’ve seen just uses the standard skin.
Agreed on IE5.5, but I think a bit too soon to abandon IE6 support – if for no other reason it’s still my main browser (via Maxthon) because my mouse doesn’t work with Firefox. However, if we use my (I’ve not seen it documented elsewhere!) method, then both 5.5 and 6 are easily catered for – with zero hacks in the main CSS.
The method involves adding an XML prologue to the top of the markup:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
...
<link rel="stylesheet" type="text/css" media="screen" href="css/stylish.css" /><!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/fixie.css" />
<![endif]-->
</head>That leading <code>xml</code> statement kicks IE6 in to ‘quirks mode’ which forces it to render exactly the same as IE5.5. Now the <code>fixie.css</code> is used to apply hacks for the IE browsers.
A useful document to consider referencing for this work is JJPG CSS Guide. To add to that:- comments should only be used for ‘unusual’ code, because classes / IDs should be self-documenting (#header, #main-content, etc.)
- use ‘logical’ sorting – @import -> elements -> classes -> IDs, and then alphabetically within those groups (TopStyle does this at click of button – very handy)
Also, I’ve been using a variation of Modular CSS. I think it’s a bit too modular, so I just break it down in to ‘menu’, ‘forms’, ‘fixie’ and ‘main’ (fonts, colours, layout).
You can see all of this in use at (work in progress, soon to be Txp-driven) Geoff Marchant Photography.
P.S. I’d argue against adding a ‘browser support’ statement – it should be assumed that every site supports modern, standards-compliant browsers. We just make allowances for IE5.5 and IE6.
(Edit: updated code so it would display properly. :) -Mary)
Last edited by Mary (2006-03-25 17:31:16)
David @ 1 Cog
“Follow the shoe!” … “No, follow the gourd!”
Offline
Re: [wiki] TextBook fixes for IE CSS
Sweet. That will help get things whipped up in shorter order. Yeah, the Modular CSS stuff is exactly what I was talking about in #5
Agreed about the browser statement, and about supporting IE6.
Offline
Re: [wiki] TextBook fixes for IE CSS
I have been lax on this, David_1cog, sorry. Pulled in many directions at the moment.
hakjoon, if you want to jump in to the mix, feel free. Basically trying to refine the CSS situation for TextBook…cutting out the rediculous excess that comes with MediaWiki and focusing more on our standards aware community of TxPers.
Offline
Re: [wiki] TextBook fixes for IE CSS
I’ll see what I can do, but it seems to be looking pretty alright in IE6 now.
Not sure I want to break IE6 just to make IE 5.5 work. There’s no reason for anyone to be using that anymore other then laziness.
Shoving is the answer – pusher robot
Offline
Re: [wiki] TextBook fixes for IE CSS
Destry
I’ve made a quick start at txp wiki css tidy:
- no hacks anywhere
- just one ‘override’ stylesheet for <=IE6 (fixie.css). Hopefully we won’t need any overrides for IE7, but if we do it’ll be easy to implement
- I’ve split the original ‘main.css’ in to ‘form.css’, ‘menu.css’ and ‘main.css’, all controlled by ‘screen.css’
- I’ve condensed and re-ordered (as per my previous comments)
- assumes no support for IE/Mac and only latest versions of Firefix + Opera
- total CSS is about half the original size
No doubt there will be some tidying up needed, but it’s a good start. :)
Last edited by David_1cog (2006-02-04 17:02:19)
David @ 1 Cog
“Follow the shoe!” … “No, follow the gourd!”
Offline
Re: [wiki] TextBook fixes for IE CSS
David,
If you feel pretty good about it I can replace the stylesheet when I update mediaWiki to 1.5.6 tonight or tomorrow. Should I just pull them from your sample page? I’ve noticed no odd behaviors in Mozilla or Safari.
Shoving is the answer – pusher robot
Offline
Re: [wiki] TextBook fixes for IE CSS
hakjoon,
I don’t think it’s ready for The Big Time yet. :) I really raced through it and have done no site-wide testing. Would it be possible for you to send me the templates? I can then install a local 1.5.6 to test on and then provide a full template package for your inspection.
David @ 1 Cog
“Follow the shoe!” … “No, follow the gourd!”
Offline