Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    IE layout help please

    Firefox:


    IE:


    Why is the middle box moved down??! I hate IE!

    Code:
    .new {
    
    margin:10px 0px 0px 0px;
    background:#22a2d6;
    height:170px;
    width:478px;
    }

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    This is hardly possible to solve with just two screenshots and 4 lines of CSS. Can we have a link or at least some more code? Did you try to validate your code?
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    hi thanks,

    here is my cSS code:

    Code:
    @charset "UTF-8";
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    
    .clearfix {display: block;}
    
    .clearthis {
    	clear: both;
    	font-size: 1px;
    	line-height: 1px;
    	display: block;
    	color: #f00;
    	}
    
    /*///////// Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /*///////// End hide from IE-mac */
    
    /*/////////  */
    .StyleSheetHiddenPlaceHolder  {
    	display : none;
    }
    
    /*///////// ///////////*/
    
    body, div, p, table, th, tr, td, ul, ol, li, h1, h2, h3{
    font-family: arial, tahoma, Sans-Serif;
    font-size:13px;
    color:#333;		
    }
    
    BODY {	margin:0px 0 0em 0; 
    		padding:0px; 			
    		text-align:center;
    		background-image:url(img/midbg.gif);
    		background-repeat:repeat;		
    		}
    		
    body.video {
    		margin:0px 0 0em 0; 
    		padding:0px; 			
    		text-align:left;
    		background:#FFFFFF;	
    		}
    		
    
    		
    a {color:#fff;text-decoration:underline;}
    a:hover {text-decoration:none;}
    
    img { border: none; }
    
    h1 {
    	padding:0 0 0 0px;
    	margin:0 0 .4em 0px;
    	font-size:26px;
    	font-weight:normal;
    	}
    
    	
    h2{		
    	padding:0 0 0 0px;
    	margin:0 0 .4em 0px;
    	font-size:24px;	
    	font-weight:normal;
    	}
    	
    		
    h3{	
    	width:90%;
    	font-size:14px;
    	margin:0 0 .6em 0px;	
    	padding:0 0 0px 0;	
    	border:0;
    	color:#990000;
    	}
    	
    
    h4{	
    	font-size:13px;
    	margin:0 0 .4em 0px;	
    	padding:0 0 0px 0;
    	color:#666666;
    	font-weight:normal;	
    	}
    	
    p{
    	line-height:1.3em;
    	margin:0 0 1em 0;
    	padding:0;
    	
    	}
    	
    	
    form {
    	padding:0;
    	margin:0;
    	}
    	
    fieldset {
    	border:none;
    	padding:0;
    	margin:0;
    	}
    	
    legend {
    	display:none;
    	}
    	
    	ul{}
    	
    	li {margin:0 10px .5em 0}
    	
    	table { border-collapse:collapse; margin:1.5em 0 3em 0; width:100%;}
    	
    	td, th {vertical-align:top; width:33%; padding-right:10px; font-size:14px;}
    	
    
    
    /*/////////   main layout  ///////////*/
    		
    #wrap{	width:1050px;			
    		margin:0 auto;  											
    		z-index:0;	
    		text-align:left;		
    		padding:0;		
    		}
    		
    .video #wrap {border:0; width:450px;}		
    
    .head{	width:1000px;
    		padding:10px 30px 0px 20px;
    		background:#fff url(img/bg_head.gif) 0 68px no-repeat;	
    		border-bottom:3px solid #AEAEAE;
    		height:85px;	
    		position:relative		
    		}	
    
    #content {width:1035px;
    background:#000000 url(img/mainbackground.jpg) no-repeat bottom left; padding:20px 10px 20px 15px;}
    
    .left {float:left; height:390px; display:block;}
    		
    iframe	{float:left;
    		margin:0 0 0 20px;
    		width:670px;
    		height:459px;
    		border:0;
    		padding:0;}
    		
    .mid, .right {float:right; width:314px;}
    #mainholder {padding-left:15px; float:left; width:800px; height:390px;}
    .right {width:314px; margin:10px 0px 0px 20px;}
    #bottomholder { clear:both; height:179px; border:#000 1px solid; width:800px; margin-left:240px;}
    
    #tophead {background-image:url(img/topbg.gif); height:72px; background-repeat:repeat; margin-bottom:14px; padding-top:32px; }
    
    #topwhitebanner{ height:42px; background-color:#FFFFFF; background-repeat:repeat-x; }
    #topholder{ width:907px; margin: 0px auto; }
    
    .topmidbuttons{ width:189px; margin: 0px auto;}
    	
    #bottomfooter {background-image:url(img/topbg.gif); height:42px; background-repeat:repeat; margin-top:14px; }	
    /*/////////      header     ///////////*/
    .toplogo{ float:left; }
    .head .info {float:right; text-align:right;}
    .head .logo {float:left;}
    .toprightinfo{float:right; padding-top:10px;}
    .toprightinfo a:link{ font-family:Arial, Helvetica, sans-serif; color:#F62700; text-decoration:none;}
    .toprightinfo a:hover{ font-family:Arial, Helvetica, sans-serif; color:#F62700; text-decoration:none;}
    .toprightinfo a:visited{ font-family:Arial, Helvetica, sans-serif; color:#F62700; text-decoration:none;}
    .toprightinfo a:active{ font-family:Arial, Helvetica, sans-serif; color:#F62700; text-decoration:none;}
    
    .head a, .head a:visited {color:#cccccc;}
    .head p {font-size:11px; margin:0 0 .7em 0;}
    
    .head #nav {
    				background:url(img/bg_links.gif) no-repeat;				
    				height:18px;				
    				display:block;
    				position:absolute;
    				left:33px;
    				top:71px;
    				color:#FFFFFF;
    }
    				
    #nav ul {
    	display:block;
    	position:relative;
    	margin:0;
    	padding:0 15px 0 5px;		
    	float:left;		
    	}
    	
    	#nav  li {	
    	list-style-type:none;
    	margin:1px 0px 0 6px;
    	padding:0;
    	float:left;		
    	}
    		
    	#nav li a, #nav li a:visited{	
    	display: block;	
    	text-indent:-3000em;		
    	background-repeat:no-repeat;	
    	height:16px;	
    	}
    	
    	#nav li a:hover{	
    	filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70;
    	}	
    	
    	#nav li#home a, #nav li#home a:visited{background-image:url(img/n_home.gif); width:18px;}		
    	#nav li#back a, #nav li#back a:visited{background-image:url(img/n_back.gif); width:20px;}		
    	#nav li#fwd a, #nav li#fwd a:visited{background-image:url(img/n_fwd.gif); width:20px;}		
    
    /*/////////      end header     ///////////*/
    
    
    
    
    
    /*///////// col on the left */ 
    
    .left ul {	
    	overflow: auto;
    	padding:8px 5px 5px 15px;
    	margin:0px 0 10px 0;	
    	background:#99add6;
    	display:block; 
    	width:200px;	
    	height:358px;
    	}
    	
    	.left  li {	
    	list-style-type:none;
    	margin:0 0 0px 0;
    	padding:0 0 5px 0;
    	color:#FFFFFF;
    	line-height:13px;	
    	}
    	
    	.left li ul {	
    	padding:0px;
    	margin:3px 0 0 0;
    	}
    	
    	.left li li {	
    	list-style-type:none;
    	margin:0px 0px 5px 0px;
    	padding:0 0 0 15px;
    	background:url(img/bg_aro.gif) 0 2px  no-repeat;
    	font-size:11px;	
    	line-height:9px;
    	}
    	
    	.left li li a,  .left li li a:visited{	
    	text-decoration:none;
    	}
    	
    	.left li li a:hover{	
    	text-decoration:underline;
    	}
    		
    	.cursor{cursor:pointer;}	
    .subcategory{
    font-family:Arial, Helvetica, sans-serif; 
    font-size:10px;
    line-height:12px;
    }
    .category{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    /*///////// end col on the left */ 
    
    
    /*///////// col on the mid */ 
    	
    .new {
    
    margin:10px 0px 0px 0px;
    background:#22a2d6;
    height:170px;
    width:478px;
    }
    
    .new div {overflow:auto; width:266px; height:92px; white-space:nowrap; margin:5px 0 20px 17px;}
    
    .bottomimagelink{width:104px; height:128px; float:left; margin:32px 0px 0px 330px; position:absolute; padding:10px 10px 10px 0px; background:#22a2d6; clear:both;}
    .new h2 { 
    	font-weight:normal; font-size:12px; background:url(img/bg_title_long.gif) no-repeat; width:462px;padding:2px 0 0 15px; margin:0; color:#FFFFFF; height:17px; 	}	
    	
    .new h3 { color:#FFFFFF; margin:0; padding:8px 140px 0 20px; font-size:12px; text-align:left}
    .new p { color:#FFFFFF; margin:0 140px 0 0; padding:3px 0px 0px; font-size:11px;text-align:right}
    
    .new img {margin-right:10px;}
    
    .mid {background:url(img/bg_video.png) no-repeat 0 240px;}
    
    #botmidhold {height:170px; width:425px; background-color:#550206;}
    	
    /*///////// end col on the mid */
    
    		
    /*///////// col on the right */ 
    
    .right .two {width:300px; background:#013047; height:170px; }
    
    .right .one { width:220px; background:#540105; height:274px; margin-bottom:15px; }
    
    
    .one h2 { 
    	font-weight:normal; font-size:12px; background:url(img/bg_title.gif) no-repeat; padding:2px 10px 0;
    width:200px; margin:0; color:#FFFFFF; height:17px; 	}
    
    .two h2 { 
    	font-weight:normal; font-size:12px; background:url(img/bg_title2.gif) no-repeat; padding:2px 10px 0;
    width:280px; margin:0; color:#FFFFFF; height:17px; 	}
    
    .two ul {padding:0px 10px 0px 10px;
    	margin:10px 0;
    	list-style-type:none;}
    	
    	.two ul li{padding:0px;
    	margin:0px 0 3px 0;
    	list-style-type:none;
    	font-size:11px}
    	
    .one ul {padding:0px;
    	margin:0px 0 0px 0;
    	list-style-type:none;}
    	
    	.one ul li{padding:0px;
    	margin:0px 0 0px 0;
    	list-style-type:none;}
    	
    .one ul li a, .one ul li a:visited{
    width:210px;padding:3px 0 0 10px; margin:0; color:#FFFFFF; height:20px; 
    background:url(img/bg_nav.gif) no-repeat;
    display:block;
    color:#FFFFFF;
    text-decoration:none;
    font-size:11px;}
    
    .one ul li a:hover{
    background:url(img/bg_nav_over.gif) no-repeat;
    }
    	
    .two span {float:right; color:#FFFFFF}	
    .two  a, .two a:visited{text-decoration:none} 
    .two a:hover{text-decoration:underline} 
    	
    /*///////// end col on the right */
    
    
    /*/////////      footer     ///////////*/
    	
    	#footer {	
    	background:#CCCCCC;
    	margin:0 auto;		
    	color:#515151;
    	font-size:11px;
    	width:1044px;
    	}	
    	
    	#footer p{	
    	padding:0 0px .6em 0;
    	margin:0;		
    	color:#666666
    	}
    	
    	#footer span {float:right;}
    
    	#footer a, #footer a:visited {color:#fff; text-decoration:underline}
    	#footer a:hover { text-decoration:none}
    	
    
    	
    	/*/////////    end   footer     ///////////*/ 
    		
    
    		
    #emailer{
    
    padding:15px;
    float:left;
    margin-top:0px;
    text-align:left;
    height:250px;
    width:400px;
    background-color:#540105;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#FFF;	
    
    }
    .imagelink{
    
    float:right;
    }
    html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Auto Trader TV</title>
    
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
    function open_win() 
    {
    window.open('http://www.wildfire-digital.com/test/autotradertv/contact.asp','','scrollbars=no,menubar=no,height=250,width=400,resizable=no,toolbar=no,location=no,status=no')
    }
    function open_win1()
    {
    window.open('http://www.wildfire-digital.com/test/autotradertv/feedback.asp','','scrollbars=no,menubar=no,height=300,width=400,resizable=no,toolbar=no,location=no,status=no')
    }
    </script>
    <!-- Wildfire Digital web tools statistics hit counter code -->
    <script type="text/javascript" id="wa_u"></script>
    <script type="text/javascript">//<![CDATA[
    // Begin Variable Declarations
    wa_account="9E8A8B908B8D9E9B9A8DCFC6"; wa_location=101;
    wa_pageName=location.pathname;  // you can customize the page name here
    // End Variable Declarations
    document.cookie='__support_check=1';wa_hp='http';
    wa_rf=document.referrer;wa_sr=window.location.search;
    wa_tz=new Date();if(location.href.substr(0,6).toLowerCase()=='https:')
    wa_hp='https';wa_data='&an='+escape(navigator.appName)+ 
    '&sr='+escape(wa_sr)+'&ck='+document.cookie.length+
    '&rf='+escape(wa_rf)+'&sl='+escape(navigator.systemLanguage)+
    '&av='+escape(navigator.appVersion)+'&l='+escape(navigator.language)+
    '&pf='+escape(navigator.platform)+'&pg='+escape(wa_pageName);
    wa_data=wa_data+'&cd='+
    screen.colorDepth+'&rs='+escape(screen.width+ ' x '+screen.height)+
    '&tz='+wa_tz.getTimezoneOffset()+'&je='+ navigator.javaEnabled();
    wa_img=new Image();wa_img.src=wa_hp+'://loc1.hitsprocessor.com/statistics.asp'+
    '?v=1&s='+wa_location+'&eacct='+wa_account+wa_data+'&tks='+wa_tz.getTime();
    document.getElementById('wa_u').src=wa_hp+'://loc1.hitsprocessor.com/track.js';
     //]]>
    </script>
    <!-- End Wildfire Digital statistics web tools hit counter code -->
    
    <!--#include file="includes/functionlib.asp"-->
    <%
    logincheck()
    opendb()
    
    UserID = session("UserID")
    set rs1 = objconn.execute("SELECT * FROM Category INNER JOIN SubCategory ON Category.CategoryID=SubCategory.CategoryID")
    
    %>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    
    <body>
    <div id="tophead">
    	<div id="topwhitebanner">	
        	<div id="topholder"><span class="toprightinfo">Welcome <% = Session("rsUser")%>&nbsp;<a href="#">Account</a>&nbsp;&nbsp;&nbsp;<a href="logout_script.asp">Logout</a></span>
            <span class="toplogo"><a href="video.asp" title="Autotrader TV Homepage"><img src="img/toplogo.jpg" border="0" alt="Autotrader TV logo"/></a></span>   
            <span class="topmidbuttons"><img src="img/icon1.png" border="0" alt="icon1" /><img src="img/icon2.png" border="0" alt="icon2" /><img src="img/icon3.png" border="0" alt="icon3" /></span>
            
        	</div>
        </div>
    </div>
    <div id="wrap">           
    <div id="content" class="clearfix">
                              
              <div class="left">
              <span class="one">
              <h2>Select</h2>
              </span>
                <ul>
                  <%
    
    		chkCategory = ""
    		Do While Not rs1.EOF
    		'---if both the values are different then it will print the category
    		if (chkCategory  <>  rs1("Category.CategoryID")) then
    			response.Write("<li class=""category"">"& rs1("CategoryName") &"")
    			response.Write("</li>")
    		end if	
    		response.Write("<li class=""subcategory"">&nbsp;&nbsp;<a href=""player.asp?SubCategoryID="&rs1("SubCategoryID")&"&CategoryID="&rs1("Category.CategoryID")&""">"& rs1("SubCategory") &"</a>")
    		response.Write("</li>")
    		chkCategory  = rs1("Category.CategoryID")
    		rs1.MoveNext
    
    		Loop
    
    %>
                    </ul>                  
              </div>
                    <div id="mainholder">
                               <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','390','title','Alpine player','src','newvideo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','newvideo' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="390" title="Alpine player">
                                 <param name="movie" value="newvideo.swf" />
                                 <param name="quality" value="high" />
                                 <embed src="newvideo.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="390"></embed>
                               </object></noscript>
                             </div>
                             <div id="bottomholder">        
              <div class="right">
                          
                  <div class="two">
                  <h2>Get More</h2>
                    	<ul>
                            <li><a href="video.swf.zip">Download video</a></li>
                            <li><a href="#">Transcript</a></li>
                            <li><a href="http://www.autotrader.co.uk" target="_blank">Link to website</a></li>
                            <li><a href="http://www.zstats.com/" target="_blank">View tracking</a></li>
                            <li><a onclick="open_win()" class="cursor">Email to a friend</a></li>
                          	<li><a onclick="open_win1()" class="cursor">Feedback/request content</a></li>
                        </ul>
                  </div>
      </div>
           		<div class="bottomimagelink"><img src="img/pic_big.jpg" alt="Playing Now"/></div>  
            		<div class="new clearfix">
           	    <h2>Recent Content</h2>
                        	<h3>Click an image to select a video</h3>                    
                            <p>&nbsp;&nbsp;</p>
                            <div><img src="img/pic_7.jpg" alt="Video 1" /><img src="img/pic_9.jpg" alt="Video 2" /><img src="img/pic_6.jpg" alt="Video 3" /><img src="img/pic_5.jpg" alt="Video 4" />
               	  	</div>
                    
                    </div>
                    
      			</div>
       
    
       </div>   
             
                </div>
                
      <div id="footer"  class="clearfix">&copy; Auto Trader TV All rights reserved</div>
            
    </div>
    <div id="bottomfooter"></div>
    </body>
    </html>
    haven't validated yet, just trying to get working! - will validate later on... i know maybe i should validate as i go but will do it later.

  • #4
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    It is advisable to validate now, then correct the mistakes, then if the problem persists ask for help.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    We can't reproduce the error at our end from the above posted code, since we can't parse that code and we don't have the images.
    Last edited by abduraooft; 02-27-2009 at 12:02 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    can anyone help please?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jarv View Post
    can anyone help please?
    Will need a link to figure this one out.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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