...

View Full Version : how can i fix alignment problems with IE?



edub629
12-15-2009, 07:47 PM
http://dev.edubnetwork.com/scottscooling/

uname scotts
pword coolingfans

Looks fine in Safari and Firefox, in IE everything shifts around a bit.. but the biggest issue is the buttons dont line up with the welcome_box background image as they should.

the source


<!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-US">
<head>
<title>Scotts Cooling Fans
</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
<meta name="keywords" content="The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible." />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="container">

<div id="header">

<div id="boxtab-blue">
<ul>
<li class="first" ><a href="?section=fans"><span>Cooling Fans</span></a></li>
<li ><a href="?section=misc"><span>Miscellaneous Parts</span></a></li>
<li ><a href="?section=company_profile"><span>Company Profile</span></a></li>

<li class="last" ><a href="?section=contact"><span>Contact</span></a></li>
</ul>
</div>
</div>

<div id="colmask">

<div id="homecontent">
<div id="welcomebox">
<div id="welcometop"></div>
<div id="welcomebottom">
<ul class="cssmenu">

<li class="volt6"><a href="?section=fans&amp;page=6v" title="6 Volt"><span class="displace">6 Volt</span></a></li>
<li class="volt12"><a href="?section=fans&amp;page=12v" title="12 Volt"><span class="displace">12 Volt</span></a></li>
<li class="volt24"><a href="?section=fans&amp;page=24v" title="24 Volt"><span class="displace">24 Volt</span></a></li>
</ul>
</div>
</div>

</div>


</div>

<div id="footer">
<ul>
<li><a href="?section=home">Home</a></li>
<li><a href="?section=fans">Products</a></li>
<li><a href="?section=company_profile">About</a></li>
<li><a href="?section=contact">Contact</a></li>
<li><a href="?section=contact&amp;page=order_form">Order</a></li>

</ul>
<p>Scotts Cooling Fans | <strong>1 (800) 272 - FANS (3267)</strong> | <a href="mailto:contact@scottscoolingfans.com">contact@scottscoolingfans.com</a></p>

</div>

</div>

</body>
</html>




the CSS


/* */
/* General styles */
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
min-width:1000px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
background-color: #FF0;
/*background-image: url(images/bg3.png);*/
background-attachment: fixed;
background-repeat: repeat-x;
background-position: left top;
font-family: Arial, Helvetica, sans-serif;
}
a {
color:#369;
}
a:hover {
color:#ff0000;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
/* container style and settings */
#container {
width: 100%;
margin: 0px auto;
float: none;
position: relative;
}
/* Header styles */
#header {
clear: both;
width: 100%;
margin-top: -15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(images/headerlogo4.png);
background-repeat: no-repeat;
background-position: center top;
}

/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/*no quirks mode divs*/
#colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
background:#FFF; /*left column bg color */
}
#colmid {
float:left;
width:200%;
position:relative;
left:200px;
border-left: 1px dashed #bbb;
min-height: 400px;
background-color: #FFF; /* Centre column background colour */
background-image: url(images/contentbg.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
#colright {
float:left;
width:100%;
position:relative;
left:50%;
margin-left:-400px;
background:#FFF; /* Right column background colour */
border-left: 1px dashed #bbb;
min-height: 400px;
}
#col1wrap {
float:right;
width:50%;
position:relative;
right:100%;

}
#col1pad {
margin:0 15px 0 415px;
overflow:hidden;
}
#col1 {
width:100%;
overflow:hidden;
padding-bottom: 10px;

}
#col2 {
float:left;
width:180px;
position:relative;
margin-left:-50%;
left:215px;
overflow:hidden;
}
#col3 {
float:left;
width:170px;
position:relative;
left:15px;
overflow:hidden;

}
/*Left-Column Styles*/
#leftnav {
margin:0 auto;
}

/* Footer styles */
#footer a:hover {
color:#fff;
text-decoration:none;
}
#footer {
clear:both;
float:left;
width:100%;
background-image: url(images/footerbg.png);
background-repeat: repeat-x;
background-position: top;
}
#footer p {
margin:0;
text-align: center;
color: #FFF;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}


#footer ul {
list-style: none;
padding: 0;
position: relative;
text-align: center;
}
#footer li {
margin: 0;
padding: 10px;
display: inline;
list-style-type: none;
}

/* NEW TAB STYLE*/


/* -------------------------------------------------- */
/* boxtab-blue */
/* -------------------------------------------------- */
#boxtab-blue {
padding-top: 175px; /* header size / distance from top */
background: url(images/tabbg6.png) bottom repeat-x;
width:100%;
overflow:hidden;
font-family:Verdana, Geneva, sans-serif;
position: relative;
}
#boxtab-blue ul {
float:left;
margin:0;
padding:0;
list-style:none;
position:relative;
left:50%;
text-align:center;
}
#boxtab-blue ul li {
display:block;
float:left;
list-style:none;
margin:20px 0 0 0;
padding:0;
position:relative;
right:50%;
}
#boxtab-blue ul li a {
display:block;
float:left;
margin:0 1px;
padding:5px 10px;
background:#fff;
text-decoration:none;
color:#000;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
position:relative;
bottom:1px;
}
#boxtab-blue ul li a:hover {
background:#369;
color:#fff;
}
#boxtab-blue ul li.active {
margin-top:10px;
}
#boxtab-blue ul li.active a,
#boxtab-blue ul li.active a:hover {
position:relative;
bottom:0;
padding:10px;
background:#fff;
color:#000;
font-weight:bold;
}
/* homepage styles */
/* homepage styles */
#colmask #homecontent {
background-color: #FF0;
height: 430px;
width: auto;
}
#colmask #homecontent img{
margin-top: -8px;
padding: 0;

}

/*
* CSS ROLLOVER SETUP
*/
ul.cssmenu {
list-style: none;
padding: 0px;
margin-left: 33px;
}

.displace {
position: absolute;
left: -5000px;
}

ul.cssmenu li {
float: left;
}

ul.cssmenu li a {
display: block;
width: 245px;
height: 238px;
background: url('images/home_sprite.png');
}

/*
* Normal Links
*/
ul.cssmenu li.volt6 a {
background-position: 0 0;
}

ul.cssmenu li.volt12 a {
background-position: -245px 0;
}

ul.cssmenu li.volt24 a {
background-position: -490px 0;
}

/*
* Hover Links
*/
ul.cssmenu li.volt6 a:hover {
background-position: 0 -238px;
}

ul.cssmenu li.volt12 a:hover {
background-position: -245px -238px;
}

ul.cssmenu li.volt24 a:hover {
background-position: -490px -238px;
}

/*
* Clicked Links
*/
ul.cssmenu li.volt6 a:active {
background-position: 0 -476px;
}

ul.cssmenu li.volt12 a:active {
background-position: -245px -476px;
}

ul.cssmenu li.volt24 a:active {
background-position: -490px -476px;
}


#welcomebox {
background-image: url(images/welcome_box2.png);
background-repeat: no-repeat;
height: 430px;
width: 800px;
margin: 0px auto;
}
#welcomebottom {
margin-top: -14px;
height: 282px;
width: 800px;

}
#welcometop {
height: 148px;
width: 800px;

}



and as a side note, but less important... any suggestion on cleaning up the code a bit?

Jazzo
12-16-2009, 03:08 AM
Try using relative margins instead of absolute margins. Ems are always good.

edub629
12-16-2009, 05:00 AM
i dont see any absolute positioning in my css... at least related div that is out of place. also, i cant use ems because the image is not in ems, unless there is a way to convert. did you look at the site before answering the question? :-/

2 other people i had look at it, had no problems viewing it. perhaps its a specific version of ie? is it just my version of ie and the ie renderer addon i have?

edub629
12-18-2009, 02:30 AM
hrmm.. seems like the problem fixed itself.. anyone else see what im talking about?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum