Absolute position of image differs on ie and firefox

HTML & CSS
1

Hi,

I am working on wordpress for the first time (twentytwelve theme). I am trying to place a facebook icon in my header using absolute positioning. It looks great in Firefox, but in ie and the other browsers, the image drops down into the navigation bar. Any suggestions as to what I am doing wrong?

website is: http://sitesbysarah.com/wp

css code:



/* social media icons - placement at top of page Image & Link placed on header.php page*/
#social_media_icons {
	position: absolute;
	top: 261px;
	right: 740px;
}

The code in my header.php where the icon is placed is below:



<?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">


    <header id="masthead" class="site-header" role="banner">
	

        <hgroup>


			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>


        	<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>

              <div id="social_media_icons">
<a title="Facebook Page" href="https://www.facebook.com/pages/Texas-Garden-Clubs-Inc/180671001983675" target="_blank"><img class="alignnone size-full wp-image-710" alt="Facebook Page" src="http://localhost/wordpress/wp-content/uploads/2014/02/1394061266_social_facebook_box_white.png" width="32" height="32" /></a>
</div>

           <div class="alignright">
	<?php get_search_form(); ?>
</div><!-- .alignright -->


		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

	
	</header><!-- #masthead -->

	<div id="main" class="wrapper">

Your help is very much appreciated…

Sarb

2

Have you tried narrowing your browser window? {position:absolute} depends on a context. You can try giving the header (the parent container) {position:relative} and reposition the media icon. PS: I’m using Firefox and the text for the image is in the navbar. Where is it supposed to appear?

3

sorry, was gone for spring break and just got back.

The facebook icon is suppose to appear above the navigation bar in the space between the header and the navigation bar. There is a search box there and I wanted it to appear right before the Search box.

4

Hi, sarb.

Try the following and see if it puts the social media icons in the ballpark. You will probably have to make some adjustments.

Make the following changes on a copy of your HTML page and a copy of your styles.css file… or at least make a backup before making these changes.

First, <hgroup> is an obsolete tag. You can change them to <div> tags without causing any problems.

Second, rearrage the HTML as show here:


<div class="alignright">
    <div id="social_media_icons">
        <a title="Facebook Page" href="https://www.facebook.com/pages/Texas-Garden-Clubs-Inc/180671001983675" target="_blank"><img class="alignnone size-full wp-image-710" alt="Facebook Page" src="http://localhost/wordpress/wp-content/uploads/2014/02/1394061266_social_facebook_box_white.png" width="32" height="32"></a>
        <a title="Facebook Page" href="https://www.facebook.com/pages/Texas-Garden-Clubs-Inc/180671001983675" target="_blank"><img class="alignnone size-full wp-image-710" alt="Facebook Page" src="http://localhost/wordpress/wp-content/uploads/2014/02/1394061266_social_facebook_box_white.png" width="32" height="32"></a>
        <a title="Facebook Page" href="https://www.facebook.com/pages/Texas-Garden-Clubs-Inc/180671001983675" target="_blank"><img class="alignnone size-full wp-image-710" alt="Facebook Page" src="http://localhost/wordpress/wp-content/uploads/2014/02/1394061266_social_facebook_box_white.png" width="32" height="32"></a>
    </div>
    <form id="searchform" class="searchform" role="search" method="get" action="http://sitesbysarah.com/wp/">
        <div>
            <label class="screen-reader-text" for="s">Search for:</label>
            <input type="text" value="" name="s" id="s">
            <input type="submit" id="searchsubmit" value="Search">
        </div>
    </form>
</div> <!-- .alignright -->

Notice that I moved #social_media_icons inside .alignright.

Add the following styles to the end of your local stylesheet, styles.css. They are written to override or negate previous styles. You can clean out the replaced code after testing.


.alignright {
    float:none;
    text-align:right;
}

img.alignright,
.wp-caption.alignright {
    margin: 0.857143rem 0;
}

#social_media_icons {
    display:inline-block;
    vertical-align:middle;
    position:static;   /* to negate theme's {position:absolute} */
}
#social_media_icons a {
    display:inline-block;
    vertical-align:middle;
    margin-right:.5rem;
}

.header-image {
    margin-top:0;
}

#searchform,
#masthead a {
    display:inline-block;
    vertical-align:middle;
}

.main-navigation {
    margin-top:1px;
}

Hopefully, this will put the social media buttons where you want them without using absolute positioning.

Hope you enjoyed Spring Break.

5

HI Ronpat,

Thank you for the code. It is working like a dream now. I really have to immerse myself in css. Your help is soooooo appreciated.

Sarb