Website Menu Bar Problem With Internet Explore Help!!!!

Discussion in 'HTML & Website Design' started by Austin Tucker, Jan 29, 2013.

  1. #1
    I am having probelm when the menu bar, its coming up twice in internet explorer, but it looks fine, i have screenshots, showing how messed up it looks in ie, and then how it looks in chrome.

    Google Chrome: menuchrome.PNG

    Internet Explorer: menuie.PNG

    css: .menu {
    margin: 0 auto;
    background-image: url('images/footer.png');
    height: 40px;
    width: 900px;

    }

    .nav {
    height: 20px;
    margin: 0 auto;
    width: 900px;
    padding-top: 10px;

    }

    .nav a{
    text-decoration: none;
    color: black;
    height: 35px;
    margin: 10px;
    position: relative;
    font-weight: bold;
    }

    .nav a:hover{
    color: white;

    }



    html:

    <div class="menu"><div class="nav">
    <a href="index.php">Home</a>&middot;
    <a href="courses.php">Courses</a>&middot;
    <a href="fee.php">Fee Structure</a>&middot;
    <a href="download.php">Download</a>&middot;
    <a href="reviews.php">Testimonials</a>&middot;
    <a href="contact.php">Contact Us</a>

    </div></div>
     
    Austin Tucker, Jan 29, 2013 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #2
    What's the doctype and what version of IE are you seeing this in?
     
    Rukbat, Jan 29, 2013 IP
  3. sash_007

    sash_007 Well-Known Member

    Messages:
    174
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    125
    #3
    .menu {
    margin: 0 auto;
    background-image: url('images/footer.png');
    background-repeat:none;
    height: 40px;
    width: 900px;
    }
    HTML:
     
    sash_007, Jan 30, 2013 IP
  4. Austin Tucker

    Austin Tucker Greenhorn

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    sash, that didnt work, its still the same. and i dont have a doctype, its jsut <html> ??? and i think its ie 9, the latest one!
     
    Austin Tucker, Jan 30, 2013 IP
  5. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #5
    You're in quirks mode.
    And by the way, there's one pointless div as well as some unneeded css rules. Imagine the rest of the markup! :eek:
     
    wiicker95, Jan 30, 2013 IP
  6. sash_007

    sash_007 Well-Known Member

    Messages:
    174
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    125
    #6
    post your full code or show live link if possible
     
    sash_007, Jan 30, 2013 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Yeah, quirks mode... extra DIV for nothing, run-on with no block-level separators, Much less the non-semantic markup... since a menu is a LIST of choices, which is why the preferred code is a UL.

    Much less trying to fix the height of the container which is most always the road to failure... and fixing the width probably means there's something awry with the rest of the document and/or the parent container... and not declaring line-height which is inconsistent across browsers... or font-size for that matter... attempting to set padding the same time as height which is bad practice even when not in quirks (and PRECISELY what breaks in quirks)... and those middot are presentation, really don't belong in the markup either.

    First, get yourself out of quirks mode... then for code, try this on for size:

    Markup:
    
    <ul id="mainMenu">
    	<li><a href="index.php">Home</a></li>
    	<li><a href="courses.php">Courses</a></li>
    	<li><a href="fee.php">Fee Structure</a></li>
    	<li><a href="download.php">Download</a></li>
    	<li><a href="reviews.php">Testimonials</a></li>
    	<li><a href="contact.php">Contact Us</a></li>
    </ul>
    Code (markup):
    CSS:
    
    #mainMenu {
    	list-style:none;
    	text-align:center;
    	font:bold 14px/16px arial,helvetica,sans-serif;
    	background:#479;
    	box-shadow:inset 0 16px 16px #58B;
    	border-radius:6px;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu li:before{
    	content:'\B7\20';
    }
    
    #mainMenu li:first-child:before {
    	content:'';
    }
    
    #mainMenu a {
    	display:inline-block;
    	padding:8px 4px;
    	text-decoration:none;
    	color:#000;
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	color:#BFF;
    }
    
    Code (markup):
    this assumes a reset like this one:
    
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    
    @media (max-width:480px) {
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    
    Code (markup):
    Is in use... if not you'll need to say 'margin:0; padding:0;' on anything that isn't setting margins and paddings. I used generated content for the middots -- IE7/earlier won't see those, OH WELL.. likewise I used CSS3 instead of a background-image, so IE8/eariler doesn't get rounded corners and a gradient -- OH WELL.

    Also, that black on blue is below accessibility minimums, so I'd try to find a bit better a color combination. I'd also consider losing the px metrics and go for em so it's elastic, particularly on the text.
     
    deathshadow, Jan 30, 2013 IP