...

View Full Version : IE layout help please



jarv
02-26-2009, 02:19 PM
Firefox:
http://www.mutecms.com/crap/pic2.jpg

IE:
http://www.mutecms.com/crap/pic1.jpg

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




.new {

margin:10px 0px 0px 0px;
background:#22a2d6;
height:170px;
width:478px;
}

snowieken
02-26-2009, 02:25 PM
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?

jarv
02-26-2009, 02:35 PM
hi thanks,

here is my cSS 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:


<!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,s tatus=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.

Donkey
02-26-2009, 02:53 PM
It is advisable to validate now, then correct the mistakes, then if the problem persists ask for help.

abduraooft
02-26-2009, 03:02 PM
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.

jarv
02-27-2009, 12:49 PM
can anyone help please?

Excavator
02-27-2009, 05:40 PM
can anyone help please?

Will need a link to figure this one out.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum