Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    May 2009
    Posts
    5
    Member #
    18900
    Hi,

    I'm very new to web design and I've created a drop down menu using a tutorial...if someone could explain to me the difference in the menus between IE and firefox it would be greatly appreciated!

    http://img.photobucket.com/albums/v5...Difference.jpg

    Thanks,
    Marc


  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    IE looks double-spaced?



    (I know, it was a bad answer).

    This would be best answered if you had an actual URL we could view,
    so we can see it using all browsers. You have to realize that there
    is IE5, IE6, IE7 and IE8 ... it could be different between those too.


  4. #3
    Junior Member
    Join Date
    May 2009
    Posts
    5
    Member #
    18900
    I have Attached the actual html file so you can view it...as it is not hosted yet.

    I really don;t know anything about coding I just took what I found in the tutorial and replaced the information with what I needed. Other then that it's pretty much luck in getting it to look the way I want

    also when I change it to a template I get this error...I have an idea what it means but no clue how to fix it....

    http://img.photobucket.com/albums/v5...85/headtag.jpg

    Thanks!

  5. #4
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    hey. heres your answer.

    The Box model is models browsers use to render.
    Box model means theres a border (surrounding the box), then theres a content box, and between the border and content theres a padding area.

    IE and Firefox handle these differently.
    Add this to your css
    *{margin: 0; padding: 0;}

    This means reset the margin and padding on all elements.

    Also, sometimes because of the box model you need to make a CSS file for firefox, then make a css for ie.

    Your file then looks like this:

    <head>
    <link href="styles/style.css" type="text/stylesheet"/>
    <!--[if ie]>
    <link href="styles/ie.css" type="text/stylesheet"/>
    <![endif]-->
    </head>

    the if ie is a comment and will be ignored by all browsers.
    However Internet Explorer 5+ will notice this and parse it, in IE the new style sheet will be linked to. Any styles in ie.css will cascade/overwrite the styles in style.css if they have the same name.

    Here is a bit of code im working on for a client

    style.css
    ul.MenuBarHorizontal
    {
    margin: 20px 0px 0px 58px;
    padding: 0;
    list-style-type: none;
    font-size: 9px;
    cursor: default;
    height: 35px;
    background-image: url(../images/wrapper/nav-bg.gif);
    background-repeat: repeat-x;
    background-position: center left;
    position: absolute;
    width: auto;
    }
    ul.MenuBarHorizontal li
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    width: 85px;
    display: list-item;
    line-height: 10px;
    }

    ie.css (Only adjustment overrides to certain items)
    /*Header Menu Fixes*/
    ul.MenuBarHorizontal{margin-top: 35px; margin-left: -65px;} //shifts the menu bar an extra 15px up. the style.css has margin-top: 20px (they dont get added together, this stylesheet overrides the other one when its an IE browser 35-20 = 15pixel shift up)
    ul.MenuBarHorizontal li{line-height: 12px;}

    GET IT!??!

    Hopefully that answered your question.
    Its a good idea to include *{margin: 0; padding: 0;} to your stylesheets, first step in cross browser compatibility.<< "Cross browser CSS" look this up, you'll find a TON on the topic. In fact, the reason im on the forum now is to ask about ie6 and ff difference in rendering a certain object haha. gluck!

  6. #5
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    unbalanced head tag means:

    all documents have a head section

    One open, One close.
    <head>

    </head>

    unbalanced means, you dont close it or you have more than 1 head opening tag, or you have 2 closing head tags, something of the sort.

  7. #6
    Junior Member
    Join Date
    May 2009
    Posts
    5
    Member #
    18900
    thanks very much for your reply!!!....i figured out the head tag right after i posted...saw I didn't close one...

    def. helps me solve this annoying problem :-)

  8. #7
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Quote Originally Posted by mfourn20
    thanks very much for your reply!!!....i figured out the head tag right after i posted...saw I didn't close one...

    def. helps me solve this annoying problem :-)
    you'll never make a site look EXACTLY the same cross browsers. But, strive for extremely similar. Let me know if you get them looking the same.


  9. #8
    Junior Member
    Join Date
    May 2009
    Posts
    5
    Member #
    18900
    Hi, I tried putting the margin/padding in every place I could find...nothing seemed to get rid of the double spacing......where exactly would you put margin/padding?

    #navbar {
    margin: 0;
    padding: 0;
    height: 1em; }
    #navbar li {
    list-style: none;
    float: right; }
    #navbar li a {
    display: block;
    padding: 3px 8px;
    background-color: #0C1F35;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    }
    #navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
    background-color: #0C1F35;}
    #navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; }
    #navbar li:hover li, #navbar li.hover li {
    float: none; }
    #navbar li:hover li a, #navbar li.hover li a {
    background-color: #0C1F35;
    color: #eee; }
    #navbar li li a:hover {
    background-color: #0C1F35; }
    a {
    font-family: Verdana;
    font-size: 14px;
    color: #eee;
    font-weight: normal;
    }
    a:link {
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #0C1F35;
    }
    a:hover {
    text-decoration: none;
    color: #0C1F35;
    }
    a:active {
    text-decoration: none;
    color: #0C1F35;
    }
    .style2 {
    color: #FFFFFF;
    font-family: Verdana;
    font-weight: bold;
    font-size: 14px;
    }

  10. #9
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    when you post on forums, make sure ur css is neat..really hard to read man.

    Add this

    * {margin: 0; padding: 0;} you dont need to add it everywhere.

    If this doesnt help, read my post above on conditional comments, you may need to change the 1em height to something smaller for IE e.g 0.5em in ie.css


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com