Web Analytics Made Easy -
StatCounter IE6 in shock "doesn't look like what it's supposed to" exclusive - CodingForum

Announcement

Collapse
No announcement yet.

IE6 in shock "doesn't look like what it's supposed to" exclusive

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • IE6 in shock "doesn't look like what it's supposed to" exclusive

    www.revolutionstream.net

    Look at it in Firefox. That's how it's supposed to look. Well, apart from the fact that it's aligned the text in the content box with the right-hand edge of the nav bar.

    Now look at it in IE6. Oh look, the nav bar has made a run for the left-hand screen edge while the content box is sneaking in the opposite direction.

    What's that all about, then?


    I've gone through the page source, the CSS file - I'm sure it's a typo but I can't find it. Why is IE6 screwing with my page?

    rev.css:
    Code:
    body{
    	margin:0;
    	padding:0;
    	background-color : #999966;
    	background-image : url("img/bg.jpg");
    	background-repeat : no-repeat;
    }
    #headerstretch{
    	background-image : url("img/header_stretch.jpg");
    	background-repeat : repeat-x;
    	position:relative;
    	width:"100%";
    	height:102px;
    	top:0px;
    	left:790px;
    }
    #topnav{
    	position:relative;
    	top:0px;
    	left:180px;
    	text-align: center;
    }
    #content{
    	position:relative;
    	top:50px;
    	left:180px;
    	width:600px;
    	height:400px;
    	border: 1px dashed #663300;
    	margin:5px;
    	padding:5px;
    	text-align:left;
    	background-color:#CCCC99;
    }
    
    
    .topnav_tab_lo{
    	background-image : url("img/tn_lo_bg.gif");
    	background-repeat : repeat-x;
    	float:left;
    }
    .topnav_tab_hi{
    	background-image : url("img/tn_hi_bg.gif");
    	background-repeat : repeat-x;
    	float:left;
    }
    .topnav_text_lo{
    	font-family:Verdana;
    	font-size:10pt;
    	color:#333300;
    	text-decoration:none;
    }
    .topnav_text_hi{
    	font-family:Verdana;
    	font-size:10pt;
    	color:#333300;
    	font-weight:bold;
    	text-decoration:none;
    }
    
    
    .header{
    	font-family:Verdana;
    	font-size:14pt;
    	color:#663300;
    	font-weight:bold;
    	/*border-bottom: 1px dashed #663300; */
    }
    .header_right{
    	position: absolute;
    	right: 0px;
    	width: "49%";
    	text-align: right; /* depends on element width */
    	font-family:Verdana;
    	font-size:9pt;
    	color:#663300;
    }
    
    p{
    	font-family:Verdana;
    	font-size:9pt;
    	color:#663300;
    }
    td.ct{
    	font-family:Verdana;
    	font-size:9pt;
    	color:#663300;
    }
    a.bodylink:link{
    	font-weight:bold;
    	color:#663300;
    	text-decoration:none;
    }
    a.bodylink:visited{
    	font-weight:bold;
    	color:#663300;
    	text-decoration:none;
    }
    a.bodylink:hover{
    	font-weight:bold;
    	color:#996633;
    	text-decoration:underline;
    }

  • #2
    The root of the problems is the relative positioning? Why are you doing this? Use margins instead. Change this
    Code:
    body{
    	margin:0;
    	padding:0;
    	background-color : #999966;
    	background-image : url("img/bg.jpg");
    	background-repeat : no-repeat;
    }
    #headerstretch{
    	background-image : url("img/header_stretch.jpg");
    	background-repeat : repeat-x;
    	position:relative;
    	width:"100%";
    	height:102px;
    	top:0px;
    	left:790px;
    }
    #topnav{
    	position:relative;
    	top:0px;
    	left:180px;
    	text-align: center;
    }
    #content{
    	position:relative;
    	top:50px;
    	left:180px;
    	width:600px;
    	height:400px;
    	border: 1px dashed #663300;
    	margin:5px;
    	padding:5px;
    	text-align:left;
    	background-color:#CCCC99;
    }
    to this
    Code:
    	body{
    	margin:0;
    	padding:0;
    	background-color : #999966;
    	background-image : url("img/header_stretch.jpg");
    	background-repeat : repeat-x;
    }
    #container {
    	background-image : url("img/bg.jpg");
    	background-repeat:no-repeat;
    	}
    #headerstretch{
    	position:relative;
    	width:100%;
    	height:102px;
    }
    #topnav{
    	position:relative;
    	margin-left:180px;
    	text-align: center;
    }
    #content{
    	position:relative;
    	clear:both;
    	width:600px;
    	height:400px;
    	border: 1px dashed #663300;
    	margin:50px 5px 5px 180px;
    	padding:5px;
    	text-align:left;
    	background-color:#CCCC99;
    }
    Use this for the HTML
    Code:
    <div id="container">
    	<div id="headerstretch"></div>	
    	
    	<div id="topnav">
    		
    
    		<div class="topnav_tab_lo">			
    			<table cellpadding=0 cellspacing=0 border=0>
    
    				<tr>
    					<td><img src="img/tn_lo_left_edge.gif" width="11" height="30" alt="" border="0"></td>
    					<td><a class="topnav_text_lo" href="sectionDisplay.asp?s=1" title="This Is The Page Title">Link</a></td>
    					<td><img src="img/tn_lo_leftside_right.gif" width="9" height="30" alt="" border="0"></td>
    				</tr>
    			</table>
    		</div>
    
    		<div class="topnav_tab_hi">
    
    			<table cellpadding=0 cellspacing=0 border=0>
    				<tr>
    					<td><img src="img/tn_hi_left.gif" width="11" height="30" alt="" border="0"></td>
    					<td><a class="topnav_text_hi" href="sectionDisplay.asp?s=2" title="">Admin</a></td>
    					<td><img src="img/tn_hi_right.gif" width="11" height="30" alt="" border="0"></td>
    				</tr>
    			</table>
    		</div>
    
    		<div class="topnav_tab_lo">
    			<table cellpadding=0 cellspacing=0 border=0>
    				<tr>
    					<td><img src="img/tn_lo_rightside_left.gif" width="9" height="30" alt="" border="0"></td>
    					<td><a class="topnav_text_lo" href="sectionDisplay.asp?s=3" title="">Home</a></td>
    					<td><img src="img/tn_lo_rightside_right.gif" width="11" height="30" alt="" border="0"></td>
    				</tr>
    			</table>
    
    		</div>
    
    		<div class="topnav_tab_lo">
    			<table cellpadding=0 cellspacing=0 border=0>
    				<tr>
    					<td><img src="img/tn_lo_rightside_left.gif" width="9" height="30" alt="" border="0"></td>
    					<td><a class="topnav_text_lo" href="sectionDisplay.asp?s=4" title="This is a test">Test</a></td>
    					<td><img src="img/tn_lo_right_edge.gif" width="11" height="30" alt="" border="0"></td>
    				</tr>
    
    			</table>
    		</div>
    		
    	</div>
    
    
    <div id="content">hello</div>
    
    </div>
    All I did was shift some background images around and added a container div. There was an awfully long horizontal scrollbar in FF.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Originally posted by _Aerospace_Eng_
      Why are you doing this?
      Because I'm a complete numpty Thanks for your help - and sorry it took me a while to reply

      Comment

      Working...
      X