WordPress › Support » Problem with title and H2 in IE but not Firefox

eagerwatcher
Member
Posted 2 years ago #

Problem with title and H2 in IE but not Firefox

Please take a look at ...

http://www.ourchangingglobe.com/this-is-just-a-test-to-show-what-is-happening-the-title/

It's just a test page to show the problem.

In Firfox it's fine, but in IE - well you'll see.

If I start the page with an image then there is no problem.

This is what has been added to the original style sheet.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

.entry h1 { font-size:25px;line-height:28px;text-align:center }
.post h2 {float:left;}
.entry {clear:left;}

thanks,

Jane
esmi
Theme Diva & Forum Moderator
Posted 2 years ago #
Best tackled using conditional style. Edit header.php and add:
```

```
just after you link to style.css

Then create a new file called ie7.css within the theme folder and try adding:

.post h2 {margin-bottom:20px;}

Even if that doesn't work initially, you can now play around with remedial CSS for IE7 or below without impacting any of the other browsers.
eagerwatcher
Member
Posted 2 years ago #

I did it but I wasn't sure where to add the code in the header.php

I added it at the end.

Be back soon, just going to take a short break as I've been sitting here almost none stop for about 13 hours.

thanks,

Jane
eagerwatcher
Member
Posted 2 years ago #

What you suggested separated the two lines.

I must have need the walk, I'd put the ie7.css in the wrong them folder.

I just added ..

.post h1 {margin-bottom:20px;}
.post h2 {margin-bottom:20px;}

to see if it would help the "last ten posts by" but it didn't.

I knew there were compatibility problems between browsers but I didn't know they were this bad. I check with IE7 (I gave up on IE) but I believe the problem is even worse in IE6.

Mike
esmi
Theme Diva & Forum Moderator
Posted 2 years ago #

I've given up supporting IE6 for the most part but, if you felt inclined, you could add another sheet & comment for IE6.
doc4
Member
Posted 2 years ago #
eagerwatcher,

You might instead just add styles within a single stylesheet to affect various browsers. But the question is why is <h2> floating left? I'm not seeing any reason for this. You might just try removing float:left from the h2 tag and instead inserting your margins:

.post h2 { margin: 20px 0; }

Remember IE hates floats and it's best to include a real clearfix if you're going to use them. Something such as:
```
.clearfix {
   content: "";
   display: block;
   clear: both;
   }

.clearfix {
   display: block;
   }

.clearfix:after {
   height: 0;
   content: "";
   display: block;
   clear: both;
   visibility: hidden;
   }

* html>body .clearfix {
   width: 100%;
   display: inline-block;
   }

* html .clearfix {
   /* Hides from IE-mac \*/
   height: 1%;
   /* End hide from IE-mac */
   }
```
Then follow this by including <div class="clearfix"></div> just after the h2 tag. I believe the issue is IE is not reading the true filled height of the h2 tag which is why you're using the clear:left on the next div, but try clearing the float prior to the next div, just above it with the clearfix class above.

Unfortunately we still have clients using IE6 so we're still in the game.

http://www.doc4design.com
eagerwatcher
Member
Posted 2 years ago #

Thanks Doc 4,

I'll try your fixes in the morning; my eyes are closing now.

Where do I put the clearfixes; in the original template CSS or on my new IE7.css ?

Jane
eagerwatcher
Member
Posted 2 years ago #

Thanks Esmi - I'm not going to worry about IE6 ..

Which of these did we add just for IE6?

.entry h1 { font-size:25px;line-height:28px;text-align:center }
.post h2 {float:left;}
.entry {clear:left;}

because I could move them onto the new style sheet.

night night )))
doc4
Member
Posted 2 years ago #

eagerwatcher,

Add the clearfix styles to your original stylesheet and remove the IE7.css completely as it may not be needed. I really wouldn't worry about IE6 unless your analytics are showing a large group using that particular browser. We will be rid of it one day.

http://www.doc4design.com
eagerwatcher
Member
Posted 2 years ago #

Just finished my emails ...

thanks )))
eagerwatcher
Member
Posted 2 years ago #

I just added the clearfixes and it didn't help, and then I removed

.entry h1 { font-size:25px;line-height:28px;text-align:center }
.post h2 {float:left;}
.entry {clear:left;}

And now it's working!

http://www.ourchangingglobe.com/this-is-just-a-test-to-show-what-is-happening-the-title/

I don't know which of the above three were for IE and which for FF?

Thanks very much!
doc4
Member
Posted 2 years ago #

eagerwatcher,

Great, glad we could help.

http://www.doc4design.com
eagerwatcher
Member
Posted 2 years ago #

Wow, I don't know what the clearfixes and additional code do in detail although I do in general, but the site even looks good in IE6, Opera and some others too.

http://www.ourchangingglobe.com/

I didn't check every version of every browser at http://browsershots.org/
but I'm very happy with the result.

thanks to all of you that help me,

Jane
eagerwatcher
Member
Posted 2 years ago #

http://www.ourchangingglobe.com/natanyahus-june-14-2009-speech/

Would you please look at the above in FF and IE - I'm using 7

thanks,

Jane
doc4
Member
Posted 2 years ago #
It appears your headlines are too long in the next/previous page links. Try using a little php to control their length by truncating them with "..." after like so:
```
<?php if (strlen(the_title('','',FALSE)) > 40) {
           $title_short = substr(the_title('','',FALSE), 0, 40);
           preg_match('/^(.*)\s/s', $title_short, $matches);
       if ($matches[1]) $title_short = $matches[1];
           $title_short = $title_short.' ...';
       } else {
           $title_short = the_title('','',FALSE); } ?>

<h2><a href="<?php the_permalink() ?>"><?php echo $title_short ?></a></h2>
```
Notice the number 40, this is where you will indicate how many characters in length any given next/previous post title should be.

For a quick, online example take a look at the Plugins page on Doc4, in the sidebar the Article titles have been truncated.

http://www.doc4design.com
eagerwatcher
Member
Posted 2 years ago #

Thanks Doc

Nice looking page!

I wasn't sure which page to add your code to; I tried a couple of different ones but removed it when it didn't work.

Please let me know which one.

In future it seems like I should just limit the lengths of my titles.

I limit my page descriptions to 66 chars and they always display in full on the search engines.

Jane
eagerwatcher
Member
Posted 2 years ago #

I tried it in the theme's functions.php but the site wouldn't load, so I figured that that wasn't the right place for it :-)

Jane
doc4
Member
Posted 2 years ago #
eagerwatcher,

You are looking for the title code <?php the_title(); ?>. It appears that what is happening is the site is using the previous next link:

<?php previous_post_link(''); ?>

you may want this next bit of code instead to display "<< Previous Next >>" instead of the actual post title.
```
<?php previous_post_link('%link', '<< Previous', TRUE); ?>
<?php next_previous_post_link('%link', 'Next >>', TRUE); ?>
```
TRUE denotes that the previous/next link is within the same category. Take a look at this WordPress codex page for even more help. http://codex.wordpress.org/Template_Tags/previous_post_link

http://www.doc4design.com
eagerwatcher
Member
Posted 2 years ago #

Sorry, I'm in deep water now ..

Is what I need to do ..

a) change <?php previous_post_link(''); ?> to

<?php previous_post_link('%link', '<< Previous', TRUE); ?>
<?php next_previous_post_link('%link', 'Next >>', TRUE); ?>

and if so, which page will I find the above code on?

b) after I've done that ..

add,

<?php if (strlen(the_title('','',FALSE)) > 40) {
$title_short = substr(the_title('','',FALSE), 0, 40);
preg_match('/^(.*)\s/s', $title_short, $matches);
if ($matches[1]) $title_short = $matches[1];
$title_short = $title_short.' ...';
} else {
$title_short = the_title('','',FALSE); } ?>

<h2>"><?php echo $title_short ?></h2>

to my template's format.php

Thanks for hanging in there with this,

Jane
eagerwatcher
Member
Posted 2 years ago #

The problem was solved by adding just the last line of the following.

<div class="navigation">
<div class="alignleft"><?php previous_post_link('« %link') ?></div>
<div class="alignright"><?php next_post_link('%link »') ?></div>
<div style="clear:both; height:1px; font-size:1px; line-height:1px;"></div>
</div>

to the single.php in the template folder.

Thanks to Piotr!

Jane

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] Problem with title and H2 in IE but not Firefox (20 posts)

Topic Closed

About this Topic

Tags

Code is Poetry