H2 Alignment issues depending on browser

  • Hi all,
    I’m working on this blog: https://amadimag.com/blogosphere/?p=46, and the problem I am having is that the heading you see there (“Kenn Starr: Nobody’s going to work harder for you than you”) displays fine in Firefox and Safari, but apparently IE didn’t get the memo. In IE, It weirdly has a line break after the words “kenn starr”, and it is centered on the first line, when it should be aligned to the left. How do I fix this?

Viewing 15 replies - 1 through 15 (of 17 total)

  • at bottom of theme’s style.css add:
    div .post h2 { text-align: left; }

    Thread Starter jongraphs

    (@jongraphs)

    That didn’t work

    In your stylesheet you have the following:

    .widecolumn .smallattachment {
	FLOAT: left; MARGIN: 5px 5px 5px 0px; WIDTH: 128px; TEXT-ALIGN: center
}

    I notice that on the normal blog page with more than one entry it’s within a div “narrowcolumn”, however on a single entry page the div is “widecolumn”. Changing the text-align to left in the above entry of the stylesheet may help this.

    Thread Starter jongraphs

    (@jongraphs)

    That didn’t work. The problem is going to have a weird fix to it, because as I mentioned, it works perfectly in all other browsers but IE. I will have to include some weird code to suit IE’s weird needs.

    I’ve noticed something in your source code that really needs to be addressed. You have header information within your body (well, actually you have 2 headers and 2 bodies:

    </head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (amadiwebpages.psd) -->
<table id="Table_01" width="962" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
		<td colspan="5"><img src="images/index_01.jpg" alt="" width="962" height="159" border="0" usemap="#Map"></td>
  </tr>

	<tr>
		<td>
			<img src="images/index_06.jpg" width="6" height="214" alt=""></td>
		<td width="950" height="100%" colspan="3" valign="top" bgcolor="#FFFFFF"><table width="100%" height="100%" border="0">
          <tr>
            <td width="79%" height="100%" valign="top"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="https://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>  &raquo; Blog Archive   &raquo; Kenn Starr: Nobody’s going to work harder for you than you</title>

<link rel="stylesheet" href="https://amadimag.com/blogosphere/wp-content/themes/default/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title=" RSS Feed" href="https://amadimag.com/blogosphere/?feed=rss2" />
<link rel="pingback" href="https://amadimag.com/blogosphere/xmlrpc.php" />

<style type="text/css" media="screen">

	#page { background: url("https://amadimag.com/blogosphere/wp-content/themes/default/images/kubrickbgwide.jpg") repeat-n top; border: none; }

</style>

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://amadimag.com/blogosphere/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://amadimag.com/blogosphere/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 2.6" />

</head>
<body>
<div id="page">

    You should correct your code first, and then come back to this issue.

    good catch mojorob!

    Thread Starter jongraphs

    (@jongraphs)

    The first head and body are created by me, the second one that you see is wordpress generated.

    Mines serves the purpose of displaying a favicon and having a fixed bg.

    If I knew how to edit the wordpress generated header and body (for the purpose of having a favicon and fixed background for the entire page, not the wordpress), then I would glady remove my header and body. As it stands, the only way I know how to do this is within my php/html framework.

    Thread Starter jongraphs

    (@jongraphs)

    welp I hope people look at the site in Firefox

    Fix major code errors (two heads and bodies) before working on minor alignment issues. You edit the header by editing your theme’s header.php and the body by editing your theme files like index.php, page.php, single.php.

    Thread Starter jongraphs

    (@jongraphs)

    What’s more important: a problem that has a visible effect or one that does not?

    2 headers & 2 bodies is an important problem to resolve. As said, you can edit the header using header.php in the theme.

    Thread Starter jongraphs

    (@jongraphs)

    Can anyone help me with the H2 thing? It appears that the H2’s appearance is relative to the links that are above it (well, only in IE of course. It’s fine in Firefox)

    I have noted the same problem on my own and other blogs. I think you are right about the nav links and H2. I did find from playing around that if the class=”alignleft” and class=”alignright” is eliminated the post stays underneath on the left.

    <div class="navigation">
     <div><?php previous_post_link('&laquo; %link') ?></div>
     <div><?php next_post_link('%link &raquo;') ?></div>
</div>

    But now all the nav info is placed on two lines as shown below:

    ? Hello world!
    Test Post with extra extra long name that ?

    Post 2

    Anyone have any other thoughts on this?

    I’ve got it! In the single.php add: clear=”class”

    <div class="clear" class="post" id="post-<?php the_ID(); ?>">

Add this to your style sheet:

.clear
{
  clear: both;
}
    Thread Starter jongraphs

    (@jongraphs)

    Thank you so much!!!!!!!! It worked PERFECTLY! Thank you for your random helpfulness, mssbee! Let me know if I can possibly help you figuring out any codes, I’ve had to tweak a lot on mines.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘H2 Alignment issues depending on browser’ is closed to new replies.