SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu sits correctly in Firefox but not IE v 9 :-(

    Buongiorno from 3 degrres C wetherby UK :-)

    On this page http://tutorial.davidclick.com/2menu.html & illustrated here http://i216.photobucket.com/albums/c...ps184ac1ea.jpg ive positioned a horizontal nav dead in the centre exactly how i wanted it in Firefox but in IE 9 the menu is aligned left & the underscore on hover effect has been striiped out :-(

    I know ive been struggling with positioning a nav in the middle & Ive poured over previous posts. I was quite elated when i did it without having to post a question but in IE all the work gets undone :-(

    Please could some one give me an insight into whats causing th balls up.

    Grazie tnato,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 Post(s)
    Tagged
    0 Thread(s)
    Make sure IE 9 is not in quirks mode. Press F12 to open the console, then make sure the browser mode is IE9 Compat View and the Document mode is "Standards"

    EDIT: In IE 10 I had to coerce it back to IE 7 standards mode to get the error you're observing. So I'm guessing you have broken pages mode turned on.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    I see the menu centered in IE8 and IE9. No problem.

    FYI: In your code, the <link> tag belongs between the <head> tags, not above them.
    Code:
    <html>
    <link rel="stylesheet" type="text/css" href="/2menu.css">
    <head>
    </head>
    <body>
     
    should be
    
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/2menu.css">
    </head>
    <body>
    Also, the "comment" lines are not properly formed. The open-comment mark is broken.
    Code:
    <! -- header div ends -->
    
    should be
    
    <!-- header div ends -->
    Cheers.

  4. #4
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Zygoma,

    In your CSS file I see this code for your menu.

    Code:
    #centre
    {
    text-align:center;
    margin:20px;
    }
    Remember that when you create a div, you must tell the browser how wide it is, how tall it is, and any other attribute that you want it to have. In your code you have told the browser to align the text within the div in the center. Your margin property is not written correctly. If you are only going to have one value (the 20px) you must specify which margin (i.e. top, right, left, bottom).

    You could right it like this
    Code:
    #centre
    {
    margin-top: 20px;
    }
    Or
    Code:
    #centre
    {
    margin: 20px 0 0 0;
    }
    Try this code to center that div that contains the menu
    Code:
    #centre
    {
    Width: 800px;
    Height: 50px;
    margin: 0 auto 0 auto;
    text-align:center
    }
    Hope that helps,

    Shawn

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by smanaher View Post
    Remember that when you create a div, you must tell the browser how wide it is, how tall it is, and any other attribute that you want it to have. In your code you have told the browser to align the text within the div in the center. Your margin property is not written correctly. If you are only going to have one value (the 20px) you must specify which margin (i.e. top, right, left, bottom).
    Shawn
    smanaher,

    When only one margin value is specified, it applies to all 4 sides.

    It is generally not recommended to set a fixed height on an object unless such a fixed height is required by the design of the page, such as an image, otherwise the object will be unable to increase in height in response to the users browser settings.

    Zygoma's code assigns margins correctly.

  6. #6
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey guys thanks for feedback, going to apply the fixes 2 moro :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  7. #7
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post

    When only one margin value is specified, it applies to all 4 sides.
    Are you sure about that? This has not been my experience. If you specify margin-top,left,right or bottom, that is where the margin is applied. If you specify values (even 0) after the broader margin (i.e. margin: 1px 2px 0 20px then top, right, bottom, left are applied accordingly.

    Edit: Just figured out why you said that. I think you misinterpreted what I wrote to the OP. Yes if you just write margin and then one value it will apply to all sides. Note that in my statement (If you are only going to have one value (the 20px) you must specify which margin (i.e. top, right, left, bottom) I mentioned that you must tell the browser which side you are talking about.


Bookmarks

Posting Permissions

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