PDA

View Full Version : float issue in IE6


Shemo
March 2nd, 2010, 02:37
for some reason, my contact form isn't floating properly and it's dropping down below an image..works fine in FF 3.6 & Chrome, but not stinking IE6...

http://pazrt.com/test/contact-pennsylvania-zombie-response-team



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Contact the PAZRT- Pennsylvania Zombie Response Team</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Pennsylvania Zombie Response Team" />
<meta name="copyright" content='All Copyright Pennsylvania Zombie Response Team, all rights reserved' />
<meta name="description" content="PAZRT- Pennsylvania Zombie Response Team is an elite group of people dedicated to the preservation of the human race in the face of a looming zombie outbreak" />
<meta name="keywords" content="pazrt, zrt, pennsylvania zombie response team, pennsylvania zrt, zombies, zombie response team, guns, knives, survival" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<!-- This is the main div -->
<div id="wrapper">
<!-- Start logo coding -->
<div id="logo">
<img src="images/logo.png" alt="main logo" height="168px" style="width: 100%" />
</div>
<!-- Start navigation bar coding -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-pennsylvania-zombie-response-team">About Us</a></li>
<li><a href="http://www.pazrt.com/forum">Forums</a></li>
<li><a href="http://www.pazrt.com/gallery/main.php">Gallery</a></li>
<li><a href="http://wiki.pazrt.com">Wiki</a></li>
<li><a href="http://www.pazrt.com/forum/usermap.php">Member Map</a></li>
<li><a href="#">Social<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.twitter.com/pazrt">Twitter</a></li>
<li><a href="http://www.facebook.com/pages/Pennsylvania-Zombie-Response-Team/10150095905020602">Facebook</a></li>
<li><a href="http://www.youtube.com/pazrt">Youtube</a></li>
</ul>
<!-- End Links drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="selected"><a href="contact-pennsylvania-zombie-response-team">Contact Us</a></li>
</ul>
</div>
<!-- Start contact content coding -->
<div id="contact">
<img src="images/leftlogo.png" alt="left logo" width="440px" style="float: left" />
<form name="contact" enctype="multipart/form-data" action="contact.php" method="post" onsubmit="return validate_fields(this)">
<ul>
<li>Name:<br />
<input type="text" size="30" name="name" id="name" /></li>
<li><br /></li>
<li>Email:<br />
<input type="text" size="30" name="email" id="email" /></li>
<li><br /></li>
<li>Problem:<br />
<select name="problem">
<option value="website">Website Problem</option>
<option value="forum">Forum Problem</option>
<option value="misc">Miscellaneous</option>
</select></li>
<li><br /></li>
<li>Comments:<br />
<textarea name="comments" id="comments" rows="5" cols="45"></textarea></li>
<li><br /></li>
<li><input type="submit" name="submit" value="Submit" />
&nbsp;
<input type="reset" name="reset" value="Reset" /></li>
</ul>
</form>

</div>
<!-- Start footer coding -->
<div id="footer">
<img src="images/footer.png" alt="footer logo" width="1000px" />
</div>
</div>
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script type="text/javascript">try { var pageTracker = _gat._getTracker("UA-10934935-1"); pageTracker._trackPageview(); } catch(err) {}</script>
</body>
</html>



*
{
margin: 0;
padding: 0;
}

body, body a:link
{
background-color: #666;
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
}

#wrapper
{
width: 62.5em;
background-color: #000;
margin: 0 auto;
}

#logo
{
background-color: #000;
width: 100%;
position: relative;
margin: 0;
padding: 0;
}

#navigation
{
background-color: #660000;
width: 62.5em;
height: 1.6em;
margin: 0 auto;
padding: 0;
}

#navigation ul
{
list-style-type: none;
}

#navigation li
{
float: left;
position: relative;
}

#navigation a, #navigation a:link, #navigation a:visited
{
text-decoration: none;
font-family: Verdana, Geneva, Arial, Sans-Serif;
font-size: 80%;
color: #FFF;
background-color: #660000;
display: block;
height: 2em;
width: 8em;
border-right: solid 1px #CCC;
text-align: center;
line-height: 2em;
outline-style: none;
}

#navigation a:hover, #navigation a:active, #navigation li.selected a:link, #navigation li.selected a:visited
{
background-color: #333;
color: #FFF;
}

#navigation li ul
{
position: absolute;
z-index: 100;
visibility: hidden;
}

#navigation li:hover ul, #navigation a:hover ul
{
visibility: visible;
top: 1.6em;
left: 0;
}

#navigation li:hover ul li a
{
background-color: #333;
color: #FFF;
text-align: left;
display: block;
width: 10em;
padding: 0 0 0 1em;
height: auto;
}

#navigation li:hover ul li a:hover
{
background-color: #990000;
color: #FFF;
}

/* IE6 Hack */
#navigation li:hover ul, #navigation li a:hover ul
{
visibility: visible;
top: 1.6em;
left: 0;
}

/* IE6 Hack */
#navigation li:hover ul li a, #navigation li a:hover ul li a
{
background-color: #333;
color: #FFF;
text-align: left;
display: block;
width: 10em;
padding: 0 0 0 0.5em;
height: auto;
}

/* IE6 Hack */
#navigation li:hover ul li a:hover, #navigation li a:hover ul li a:hover
{
background-color: #660000;
color: #FFF;
}

/* IE6 Hack */
#navigation table
{
margin: -1px;
border-collapse: collapse;
position: absolute;
top: 0.5em;
left: 0;
z-index: 100;
}

#maincontent
{
background-color: #000;
color: #FFF;
width: 62.5em;
margin: 0;
padding: 0;
}

#maincontent a:link
{
background-color: #000;
color: #CC0000;
outline-style: none;
}

#contact, #contact ul
{
background-color: #000;
color: #FFF;
width: 62.5em;
margin: 0;
padding: 0;
list-style-type: none;
}

#footer, #footer a:link, #footer a:visited
{
width: 62.5em;
background-color: #000;
color: #CC0000;
margin: 0 auto;
text-align: center;
text-decoration: none;
outline-style: none;
}

#footer a:hover
{
text-decoration: underline;
outline-style: none;
}
Shemo
March 10th, 2010, 17:15
the url has been changed to this:
http://www.pazrt.com/contact-pennsylvania-zombie-response-team

I'm still having the problem in IE6
iBrightDev
March 10th, 2010, 17:26
why are you floating the image to the left. set it as a background on the content area, and then set a min-height to the content area, and then you can put yout content wherever without any issues.
Shemo
March 11th, 2010, 18:20
why are you floating the image to the left. set it as a background on the content area, and then set a min-height to the content area, and then you can put yout content wherever without any issues.

I cannot for the life of me get it to work. =(
Shemo
March 11th, 2010, 18:53
I fixed the issue by adding a display: inline to the contact div. thanks all.
DarkBlood
April 14th, 2010, 21:40
You do realize google doesn't support IE6, right?
themoose
April 15th, 2010, 06:35
You do realize google doesn't support IE6, right?

An odd way of putting it but I agree. Don't support IE6 unless you really need to. If the content displays, then that's good enough.

Also, put up a notice saying that their browser is old & to upgrade.

Something like this (there are others, this is the first on google)
http://shapeshed.github.com/ie6-notice/
johnnw
June 29th, 2010, 04:57
January 29, 2010, Google announced it will begin phasing out support for Internet Explorer 6 web browser. Beginning March 1, 2010, Google's Web based applications and services will stop working well with Internet Explorer 6. YouTube announced that it will no longer support IE6 beginning on March 13, 2010. Many major websites are now trying to discourage use of the web browser, thus far without success.
dvdv882
July 20th, 2010, 02:55
I know there are issues with the float in IE6

I have isolated where the code is in the CSS stylesheet that controls this, but I don't know how to alter it to fix the issue.

Here is the page link:
http://www.orovalleyhomes4sale.com/o...-lambert-lane/

It formats just fine in FireFox, but IE6 puts a break after a paragraph until the end of the image. You will see.

here is the css:

/* Float fix */
.contenttext{overflow:hidden;}
* html .contenttext{height: 1px; overflow:visible;}
* html .contenttext p{overflow:hidden;width:99%}

If I comment out the last line it fixes the issue for that post

/* Float fix */
.contenttext{overflow:hidden;}
* html .contenttext{height: 1px; overflow:visible;}
/** html .contenttext p{overflow:hidden;width:99%} */
DarkBlood
July 26th, 2010, 23:34
overflow has a default of visible, why have it? >.>

btw, that link has ... in it.