Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    11
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Question Problem Making Horizontal menu congruent on firefox and internet explorer

    This is how my horizontal top menu displays in firefox

    This is how my horizontal menu display in internet explorer


    this is my site

    www.perkinscomputerrepair.com

    I'm using the spry menu from dreamweaver cs5

    I just want to know how to make them look the same, the firefox look is correct the internet explorer is wrong.

    any help appreciated thanks

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    you have a few errors when validating. You should clean that up as a precautionary. also try adding this:

    Code:
    * {
    padding:0px;
    margin:0px;
    }
    Couldn't find it in your code. All browsers have their own default padding and margin.

  • Users who have thanked jcdevelopment for this post:

    eperkins153 (04-20-2011)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have added a bit of CSS to it here.
    {CODE]*{padding:0;
    margin:0;}

    Resets the browsers to zero before the other css goes in.
    }/CODE]

    See if it is any better.

    Frank
    Last edited by effpeetee; 04-20-2011 at 09:33 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    eperkins153 (04-20-2011)

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    11
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    I have added a bit of CSS to it here.
    {CODE]*{padding:0;
    margin:0;

    Resets the browsers to zero before the other css goes in.
    }/CODE]

    See if it is any better.

    Frank
    Quote Originally Posted by jcdevelopment View Post
    you have a few errors when validating. You should clean that up as a precautionary. also try adding this:

    Code:
    * {
    padding:0px;
    margin:0px;
    }
    Couldn't find it in your code. All browsers have their own default padding and margin.
    That didn't fix it, it still displays incorrectly on internet explorer.

    any other suggestions ?

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It seems OK with my IE9. What exactly is wrong with it.
    What screen resolution?

    Frank

    The extra code is here.
    Code:
    <link href="_Assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    [B<style type="text/css">
    *{padding:0;
    margin:0;
    }
    </style>
    <link href="_Assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="_Assets/_css/main.css" rel="stylesheet" type="text/css" />
    Last edited by effpeetee; 04-20-2011 at 10:05 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    eperkins153 (04-20-2011)

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    The menu looks the same for me viewing in FF 3.6.14 and IE8.

    Refresh your browser maybe?
    Teed

  • Users who have thanked teedoff for this post:

    eperkins153 (04-20-2011)

  • #7
    New Coder
    Join Date
    Mar 2011
    Posts
    11
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    It seems OK with my IE9. What exactly is wrong with it.
    What screen resolution?

    Frank

    The extra code is here.
    Code:
    <link href="_Assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    *{padding:0;
    margin:0;
    }
    </style>
    <link href="_Assets/_css/main.css" rel="stylesheet" type="text/css" />
    Ok It seems to be fixed thank you all

    Can someone explain, why these changes fixed the issue so I know in the future, and why is there an * used as the selector ?

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Not all browsers start off zeroed. This simple pair are used at the start of your CSS to reset the browsers to zero and a level playing field.

    * is the universal selector. Click here.
    Frank
    Last edited by effpeetee; 04-20-2011 at 10:13 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    eperkins153 (04-20-2011)

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Different browser "apply" default margins to elements. The * is a global value that you can apply style rules to and will affect every element in a document. So:

    * {margin: 0; padding:0;}

    is in effect, zeroing out every elements margin and padding so you're starting with a clean slate. Then you apply them to each element to get your desired effects.
    Teed

  • Users who have thanked teedoff for this post:

    eperkins153 (04-20-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •