Help! layout problem in IE7/8

Discussion in 'HTML & Website Design' started by caj, Nov 18, 2009.

  1. #1
    I've been figuring this out for weeks - but still couldn't make it work right.

    Screenshot #1 - the site as seen in IE8 / 7 / 6
    [​IMG]

    Screenshot #2 - the site as seen in Firefox, Chrome
    [​IMG]

    Please fellow dpers - help me out with this :(.
     
    caj, Nov 18, 2009 IP
  2. ralph.m

    ralph.m Greenhorn

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #2
    No help can be given without a link or some code. :)
     
    ralph.m, Nov 18, 2009 IP
  3. caj

    caj Active Member

    Messages:
    748
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    75
    #3
    The site is Here the header code below:

    <div id="navbar">
    		<ul id="navcatlist">
    			<li class="current-cat"><a href="http://www.bintulu.org" title="Bintulu News, Blogs, Forum, Community">Home</a></li>
    				<li class="cat-item cat-item-1"><a href="http://www.bintulu.org/news/category/news" title="News">News</a>
    <ul class='children'>
    	<li class="cat-item cat-item-16"><a href="http://www.bintulu.org/news/category/news/politics" title="Malaysian politics and government">Politics</a></li>
    	<li class="cat-item cat-item-297"><a href="http://www.bintulu.org/news/category/news/business" title="Local Business News">Business</a></li>
    	<li class="cat-item cat-item-866"><a href="http://www.bintulu.org/news/category/news/sport" title="Sport">Sport</a>
    	<li class="cat-item cat-item-3"><a href="http://www.bintulu.org/news/category/news/celebrity" title="Media and celebrity news">Entertainment</a></li>
    	<li class="cat-item cat-item-843"><a href="http://www.bintulu.org/news/category/news/technology" title="Technology">Technology</a>
    	<li class="cat-item cat-item-336"><a href="http://www.bintulu.org/news/category/news/science" title="Science">Science</a>
    	<li class="cat-item cat-item-34"><a href="http://www.bintulu.org/news/category/travel" title="Travel stories of Bintulu and beyond">Travel</a></li>
    </li>
    </ul>
    </li>
    	<li class="cat-item cat-item-5"><a href="http://www.bintulu.org/news/category/featured-stories" title="Featured">Features</a></li>
    	<li class="cat-item cat-item-26"><a href="http://www.bintulu.org/news/category/commentary" title="news highlights and general commentaries">Commentaries</a></li>
    	<li class="cat-item cat-item-205"><a href="http://www.bintulu.org/news/category/living" title="living">Life & Style</a></li>
    	
    
    <li class="cat-item cat-item-857"><a href="http://www.bintulu.org/news/category/columns" title="Columnist">Columns</a>
    <ul class='children'>
    	<li class="cat-item cat-item-364"><a href="http://www.bintulu.org/news/category/columns/special-features" title="Special features">Special Features</a></li>
    	<li class="cat-item cat-item-829"><a href="http://www.bintulu.org/news/category/columns/speak-out" title="covering entertainment and teen news">Youth Takes</a></li>
    </ul>
    </li>
    
    <li><a href="http://bintulu.org/forum/viewforum.php?f=4&start=0">Classified</a></li>
    <li><a href="http://www.bintulu.org/forum">Forum</a></li>
    <li><a href="http://blogs.bintulu.org">Blog</a></li>
    <li><a href="http://www.bintulu.org/advertise">Advertising</a></li>
    		</ul><div class="clear"></div>	
    	</div>
    <div class="clear"></div>
    Code (markup):

    Here is the stylesheet.css

    /* NAVBAR STYLE
    ============================================================== */
    #navbar {
    	background:url(../images/bgMenu.gif);
    	font: 12px Arial, "arial black", sans-serif;
    	width:970px;
    	margin-bottom: 10px;
    	margin-top:3px;
    	border-bottom:2px solid #E5E3E3;
    		
    }
    ul#navcatlist li {
    	float: left;
    	width: auto;
    }
    ul#navcatlist li a {
    	display: block;
    	color:#FFF;
    	padding:5px 14px;
    	border-right:1px solid #01B0EB; 
    }
    
    ul#navcatlist li.current-cat a {  color:#FFF;background:url(../images/bgMenuHover.gif) repeat-x; }
    
    ul#navcatlist li a:hover { color:#FFF; text-decoration:none;background:url(../images/bgMenuHover.gif) repeat-x; }
    
    
    ul#navcatlist li li {
    	float: left;
    	width: 160px;
    	border-left:5px solid #DCDCD8;
    }
    
    
    ul#navcatlist li li a {
    	background: #085385;
    	float: none;
    	color:#F0EECE;
    	font:normal 12px arial, verdana, sans-serif;
    	padding: 3px 10px;
    	border-top: 1px solid #afafaf;
    	border-right:0;
    	width: 160px!important;
    	width:180px;
    	width/**/:/**/160px;
    }
    
    ul#navcatlist li li a:hover, ul#navcatlist li li a:active {
    	background-position: -30px 100%; 
    	color:#F0EECE;
    	text-decoration:none;
    }
    ul#navcatlist li ul {
    	position: absolute;
    	width: 180px;
    	z-index:999;
    	left: -999em;
    	border-bottom:1px solid #afafaf;
    }
    ul#navcatlist li:hover ul, ul#navcatlist li.sfhover ul {
    	left: auto;
    	display:block;
    }
    Code (markup):
     
    caj, Nov 18, 2009 IP
  4. brackishwaters

    brackishwaters Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    take a look at your ul and li tags in the code, I see some errors just reviewing it here in the forum.
     
    brackishwaters, Nov 18, 2009 IP
  5. caj

    caj Active Member

    Messages:
    748
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    75
    #5
    Can you be specific - just help point me the error please:eek:.
     
    caj, Nov 18, 2009 IP
  6. caj

    caj Active Member

    Messages:
    748
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    75
    #6
    I think I found the error already. It took me 12- days to find. Problem solved. Thread CLOSED.

    Thank Ralp, Brackishwaters.
     
    caj, Nov 18, 2009 IP
  7. brackishwaters

    brackishwaters Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Great, hope I helped! Sorry I wasnt more specific and I will try to be more so next time.
     
    brackishwaters, Nov 18, 2009 IP