8 replies
  • WEB DESIGN
  • |
I'm working on two parts of this site's overall template.
alternativeenergyinfo.net

Excuse the blah-ness of the site. Am just working on the template aspect. The banner is just filler I created, not the final product.

When I design websites, I just design. They happen to look just about the way I want them in IE, but look bad in FireFox. Not on purpose - just how it ends up.

But, now I'm wanting to ramp up my understanding on how to write CSS/HTML for multi-browsers and I am not finding a clear-to-understand tutorial on this.

Anywho ... *grins*

The menu is one where the background is a one-direction gradient, and when you hover, the background is the opposite-direction gradient, giving that "pressed-in-button" look to it.

The spacing and the effect is perfect in IE, but is absolutely dead in FireFox.

On the flipside, the footer looks great in FF but just a big too spaced out (padding if you will) in IE.

Can someone guide me on how to fix these two problems?

Even though, according to the stats on all the sites I have built and/or admin, roughly 70% of the visitors use IE compared to 8-20% using FF (rest using the other browsers) ... so I should be designing for IE, but want to learn how to do it for FF also - so the site looks relatively the same in both browsers.
#css #css help #css menus #footer #html help
  • Profile picture of the author Lloyd Buchinski
    I do see a difference in the footer and the navigation between
    ie and ff. One little source of the differences is that different
    browsers have different default padding and margins. One thing
    that really helped me with this problem is to start the css sheet
    with *{margin:0;padding:0;}

    The wild card erases all the padding and margins, and then you
    can specify individually for each item, and there is a better
    chance of them looking alike.

    An interesting site to check out a lot of browsers at is
    browsershots.org . You are limited to one set of about 30 browsers
    a day on the free plan, but one of the members who does a lot of
    site work said it was really worth it to make the donation for
    unlimited priority use. They had browsers that I had never heard of.

    The ie to ff stats are always interesting. On my simple sig site ff is
    4 times more common than ie, and Safari has 2 thirds as many
    visitors as ie. The main source of traffic for it though is social
    bookmarking, and that must have something to do with it.
    Signature

    Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

    The KimW WSO

    {{ DiscussionBoard.errors[356897].message }}
    • Profile picture of the author Barbara Eyre
      Lloyd,

      Your erase padding/margin hack did a great job. Thank you!

      I made necessary adjustments and the footer in both browsers look more alike.

      IE and FF render 12px Arial different though. In IE, the font looks 'faded', for a lack of better words. Could be my monitor though - LCD, not CRT. *shrugs* Hubby's computer is turned off, otherwise I would take a quick peek (CRT monitor).

      Now, to figure out why the menu in FF doesn't look like the menu in IE - looks and functions just right in IE.

      And thank you for the tip about the browsers ... I think I have that website (or one extremely similar) bookmarked due to another mention of such here at the WF the other day.
      {{ DiscussionBoard.errors[356957].message }}
  • Profile picture of the author Richard Whyte
    Barbara

    It can sometime be a real fight to get IE and FF to look the same....

    For many years I was a strong IE support but have changed that once Active X controls became so prevalent. They are the fastest way to get spyware / adware on your system...

    So now I use FF all the time unless I go to a site that MUST be accessed with IE.

    OK, now for some comments.

    I noticed in your code that you are linking to our CSS file with the full url "http://www.alternativeenergyinfo.net/sitestyle.css"
    You may find that people that have slower connection can have the file load faster if you drop that to just "sitestyle.css" if it is in the rrot of your site.

    Also, you page is not centered on the screen.

    I always design with multiple boxes (div's).

    First one for the page wrapper that sets position (center) and width of content.

    Next another content Box (doing this seems repetitive, but it seems to iron out a lot of problems with multi browser compatibility) that is slightly less wide (say 10 px) than the box above with the position set to relative and the left set to 5 PX. This give you a margin so that your content does not go right to the edge of the box.

    Then a box (div) for each element inside of the above.

    When you use multi boxes like this it allows you to do some very cool things with z-index and overlay things.

    Hope that helps you out.
    {{ DiscussionBoard.errors[366951].message }}
    • Profile picture of the author Darren Mothersele
      Originally Posted by Richard Whyte View Post

      For many years I was a strong IE support but have changed that once Active X controls became so prevalent. They are the fastest way to get spyware / adware on your system...

      So now I use FF all the time unless I go to a site that MUST be accessed with IE.
      You're not the only one! You might find these stats interesting. You can see how IE has lost market share over time:

      Browser Statistics
      {{ DiscussionBoard.errors[367225].message }}
  • Profile picture of the author rarebiz
    IE and Firefox treat padding/margin differently. This is the most frustrating problem for CSS developer.
    One of the trick is using !important
    Works for FF, while IE will ignore it.

    Example:
    padding-top: 10px !important;
    {{ DiscussionBoard.errors[367375].message }}
  • Profile picture of the author DIYDomain
    It can sometime be a real fight to get IE and FF to look the same....
    You're not kidding Richard!
    {{ DiscussionBoard.errors[376988].message }}

Trending Topics