PDA

Click to See Complete Forum and Search --> : IE 6 Div layout Glitch

bdavey311
07-29-2008, 02:32 PM
Hello peeps,

http://www.cortrightcapital.org/dev/

Is viewed awesome in every browser but IE6 and I need some help and advice to help resolve this issue. I really got nothing and want to slap IE in the face!

Here is the 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=iso-8859-1" />
<meta name="Description" content="Cortright Capital.com - Located in Denver, CO." />
<meta name="Keywords" content="cortright capital" />
<meta name="copyright" content="&copy; 2008 Cortright Capital">
<link rel="shortcut icon" href="images/general/favicon.ico" />
<title>Welcome To Cortight Capital.com | Home</title>
<link href="includes/cortrightcapital.css" rel="stylesheet" type="text/css" />
</head>


<div align="center">
<div id="container" align="center">

<div id="leftcolumn">
<div id="headerlogo">
<img src="images/header/logo.jpg" alt="Cortright Capital Logo" />
</div><!--END headerlogo-->

<div id="navigation" align="left">
<div id="link1">
<!--#include virtual="includes/navmenu.inc" -->
</div><!--END link1-->
</div><!--END navigation-->

<div id="contact">
<img src="images/general/contact.jpg" alt="Cortright Capital Contact Information" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="21,26,220,52" href="mailto:info@cortrightcapital.com" /><area shape="rect" coords="19,25,221,53" href="#" /></map>
</div><!--END contact-->

</div><!--END leftcolumn-->

<div id="rightcolumn">
<div id="headerimage">
<img src="images/header/home.jpg" alt="Cortright Capital Home - Downtown Denver" />
</div><!--END headerimage-->

<div id="body" align="left">
<h1>Welcome to Cortright Capital</h1>
<p class="bodycopy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu nisi a purus porta pellentesque. Morbi eros tortor, dapibus et, mattis sed, dictum vitae, massa. Donec nulla. Curabitur malesuada mattis elit. Praesent non magna sit amet massa volutpat tempus. Etiam a risus a mi semper ultrices. Aliquam bibendum, nunc tempor ullamcorper feugiat, quam lorem mattis metus, eu fermentum libero arcu eget urna. Fusce consectetuer fringilla risus. Donec velit urna, convallis id, sollicitudin eget, viverra non, arcu. Donec blandit posuere nisi. Cras ut diam. </p>
</div><!--END body-->

<div id="pressreleases">
<img src="images/general/pressrelease.jpg" alt="Cortright Capital Press Releases" />
<p class="pressrelease" align="left">8/1/08 - New Cortright Capital website</p>
<p class="pressrelease" align="left">7/22/08 - Refinance your mortgage</p>
<p class="pressrelease" align="left">7/1/08 - Something else to put here</p>
</div>
<!--END pressreleases-->


</div><!--END rightcolumn-->

<div id="footer">
<div class="footer">
<div id="footerlink1">
<!--#include virtual="includes/footer.inc" -->
</div><!--END footernav1-->
</div><!--END footer-->
</div><!--END footer-->


</div><!--END container-->

</div><!--END center align-->


</body>
</html>


AND now the CSS:

/* CSS Document */



/*-------------< Body Margins >-------------*/



body,html {

background:#EEE url(../images/general/bg.jpg) repeat-y center;
margin: 0px;
padding: 0px;
}


body {
min-width:809px;
}


/*-------------< Body Margins >-------------*/



/*----------------< Fonts >-----------------*/

.bodycopy {

font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
color: #444;
line-height: 17px;
padding:0px 20px 20px 30px;
}

h1 {
color:#bc0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
margin: 25px 20px 20px 30px;
padding: 0px;
}

.pressrelease {
color:#bc0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
margin: 15px 20px 20px 30px;
padding: 0px;
}



/*----------------< Fonts >-----------------*/



/*----------------< DIV Dimensions >-----------------*/
#container {
width:809px;
margin:0px auto;
}


#leftcolumn {

width:248px;
height:544px;
float:left;

}

#rightcolumn {

width:561px;
min-height:544px;
float:right;
}

#headerlogo {

width:248px;
height:143px;
float:left;
}

#headerimage {

width:561px;
height:143px;
float:right;
}

#body {

width:561px;
float:right;
min-height:230px;

}


#navigation {

margin: 0px;
padding: 0px;
width: 248px;
height:230px;
float: left;

}

#contact {
width:248px;
height:171px;
float: left;
}

#pressreleases {
width:561px;
height:171px;
float: right;
}

/*-------------< Navigation Menu >-------------*/

ul.vert-one{margin:0px;padding:0px;list-style-type:none;display:block;font:15px Arial, Verdana, Helvetica, sans-serif;line-height:32px;width:228px;}

ul.vert-one li{margin:0px;padding:0px;border-top:1px solid #FFF;border-right:1px solid #FFF;}

ul.vert-one li a{display:block;text-decoration:none;color:#FFF;background: url("../images/navigation/nav_off.gif");width:228px;padding-left:20px;}

ul.vert-one li a:hover{background: url("../images/navigation/nav_on.gif"); color:#FFF;}

/* Keeping current state */
#link1 #nav1,#link2 #nav2,#link3 #nav3,#link4 #nav4,#link5 #nav5,#link6 #nav6,#link7 #nav7,#link8 #nav8 {background: url("../images/navigation/nav_on.gif");color:#FFF;padding-left:20px;}
/* Keeping current state */

/*-------------< Navigation Menu >-------------*/




/*-------------< Footer >-------------*/
#footer {

margin: 0px;
height:51px;
width:809px;
clear:both;
padding: 15px 0px 0px 0px;
background: url(../images/general/footerbg.jpg);
}

.footer , .footer a:link, .footer a:visited {

font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
font-weight: normal;
text-align: center;

}


.footer a:hover, .footer a:active {

font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
font-weight: normal;
text-align: center;
text-decoration: underline;


}
/* Keeping current state */
#footerlink1 #footernav1,#footerlink2 #footernav2,#footerlink3 #footernav3,#footerlink4 #footernav4,#footerlink5 #footernav5,#footerlink6 #footernav6,#footerlink7 #footernav7,#footerlink8 #footernav8 {color: #FFF; text-decoration: underline;}
/* Keeping current state */


/*-------------< Footer >-------------*/




/*----------<Hyper Links>-----------*/



a:link, a:visited {

font-weight: bold;
text-decoration: none;
color: #666666;

}

a:hover, a:active {

text-decoration: underline;

}

/*----------<Hyper Links>-----------*/


Thanks in advance for any help or advice. Love to all.

Brian
KDLA
07-29-2008, 03:33 PM
IE6 adds about 3px to floated items. Add a conditional comment to your CSS which decreases the width of one of your divs (either the left or right) by 3px and that should handle it.
bdavey311
07-29-2008, 05:47 PM
Noob clarification just to see which is the best way to go. Never used a conditional comment.

Would I put it in the HTML file like so?

<link href="includes/cortrightcapital.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="includes/cortrightcapitalIE.css" rel="stylesheet" type="text/css" />
<![endif]-->

If the only thing I'm changing in the css is the width of the one of my two columns, is this the way to go?

Thanks a lot for your help, just a couple more steps.

Brian
KDLA
07-29-2008, 08:47 PM
This should help you out: http://www.positioniseverything.net/articles/multiIE.html
bdavey311
07-29-2008, 08:53 PM
What apparently my main issue was including clear: both in my css for DIV tags. I still use the conditional because IE6 had some other glitches so thanks a ton!