Header widget moves in IE 6 & 7

  • I am using the thematic framework and a custom child theme. I have added a widget to my header using the following code:

    // This will create your widget area
function my_widgets_init() {
    register_sidebar(array(
       	'name' => 'Header Aside',
       	'id' => 'header-aside',
       	'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
       	'after_widget' => "",
		'before_title' => "<h3 class=\"widgettitle\">",
		'after_title' => "</h3>\n",
    ));

}
add_action( 'init', 'my_widgets_init' );

// adding the widget area to your child theme
function my_header_widgets() {
if ( function_exists('dynamic_sidebar') && is_sidebar_active('header-aside') ) {
    echo '<div id="header-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
    dynamic_sidebar('header-aside');
    echo '' . "\n" . '</div><!-- #header-aside .aside -->'. "\n";
}
}
add_action('thematic_header', 'my_header_widgets', 2);

?>

    I am just using it to put a link to a shopping cart via a simple text widget (for now)

    I am using the following style:

    #header-aside {
float: right;
padding-top: 26px;
padding-right: 3px;
font-weight: bold;
}

    This all works fine in IE 8 or above and most any other browser… but when tested on IE 6 or 7 the “my cart” link moves up above the header.

    Link to the site: https://kcastudio.com/about/

    Thanks in advance for any help or suggestions.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter theperimeterweb

    (@theperimeterweb)

    I know there are various display bugs in IE, but I have not been able to isolate it. Any ideas?

    Thank You.

    Thread Starter theperimeterweb

    (@theperimeterweb)

    OK.. thought I had it fixed but not quite.

    I used the following code to create a condition style sheet for IE 7 and below (found here: https://themeshaper.com/functions-php-wordpress-child-themes/)

    function childtheme_iefix() { ?>
<!–-[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_directory') ?>/ie.css" />
<![endif]–->
<?php }
add_action('wp_head', 'childtheme_iefix');

    Then created a special ie.css file with the following:

    #header-aside {
float: right;
font-weight: bold;
position: relative;
top: 65px;
right: 3px;
}

    Which works great when tested in IE 6-7… but for some reason Firefox, Chrome and the browsers that were working fine before are loading the ie.css file also, and throwing the alignment off on those now.

    I’ve tried everything I could think of… any advice would be greatly appreciated.

    Check your Thematic framework theme is up to date (updated to 0.9.7.7 on 2010-10-12) – there are some ie6 and ie7 specific hacks in the CSS within the framework and/or the child themes or try at the themeshaper.com forums

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header widget moves in IE 6 & 7’ is closed to new replies.