6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Text positioning: IE vs Firefox...

by DavidO
5 replies
  • WEB DESIGN
    • |
I'm well aware of the conflicts between Internet Explorer and Firefox. But I've got a problem positioning some header text that is driving me nuts...

If you take a look at this page in both browsers you'll see that the h1 and related text changes position as well as line height:

BUSTUDEO - business, blog, portfolio site

Each browser positions my h1 tag (lower blood pressure) differently and the position/line height of the related text is also different.

(If you don't see any differences it means that my IE version is buggy. It's had display problems in the past but never of this type so I'm not really suspecting it.)

I've tried to get them identical using every possible combination of padding, margins and line height but nothing works.

The template uses a separate style sheet called reset.css to set default values but I can't find a solution to my problem in that file either.
#firefox #positioning #text
  • Profile picture of the author jimbob
    Which version of IE are you using? They look the same to me in IE8.

    Edit: Also, change the .logo style (line 42 in styleO.css) to width: 280px; That will show all the header image.
    Signature

    James Simpson

    {{ DiscussionBoard.errors[4054111].message }}
    • Profile picture of the author DavidO
      Thanks for the comment... my IE may be the problem after all. I'm going to reinstall it. It's IE8 but I've had lots of problems with it.

      But here's another thing... I've just tried changing the line height of the small text below the big h1. This part is set as h2. But Firefox isn't affected at all by changes in line height, for example:

      h2 {
      color: #727272;
      font-size: 23px;
      text-transform: uppercase;
      display: block;
      padding: 5px 0px 0px 30px;
      line-height: 40px;
      }

      Whatever figure I use for line-height, Firefox doesn't respond.

      If nothing else works could I get away with setting everything to 0px and using transparent spacers between the lines? That way I can get exactly what I want but it seems like a silly way to go about it.
      {{ DiscussionBoard.errors[4054131].message }}
  • Profile picture of the author jimbob
    The reason FF won't respond is because the text is converted using the Cufon font script. If you want to be able to adjust the text at that level you'll need to do away with that script.

    If you want to do that, commenting out this line:

    Code:
    Cufon.replace('h1, h2, h3, h4, h5, h6, .fu_readmore, .featured_text h1, #panes strong, #panes span, .more_slider, .menu');
    ...should do it. I don't know much at all about this script, so apologies if it makes no difference. On the flip side it might not suit the style you're after - give it a go and see.

    Inserting transparent spaces isn't usually a good idea with 'modern' web design. For me, it takes you further away from where your code should be and will make maintenance more difficult... as well as even more potential browser issues. But that's just my 2p.
    Signature

    James Simpson

    {{ DiscussionBoard.errors[4054172].message }}
    • Profile picture of the author DavidO
      Thanks for this, jimbob! I didn't think of the cufon font issue. Of course, that's what's causing the problem. I think I can adjust the formatting using the corresponding .js file.
      {{ DiscussionBoard.errors[4054277].message }}
  • Profile picture of the author xtrapunch
    Instead of Cufon, use Google Web Font for better compatibility.
    Signature
    >> Web Design, Wordpress & SEO - XtraPunch.com <<
    Web Design & SEO Agency | Serving World Wide from New Delhi, India

    {{ DiscussionBoard.errors[4054444].message }}

Trending Topics