www.webdeveloper.com
Results 1 to 4 of 4

Thread: IE Menu and header display issues

  1. #1
    Join Date
    Jan 2010
    Posts
    14

    Angry IE Menu and header display issues

    Hi again all.

    Seems i spend half my time trying to find IE work arounds these days.

    The problem i am having is i have a nav menu underneath my header and it 4 of the main browsers are displaying it fine but IE is giving me grief and seems to be adding a few pixels to the header so that the background image is starting again and looks wierd. also my left column seems to be making itself a few pixels thinner in IE i have uploader some screenshots of the issues to show you what i mean.

    Here is a firefox screenshot of how it's supposed to look
    http://doobeez.com/workshop/ff_screenshot.jpg

    and here is what IE is doing to it
    http://doobeez.com/workshop/ie_screenshot.jpg

    I have validated my code as allways and all its chucking back is text color and background color matches which i allways fix when i'm done with the design and i match bg colors to images for image disabled browsers.

    The page is uploaded HERE

    Here is my CSS:

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * {
    	margin:0;
    	padding:0;
    }
    
    body{
    	background: #262525;
    	font-family:"Trebuchet MS", Helvetica, sans-serif;
    	min-width:800px;
    	
    }
    
    ul {
    	text-decoration:none;
    	list-style:none;
    }
    
    #wholewrap{
    	
    }
    
    #sitewrap{
    	text-align:left;
    	
    }
    
    #topwrap{
    	width:100%;
    	background-image:url(../images/top_bg.png);
    }
    
    #topleft{
    	height:25px;
    	width:135px;
    	float:left;
    }
    
    #topleft p{
    	margin-left:5px;
    }
    
    #topright{
    	height:25px;
    	width:135px;
    	float:right;
    	text-align:right;
    }
    
    #topright p{
    	margin-right:5px;
    }
    
    #topcenter{
    	height:25px;
    	margin-left:135px;
    	margin-right:135px;
    	text-align:center;
    }
    
    
    #header{
    	height:100px;
    	min-width:958px;
    	text-align:left;
    	background-image:url(../images/headerbg.png);
    }
    
    #header_left{
    	float:left;
    
    }
    
    #header_right{
    	float:right;
    	margin-top:2px;
    }
    
    #navbar{
    	height:25px;
    	width:100%;
    	background-image:url(../images/footer_links_bg.png);
    }
    
    
    #contentwrap{
    	width:98%;
    
    }
    
    #leftcolumn{
    	width:166px;
    	float:left;
    	left:0;
    	color:#FFF;
    	margin-top:5px;
    }
    
    #leftcolumn p {
    	margin-left:10px;
    	font-weight:bold;
    }
    
    #leftcolumn h3{
    	color:#fff;
    	background-image:url(../images/left_h1_bg.png);
    	font-family:"Trebuchet MS", Helvetica, sans-serif;
    	font-weight:bold;
    	text-align:left;
    	text-indent:10px;
    	border-bottom:1px solid #000;
    }
    
    #rightcolumn{
    	width:162px;
    	float:right;
    	right:0;
    	background:#000;
    	color:#FFF;
    	border:2px solid #8B0000;
    	margin-top:5px;
    }
    
    #rightcolumn p {
    	margin-left:5px;	
    }
    
    #right_ads{
    
    }
    
    #centercolumn{
    	margin-left:175px;
    	margin-right:177px;
    	margin-top:5px;
    	
    }
    
    #footer{
    	height:50px;
    	background-image:url(../images/footer_bg.png);
    	bottom:0;
    	clear:both;
    	text-align:center;
    	width:100%;
    }
    
    #footer_links_bar{
    	height:25px;
    	background-image:url(../images/footer_links_bg.png);
    	bottom:0;
    	clear:both;
    	text-align:center;
    	width:100%;
    }
    
    p.copyright{
    	padding-top:10px;
    	color:#FFF;
    	
    }
    
    /*******************Start Navmenu*****************/
    #navmenuwrap{
    
    }
    
    #navmenu {
    }
    
    #navmenu ul{
    	width:300px;
    	margin:auto;
    	line-height:20px;
    }
    
    #navmenu li{
    	list-style:none;
    	float:left;
    	background-image:url(../images/button_bg_hover.png);
    }	
    
    #navmenu ul li a{
    	text-align:center;
    	font-family:"Trebuchet MS", Helvetica, sans-serif;
    	font-weight:bold;
    	text-decoration:none;
    	height:25px;
    	width:100px;
    	display:block;
    	color:#FFF;
    	text-shadow:1px 1px 1px #000;
    }
    
    
    
    #navmenu ul li a:hover {
    	background-image:url(../images/button_bg.png);
    }
    
    
    
    /*******************Left Menu*****************/
    
    
    
    #leftmenu{
    }
    
    #leftmenu ul li a {
    	font-family:"Trebuchet MS", Helvetica, sans-serif;
    	font-weight:bold;
    	list-style:none;
    	text-decoration:none;
    	color:#fff;
    	width:156px;
    	display:block;
    	text-align:left;
    	background-image:url(../images/left_bg.png);
    	line-height:normal;
    	padding-left:5px;
    	padding-right:5px;
    	border-bottom:1px solid #000;
    	border-top:1px solid #000;
    }
    
    #leftmenu ul li a:hover {
    	font-weight:bold;
    	list-style:none;
    	text-decoration:none;
    	color:#FFF;
    	width:156px;
    	display:block;
    	background-image:url(../images/left_bg_hover.png);
    	padding-left:5px;
    	padding-right:5px;
    }
    
    /****************** End left menu************************/
    
    
    #content{
    	background:#fff;
    	padding: 5px; 
    	text-align:left;
    }
    
    #content img{
    	margin:5px;
    	border:2px solid #8B0000;
    }
    
    #content h1{
    	color:#8B0000;
    	background:#2a6da9;
    	text-align:center;
    }
    
    #content h2{
    	color:#fff;
    	background:#000;
    	text-align:center;
    }
    
    /*start footer links*/
    
    #footer_links_wrap{
    	margin-top:10px;
    }
    
    #footer_links{
    	
    }
    
    #footer_links ul{
    	width:500px;
    	margin:auto;
    	line-height:20px;
    }
    
    #footer_links li{
    	list-style:none;
    	float:left;
    	background-image:url(../images/button_bg_hover.png);
    }	
    
    #footer_links ul li a{
    	text-align:center;
    	font-family:"Trebuchet MS", Helvetica, sans-serif;
    	font-weight:bold;
    	text-decoration:none;
    	height:25px;
    	width:100px;
    	display:block;
    	color:#FFF;
    	text-shadow:1px 1px 1px #000;
    }
    
    
    
    #footer_links ul li a:hover {
    	background-image:url(../images/button_bg.png);
    }
    
    a img {
    	border:none; 
    }
    and here is the html:
    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html charset=utf-8" />
    <title>Blog Test | Home</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    
    <body>
    
    <div id="wholerap">
    
    <div id="topwrap">
    
    <div id="topleft">
    <?php include("includes/top_left.html"); ?>
    </div><!-- end topleft -->
    
    <div id="topright">
    <?php include("includes/top_right.html"); ?>
    </div><!-- end topright -->
    
    <div id="topcenter">
    <?php include("includes/top_center_text.html"); ?>
    </div>
    
    </div><!-- end topwrap -->
    
    <div id="header">
    <div id="header_left">
    <?php 
    	include("includes/logo.html");
    ?>
    </div><!-- end header_left -->
    <div id="header_right">
    <?php
    	include("includes/header_ads.html");
     ?>
     </div><!-- end header_right -->
    </div><!-- end header -->
    
    
    <div id="navbar">
    <?php include("includes/navmenu.html"); ?>
    </div><!-- end navbar -->
    <div id="sitewrap">
    <div align="center">
    <div id="contentwrap">
    
    <div id="leftcolumn">
    <?php include("includes/leftmenu.html"); ?>
    </div><!-- end leftcolumn -->
    
    <div id="rightcolumn">
    <?php include("includes/right_ads.html"); ?>
    </div><!-- end rightcolumn -->
    
    <div id="centercolumn">
    <?php include("includes/homepage.html"); ?>
    </div><!-- end centercolumn -->
    
    </div> <!-- end contentwrap -->
    </div><!-- end centering div -->
    </div><!-- end sitewrap -->
    
    <div id="footer_links_bar">
    <?php include("includes/footer_links.html"); ?>
    </div><!-- end footer links  bar-->
    
    <div id="footer">
    <?php include("includes/footer.html"); ?>
    </div><!-- end footer -->
    
    
    </div><!-- end wholerap -->
    </body>
    </html>

    i have been playing around with this all day trying to fix it as i allways do before i impose my problems on the community and no matter what i change i can not figure this out.

    Any help would be greatly appreciated and i thank you in advance for taking the time to look at this.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,160
    You're going to have problems when you don't use a complete <!DOCTYPE> statement on your pages. See: http://msdn.microsoft.com/en-us/library/bb250395.aspx.

  3. #3
    Join Date
    Jan 2010
    Posts
    14
    Hi thanks for the reply, i do have a doctype declared i just removed all of the meta data from copy i uploaded and the code i posted i should have stated that before sorry. The actual page with the doctype still has the same issues which leads me to believe that the problem is with my coding. the actual head section of my page is as so :
    Code:
    <head>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <title>Home Page</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="copyright" content="">
        <meta name="author" content="">
        <meta name="email" content="">
        <meta name="Distribution" content="Global">
        <meta name="Rating" content="General">
        <meta name="Robots" content="INDEX,FOLLOW">
        <meta name="Revisit-after" content="1 Day"> 
    <link rel="stylesheet" href="css/style.css" type="text/css" /> 
    
    
    </head>

  4. #4
    Join Date
    Jan 2010
    Posts
    14
    Solved, and it took posting my head section here to notice my head section was above my doctype, and also the fact i had added an extra head tag. Thanks for the help. feel like slapping myself for not noticing this before.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles