Thursday, December 9, 2010

Drupal latest Zen theme css browser fixes for a sub theme

The latest Zen theme for Drupal 6 has been redone it seems, and I've had very little trouble with x-browser stuff this time, except for being due to trying to make a tricky liquid header with lots of floated blocks, causing the usual problems in IE7 and below with float bugs galore.

Not used nicemenus dropdowns this time, so thats probably saved some testing time.

Added into the zen themes 'html-reset.css' (v 1.6.2.2 2010/06/26) a few YUI2reset or Eric Meyer Reset styles, these were:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0; /*YUI2Reset*/
padding:0; /*YUI2Reset*/
}


table {
border-spacing:0;/*EMReset*/
}


td {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}


caption {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}

acronym {
border:0; /*YUI2Reset*/
}



fieldset {
border: 0;/*YUI2Reset*/
}


address, cite, code, dfn, var { /*YUI2Reset*/
font-style:normal;
font-weight:normal;
}

Then here are some other fixes I added to html-reset.css:

#content th, #content thead th, #content tbody th, #content thead{
word-wrap:normal;/*For benefit of Opera (10), not giving table headers proper width automatically, figure theres rarely going to be a long unbroken url or something that needs breaking in a table header...*/
}

/*Fixes for squashed body text tables in safari and opera when occur after floated image*/
#content .section #content-area .node .content table {
clear:both;
}

And some to ie.css

legend { 
color:#666666;/*IE makes it blue...*/
*margin-left:-9px; /*for IE7, Legend is indented otherwise, IE8 fine*/
}

And a zoom:1 to something containing floats

And for ie6.css
The usual double float margin bug fixes (display:inline) and transparency fixes, some zoom:1 for HasLayout, and this one I havn't come across before:

#block-menu-primary-links ul li a { 
display:inline-block; /*List white space bug [5]*/
}


#block-menu-primary-links ul li a { 
display:block; /*List white space bug [5]*/
}



And for print.css
In addition to zens pre setup print stylesheet I added these changes or additions


/* Un-float the content */
#content,
#content .section,
#content-area {
float: none;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}



/* Hide sidebars and nav elements */
#header,
#skip-link,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer,
.breadcrumb,
div.tabs,
.links,
.taxonomy,
.book-navigation,
.forum-topic-navigation,
.pager,
.feed-icons,
.warning,
.sticky-header {
  visibility: hidden;
  display: none;
}



/* Otherwise, Firefox clips the content after the first page. */
#page-wrapper, #page, #main-wrapper, #main, #content, #content .section, #content-area, .node, .node .content
{
overflow-y: visible;
display: inline; /*Important for Ffox content clipping after first page, and makes content full width of page*/
*display: inline-block;/*Fixes text clipping on right side in IE6, IE7*/
}


#page
{
font-size:12pt;
}

#content{
_textalign:left; /*Ie6 is centering text...*/
}