IE6
Divisive Cottonwood - June 24, 2008 - 20:25
| Project: | Flexible |
| Version: | 6.x-1.3 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
| Issue tags: | accessibility |
Jump to:
Description
Firstly, thanks for all you work on this template.
I've been using Flexible for the past part of a week, but when I've come to test it on IE6 I've realised that it completely collapses - the box CSS doesn't work at all.
Ouch
Using the demonstration I see that it is the same on that too.
Do you have any ideas about how I can get this working in IE6?
#1
I see the problem - but can't see an obvious solution. I'll take a look at the IE6 "hacks" that have been put into other Drupal themes to see if that gives any clues.
#2
Yeah, thanks for replying - it's gonna be a case of some serious work on an IE6 version - I may even just let the box CSS go and style around a more basic layout.
Just one question - H2 tags.
I've wanted to remove the H2 tags as titles for blocks and nodes on the frontpage. For accessibility standards there has to be only one title tag for each and they have to go in linear fashion - H1, H2, H3.
Blocks, easy - gone.
I removed the H2 tag from the page.tpl - this removed H2 as a title for separate nodes, but there is still H2 used as a node title on the listed items on the frontpage...
Now I'm thinking... at this point I've removed all the H2 tags from the template, haven't I? So where is the instruction coming from to put H2 tags as node titles on the frontpage?
Any ideas what I'm missing here? Is the instruction for H2 tags coming from Drupal's core files?
I'm putting together a site for a history group in London - I'll post up the URL when I've finished as you may be interested in seeing how your template creation is being used.
#3
I think the H2 is coming out of Drupal core. However, I'm pretty sure you could override it in the theme. Suggested solution below.
I'd be interested to know the changes you made as I would like to get the accessibility issues as "right" as possible, including the cascading of headings. And, yes, please send me a link to your site when available - it's nice to find out when your work is of use to people. It would be good if Drupal.org could tell you the number of times your themes and modules have been downloaded - as it is you usually only find out when there's a problem!
In template.php add a new function:
function phptemplate_preprocess_node(&$vars) {// &$vars gives you lots of information about the node, which you could use or alter
}
Add a new file, called node.tpl.php, to override the node display. I got this template from the Zen theme and I've marked where the H2 comes from - but you can find others or just hack it about.
<div class="node <?php print $node_classes ?>" id="node-<?php print $node->nid; ?>"><div class="node-inner">
<?php if ($page == 0): ?>
<h2 class="title"> <!-- THIS IS WHAT YOU NEED TO CHANGE -->
<a href="<?php print $node_url; ?>"><?php print $title; ?></a>
</h2>
<?php endif; ?>
<?php if ($unpublished) : ?>
<div class="unpublished"><?php print t('Unpublished'); ?></div>
<?php endif; ?>
<?php if ($picture) print $picture; ?>
<?php if ($submitted): ?>
<div class="submitted">
<?php print $submitted; ?>
</div>
<?php endif; ?>
<?php if (count($taxonomy)): ?>
<div class="taxonomy"><?php print t(' in ') . $terms; ?></div>
<?php endif; ?>
<div class="content">
<?php print $content; ?>
</div>
<?php if ($links): ?>
<div class="links">
<?php print $links; ?>
</div>
<?php endif; ?>
</div></div>
You will then probably need to disable the theme and switch to another theme. Then re-enable the theme so that Drupal detects the new functions.
I hope this helps.
Steve
#4
That works fine
#5
Following up on the IE6 issue, the problem is that IE6 does not understand CSS "child" notation (I think you'd already spotted this), eg
div.box_shadow > div.b0{background-image: .....
You could get this to work after a fashion by removing all the > symbols from flexible2_box.css. This will have undesirable side-effects as there are many nested boxes so the background images would be applied to these as well.
To get round this, each box will need a new style, called box_none, which specifically turns off the background image where it is not wanted. So I'll see if I can work something out.
Steve
#6
Hi, me again.
Just a quick question on changing the navigation link.
I can see what you've done in the block.tpl...
<?php// navigation link on block user-1
if ($block->module == 'user' && $block->delta == '1'):
?>
<?phpprint ('Skip to top of page');
?>
<?phpendif;
?>
I'm trying to change the link to a different menu, namely the primary menu that reads 'menu-primary-links'.
PHP isn't my forte, but playing with this little snippet of code isn't producing any results because of the lack of number $block->delta == '?' for 'menu-primary-links'
#7
The module is "menu" and the delta is "primary-links".
Does this help?
Steve
#8
Backing to the IE6 issue,
I didn't get how the none_box style may work.
Maybe a other way, very ugly, is to give a id name for each div. the problem of making this is that the configuration menu of the theme can stop working.
sorry about the rusty English..
Vitor
#9
Hi xitus,
I will work on a fix for the IE6 issue when time permits (rather busy at the moment). I think I can fix it by making changes to the stylesheet - unfortunately there are rather a lot of changes.
#10
Right, got the website up and running:
http://www.hidden-histories.org.uk/
If you have a website Steve I'll put a link to it on the site with an acknowledgment of the work you have put into the accessibility features.
As for IE7 and IE6...
When I put the traditional coniditional comments in the style sheet into the head :
<!--[if IE 7]><link rel="stylesheet" type="text/css"
href="/....styleie7.css"
/>
<![endif]-->
Like as above, the accessibility features in IE7 and IE6 wouldn't work. I guess there must be a CSS clash.
I placed them into the main style sheet. I'll write up how I did as I'm aware others who use this template may read this thread.
For IE6 there is quite a well known hack: * html.
So if you wouldn't to make a command specifically for IE6 then you would write something as below:
* html #accessibility .modes .mode {
background : none;
padding : 0 .5em 0 0.5em;
}
For IE7 there is a less well known hack: *:first-child+html
So to add a specific rule for IE7 the code would look something like this:
*:first-child+html #left .comment_add {
margin-right : 0.5em;
}
Both methods validate as correct CSS.
I managed to get it looking okay in IE6, but I simply couldn't get the three column lay to work as fluid. So, unfortunately, for the time being the layout breaks in IE6 if the user has a 800x600 resolution.
One thing that isn't working at the moment is the 404... it just goes to a nothing page.
I have configured this correctly as I've tried it on other templates.
There's still a couple of unwanted H2 tags appearing - on search and comment form - but this is coming from the core and has nothing to do with the template...
#11
Thanks divisive - sorry for taking so long to respond. I will take a look at the "hack" when time permits.
I'd appreciate a link to my home page http://stevelockwood.net, if you don't mind.
Steve
#12
We've been discussing this here http://groups.drupal.org/accessibility and the headings don't need to be linear. There should only be one H1, but that's the only element that seems to make any difference for accessibility.
H2 tags should be included for lists according to WCAG 2.0. Having more headers in content helps screen readers navigate the site.
I'm not really an expert though, so please feel free to contribute your thoughts in the group.