9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Why won't my landing page work in browsers that are not chrome!?

by insideac
8 replies
  • WEB DESIGN
    • |
Argh, this is beyond annoying. I've tried for a week to see what's wrong and my efforts have proved fruitless. This is why I need to turn to you, Warrior Forum, as I desperately need your help before I go bald from pulling my hair out

I created a landing page for a client, and unlike any of the others that I've made, this one is only compatible in chrome. When viewed in firefox and IE, the header overlaps the text and the image has some clipping. It might be because I test my sites in chrome now, and I regret that, but its far too late to start over and redo everything in IE or FF.

The page looks like this:

I would greatly appreciate any info,

Thanks so much in advance!
#browsers #chrome #landing #page #work
  • Profile picture of the author Brandon Tanner
    No way to know without seeing the source code. What's the URL?
    Signature

    {{ DiscussionBoard.errors[7015961].message }}
  • Profile picture of the author insideac
    I cant post it due to low count.. can you PM me?
    {{ DiscussionBoard.errors[7016011].message }}
    • Profile picture of the author dwoods
      insideac, you can post it by replacing the .com with [dot]com ... be creative we'll figure it out.

      If you want hit me up on skype: darrenwoods80 -- l'd be happy to take a look.

      Regards,
      {{ DiscussionBoard.errors[7016052].message }}
  • Profile picture of the author insideac
    Thanks for the tip!
    http:/[forwardslash]hypnobirthing[dot]com.au/natural-child-birth/index.htm
    {{ DiscussionBoard.errors[7016066].message }}
  • Profile picture of the author dwoods
    To fix:

    open up this file in your favorite text editor: http://hypnobirthing.com.au/natural-...s/style001.css

    Go to line 182 and replace the class for '.yellow-bg' with this:

    Code:
    .yellow-bg {
    display: block;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 34px;
    padding: 0 5px;
    text-align: center;
}
    (I all l did was remove the background style, and changed it form display: inline to display: block.)
    {{ DiscussionBoard.errors[7016111].message }}
    • Profile picture of the author Brandon Tanner
      dwoods beat me to it!

      In addition to the solution above, I would only add that you'll probably also want to change the padding value to push the headline text down.

      In the .yellow-bg class, change...

      padding: 0 5px;

      to something like...

      padding-top: 30px;
      Signature

      {{ DiscussionBoard.errors[7016190].message }}
      • Profile picture of the author dwoods
        I agree with Brandon's suggestion as well.
        {{ DiscussionBoard.errors[7016197].message }}
  • Profile picture of the author insideac
    Wow, thats amazing! It worked, thank you so very much! Any of you guys need some free or steeply discounted content writing? haha thanks again
    {{ DiscussionBoard.errors[7016467].message }}

Trending Topics