SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    website image overlapping in ie7

    hi guys i face this problem today after so many pages i make i just notice that this template got bug, right now i dont know how to get rid of this bug any suggestion is very very appreciate

    here is the link

    informationsecurityasia.com/cardex/index.html

    its show no error or bug in firefox or ie6 but in ie 7 the banner image is broken. can someone help me.

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I don't see any obvious errors. How is the image broken?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with IE7 is that it respects the height declaration on #tabs but doesn't handle the overflow correctly.

    I suggest you remove the height declaration and set a min-height instead.

    I suggest you read these:
    Internet Explorer and the Expanding Box Problem
    Min-Height for IE/Win
    The overflow declaration
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I already try to remove the code like u suggest but no luck, i attach the file for your reference.

    This is css code
    Code:
       
    body { padding: 0; margin: 0; font: 0.7em Tahoma, Arial, sans-serif; line-height: 1.6em; background: #fff; color: #454545; }
    
    /* links */
    a { color: #003B6E; background: inherit; }
    a:hover { color: #9EC068; background: inherit; }	
    
    /* headings */
    h1 { font: bold 2.5em "Arial", Sans-Serif; margin: 0; letter-spacing: -1px; }
    h2 { font: bold 2em Arial, Sans-Serif; margin: 0; padding: 0; }
    h1 a, h2 a { color: #2b2b2b; background: #fff; text-decoration: none; }
    h1 a:hover, h2 a:hover { color: #2b2b2b; background: #FFF; }
    .title { color: #808080; background: #fff; }
    
    /* lists and form elements */
    ul { margin: 0; padding : 0; list-style : none; }
    form { margin: 0; }
    input.search { width: 279px; border: none; background: #fff url(images/input.gif) no-repeat; padding: 6px 10px; color: #1E67A8; font-weight: bold; }
    input.button { padding: 3px; }
    
    /* content holder */
    #content { margin: 10px auto; width: 960px; }
    
    /* header */
    #header { height: 75px; }
    #logo { padding: 15px 0 0 8px; }
    #logo p { margin: 0; padding: 0 0 0 10px; color: #808080; background: #fff; }
    #top_info { float: right; width: 570px; margin: 20px 5px 0 0; text-align: right; }
    
    /* horizontal tabbed menu */	
    #tabs { background: #fff url(images/bigbox.gif) no-repeat top left; color: #000;  height: 64px; text-align: center; padding: 0 0 0 210px; }
    #tabs li { display: inline; height: 45px; }
    #tabs li a { float: left; background: #fff url(images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }
    #tabs li a:hover { background: #fff url(images/barcurrent.gif) no-repeat; color: #000; }	
    #tabs li a.current { background: #fff url(images/barcurrent.gif) no-repeat; color: #2C71AE; }	
    .key { text-decoration: underline; }
    
    /* search form */
    #search { 
    	float: left;
    	clear: both;
    	color: #000;
    	background: #fff url(images/searchbg.gif) no-repeat;
    	padding: 14px 0 20px 5px;
    	width: 500px;
    	margin: 5px 0 0 0;
    }
    	#search p { padding: 0; margin: 0; }
    
    
    /* grey subheader */
    .gboxtop { clear: both; height: 8px; background: #dedede url(images/gboxtop.gif) no-repeat; color: #000; }
    .gbox { background: #dedede url(images/gbox.gif) no-repeat bottom left; color: #444; padding: 1px 13px 7px 13px; margin: 0 0 20px 0; }
    .gbox p { padding: 7px 0; margin: 0;}
    
    
    /* left side */
    .left { float: left; width: 650px; margin: 0 0 10px 0; }
    	.left_articles {
    		margin: 0 20px 15px 10px;
    		padding: 10px 0 0 0;
    		text-align: justify;
    		border-bottom: 1px dotted #ccc;
    		color: #000;
    		background: #fff;
    	}
    	
    	.calendar { height: 50px; float: left; background: #fff url(images/calendar.gif) no-repeat; width: 50px; padding: 5px 0 0 9px;  color: #808080;}
    	.calendar p { padding: 0; margin: 0; }
    	.description { padding: 0 0 2px 0; margin: 0 10px 5px 0; border-bottom: 1px dotted #ccc; }
    	.thumbnail { float: left; margin: 0 18px 8px 0; border: 1px solid #dedede; }
    
    /* left side */
    .left2 { float: left; width: 650px; margin: 0 0 10px 0; }
    	
    	.calendar { height: 50px; float: left; background: #fff url(images/calendar.gif) no-repeat; width: 50px; padding: 5px 0 0 9px;  color: #808080;}
    	.calendar p { padding: 0; margin: 0; }
    	.description { padding: 0 0 2px 0; margin: 0 10px 5px 0; border-bottom: 1px dotted #ccc; }
    	.thumbnail { float: left; margin: 0 18px 8px 0; border: 1px solid #dedede; }
    
    
    /* bottom thirds */
    .thirds { float: left; width: 203px; background: #eee; margin: 0 12px 0 0; color: #5d5d5d; }
    	.smallboxtop { height: 14px; background: #fff url(images/smallboxtop.gif) no-repeat; color: #000; }
    	.smallbox { background: #fff url(images/smallbox.gif) no-repeat bottom left; color: #444; padding: 1px 10px 10px 10px;  }
    	.smallbox p { padding: 0; margin: 0; }
    
    	
    /* right side */
    #right {
    	float: right;
    	width: 295px;
    	margin: 0 0 10px 0;
    }
    	.boxtop { height: 19px; background: #fff url(images/boxtop.gif) no-repeat; color: #000; }
    	.box { background: #fff url(images/box.gif) no-repeat bottom left; color: #5b5b5b; padding: 0 10px 15px 10px; margin: 0 0 10px 0; }
    	.box p { padding: 0; margin: 0;}
    	.image { float: left; margin: 0 9px 3px 0; }
    
    
    /* misc */
    .buttons { text-align: right; padding: 4px 3px 0 0;}
    .left_articles .buttons { float: right; height: 20px; }
    .bluebtn { background: #488EB2 url(images/bluebtn.gif) no-repeat; width: 100px; padding: 1px 16px 5px 16px; color: #fff; text-decoration: none; }
    .greenbtn { background: #488EB2 url(images/greenbtn.gif) no-repeat; padding: 1px 17px 5px 16px; color: #fff; text-decoration: none; }
    .bluebtn:hover, .greenbtn:hover { background: #488EB2 url(images/hoverbtn.gif) no-repeat; color: #fff; }
    
    /* footer  */
    .footer { clear: both; text-align: center; line-height: 1.8em; padding: 10px 0 10px 0; border-top: 1px solid #ccc; }
    
    /*form */
    #mytable {
    	width: 570px;
    	padding: 0;
    	margin: 0;
    }
    
    caption {
    	padding: 0 0 5px 0;
    	width: 700px;	 
    	font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    	text-align: right;
    }
    
    th {
    	font: 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    	color: #4f6b72;
    	border-right: 1px solid #C1DAD7;
    	border-bottom: 1px solid #C1DAD7;
    	border-top: 1px solid #C1DAD7;
    	letter-spacing: 2px;
    	text-transform: uppercase;
    	text-align: left;
    	padding: 6px 6px 6px 12px;
    	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
    }
    
    th.nobg {
    	border-top: 0;
    	border-left: 0;
    	border-right: 1px solid #C1DAD7;
    	background: none;
    }
    
    td {
    	border-right: 1px solid #C1DAD7;
    	border-bottom: 1px solid #C1DAD7;
    	border-top: 1px solid #C1DAD7;
    	border-left: 1px solid #C1DAD7;
    	background: #fff;
    	padding: 6px 6px 6px 12px;
    	color: #4f6b72;
    }
    
    
    td.alt {
    	background: #F5FAFA;
    	color: #797268;
    }
    
    th.spec {
    	border-left: 1px solid #C1DAD7;
    	border-top: 0;
    	background: #fff url(images/bullet1.gif) no-repeat;
    	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    }
    
    th.specalt {
    	border-left: 1px solid #C1DAD7;
    	border-top: 0;
    	background: #f5fafa url(images/bullet2.gif) no-repeat;
    	font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    	color: #797268;
    }



    and this is html code

    Code:
    <!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>
    	<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
    	<meta name="author" content="Protemp" />
    	<link rel="stylesheet" href="style.css" type="text/css" />
    	<title>CardExAsia2007 | InformationSecurity Asia 2007</title>
        <style type="text/css">
    <!--
    .style1 {font-weight: bold}
    -->
        </style>
    </head>
    <body>
    	<div id="content">
    		<div id="header">
    			<div id="logo">
    			<p id="top_info"><br />
    		    <br />
    		    <a href="index.html">Home</a> | <a href="sitemap.htm">Sitemap</a> | <a href="contactus.htm">Contact Us</a> </p>
    				<h1><img src="images/cardexlogo.gif" width="292" height="54"/><a href="index.htm"></h1>
    				
    			</div>
    	  </div>
    		<div class="style1" id="tabs">
    			<ul>	
    				<li><a href="conference/conference.html" accesskey="C"><span class="key">C</span>onference</a></li>
    				<li><a href="exhibition/exhibition.html" accesskey="E"><span class="key">E</span>xhibition</a></li>
    				<li><a href="venue/venue.htm" accesskey="v"><span class="key">V</span>enue/Hotel</a></li>
    				<li><a href="media/mediaroom.htm" accesskey="m"><span class="key">M</span>edia</a></li>
    				<li><a href="download.htm" accesskey="d"><span class="key">D</span>ownload</a></li>
    				<li><a href="contactus.htm" accesskey="C"><span class="key">C</span>ontact Us</a></li>
    			</ul>
    			<div id="search">
    					<p><br />
    					  <br />
    					</p>
    			</div>
    		</div>
    					
    		<div class="gboxtop"></div>
    		<div class="gbox">
    			<p align="center"><strong>This year's venue is the Queen Sirikit National Convention Centre, Thailand's premier venue for international meetings, conferences and exhibitions.
                    <br />
              The place is the embodiment of Thailand's world renown hospitality and excellence service.</strong><strong></strong></p>
    	  </div>
    		
    		<div class="left">
    			<div class="left_articles">
    				<div class="calendar">
    				  <p>&nbsp;</p>
    				</div>
    				<h2><a href="#">CardExAsia 2007 </a></h2>
    				<p class="description">&nbsp;</p>
    			  <p><img src="images/cardex_frontpage.gif" alt="thumbnail" width="397" height="192" class="thumbnail" />Asia Pacific has the largest potential of growth in the smart card market, and accounts for approximately 36 percent of the world smart cards market. The Asia Pacific (APAC) is also the biggest market for contactless smart cards which is gaining strength - predominantly in the financial field. </p>
    	            <p>The APAC region is at the forefront of smart card adoption largely due to substantial growth in government, financial and transportation applications. This region has one of the most conducive environments to nurture smart card schemes - contributed predominantly by strong governmental support and high-density population. Governments are evaluating and adopting smart card-based solutions for proper and secure means of identification of both employees and citizens, so there is an affinity to high volume government and ID projects, particularly in the national ID card schemes. The region also has substantial growth in both the financial and transportation application market while the telecommunications application continues to gain momentum with SIM. In all, APAC presents a new and very promising, fast moving market for smart card technology.<br />
    	              <br />
                        <strong>CardEx Asia 2007 Conference &amp; Exhibition</strong>, in its 7th year of bringing industry professionals together but for the first time in Bangkok Thailand, will give conference and exhibition participants  the unique position of being privy to current trends and challenges, identifying new technologies and being able to take advantage of all new growth opportunities this burgeoning market offers.
    	              <br />
                    </p>
              </div>
    									
    	  </div>
    		<div id="right">
    			<div class="boxtop"></div>
    			<div class="box">
    				<p>				  <img src="images/securemalaysia.gif" width="274" height="51" /><br />
    			  Information Security Asia 2007 : SecureAsia@Bangkok, in its 3rd year of bringing industry professionals together but for the first time in Bangkok, Thailand, will give all conference and exhibition participants and visitors the unique position of being privy to current trends and challenges, identifying new technologies and being able to seize all the new growth opportunities this burgeoning market offers. <br />
    				</p>
    				<div class="buttons">
    				  <p><a href="http://www.informationsecurityasia.com" target="_blank" class="bluebtn">Visit</a></p>
    				</div>
    		  </div>
    			
    			<div class="boxtop"></div>
    			<div class="box">
    				<p><img src="images/rfid.gif" width="266" height="49" /> <br />
    RFID is expected to be the next big trend and with the fast growth of RFID in the Asia-Pacific region, Thailand is in the race to adopt the technology in key applications and develop its potential in becoming an RFID industry leader in Southeast Asia in the near future.<br /></p>
    				<div class="buttons"><p><a href="./exhibition/rfidexpoasia.htm" class="bluebtn">Read</a></p>
    				</div>
    		  </div>
    		</div>	
    		<div class="footer">
    		    <script type="text/javascript" language="JavaScript1.2" src="logo.js"></script>
    	  </div>
    	</div>
    </body>
    </html>

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest you remove the height declaration and set a min-height instead.
    Replace height:64px; by min-heigh:64px; in #tabs
    add * html #tabs{height:64px;}

  6. #6
    SitePoint Member
    Join Date
    Feb 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan_A , THANK YOU VERY MUCH, this really work that annoying bug finally GONE FOREVER hahahahahah , i really appreciate it , thank you again all because help me with this problem


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
  •