CSS Forum

**indyryan** · 05-19-2009, 11:25 AM

I am having some serious issues with my site in IE6. I have tried a number of PNG fixes, and none of them are working. I also am unable to get my form to justify correctly in IE6. Suggestions?
thinkcassis.com/merced

html

Code:

<textarea>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Merced Medical Inc.</title>
    <meta name="author" content="cassis">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
    
    <!--[if lt IE 7]>
            <script type="text/javascript" src="js/unitpngfix.js"></script>
    <![endif]-->
        
</head>

<body>
    <div id="container">
        <div id="header">
            <a href="index.html" id="logo" title="Home"><img src="images/logo-white.png" alt="merced"  width="180"></a>
                <form id="form" action="#">
                    <fieldset>
                        <legend>View Catalog:</legend><div class="clear"></div>
                            <p><label for="username">Username:</label> <input type="text" id="username" ></p>
                            <p><label for="password">Password:</label> <input type="password" id="password" ></p>
                            <p class="formsub"><a href="#">Forgot password?</a>&nbsp;|&nbsp;<a href="#">Create account</a>
                            <p class="submit"><input type="submit" value="Log in"></p>
                    </fieldset>
                    <div style="clear:both;"></div>
                </form>
        </div><!--/header-->
        
        <!--end header // begin nav -->
        
        <ul id="menu">
            <li id="home" class="current"><a href="index.html"><b>Home</b></a></li>
            <li id="about"><a href="about.html"><b>About</b></a></li>
            <li id="products"><a href="products.html"><b>Products</b></a></li>
            <li id="ordering"><a href="orderinginfo.html"><b>Ordering Info</b></a></li>
            <li id="contact"><a href="contact.html"><b>Contact</b></a></li>
        </ul>
        
        <!--end nav // begin content -->
        
        <div id="content">
            <div id="index">
                <img src="images/index.jpg" alt="home image" >
                
                <h3>Our philosophy is simple.</h3>
                <p>For the past 10 years, Merced Medical has provided innovative surgical instruments so physicians can stay on the cutting edge of surgical procedures. By working with those physicians to develop our instruments, we’re confident that as procedures change we will have the tools to keep you covered. With state-of-the-art German engineering and our 100% satisfaction guarantee, you can feel confident every time you place an order. </p>
            </div><!--index-->    
        </div><!--/content-->
        
        <div id="footer">&nbsp;
            <p>Box 267, Ingleside, IL, 60041, USA :: Tel. (847) 546-8899 :: Fax (847) 546-8822<br>
            <a href="terms.html">Terms of Use</a> :: <a href="privacy.html">Privacy Policy</a> Copyright ©2009 Merced Medical Inc.</p>
        </div><!--footer-->
        
    </div><!--/container-->
</body>
</html>
</textarea>

css

Code:

body {
    background: white;
    font: normal 13px/16px Helvetica, Arial, sans-serif;
    
}

#container {
    width: 814px;
    text-align: left;
    overflow: hidden;
    margin:auto;
    background-color: transparent;
    background: url(../images/shadow.png) repeat-y #999999;
    margin:auto;
    position: relative;}
    
/*********************
    header
********************/
#header {
    height: 130px;
    overflow: hidden;
}

#header #logo {
    position: absolute;
    top:40px;
    left: 40px;
}

/*********************
    form-home
********************/

#form {
    float:right;
    position: relative;
    margin: 5px 10px 0px 0px;
    width:200px;
}

label {
    width: 50px;
    float: left;
    text-align: right;
    position: relative;
    margin: 2px 15px 0px 8px;
    display: block;
    font-size: 9pt;
    line-height: 14pt;
    color: #333;
}

input {
    color: #333;
    background: url(../images/formbg.gif) repeat-x left top;
    border: 1px solid black;
    margin: 5px 0px 0px 0px;
    width: 100px;
}

.submit input
{
    cursor:pointer;
    border:outset 1px #ccc;
    background:#999;
    padding: 1px 2px;
    background:url(../images/formbg.gif) repeat-x left top;
    margin: 5px 0px 5px 74px;
    width: 50px;
}

fieldset {
    border: 1px solid #ccc;
    width: 190px;
    margin-top:5px;
    background-color: white;
}

legend {
    color: #333;
    background:url(../images/formbg.gif) repeat-x left top;
    padding: 2px 6px;
    margin-left: 6px;
    border:outset 1px #ccc;
    font-size: 9pt;
}

#form .formsub {
    margin-left: 8px;
    font-size: 8.5px;
}

#form .formsub a {
    color: #333;
}

#form .formsub a:hover {
    color: #221e72;
}

/*********************
    navigation
********************/    

#menu {
    padding:0; 
    margin:0 0 0 320px; 
    list-style:none; 
    height: 40px; 
    background:url(../images/ulback.gif) repeat-x;
    
}

#menu li {
    float:left;
    margin-right:-1px;
    
}

#menu li a {
    display:block; 
    height:40px; 
    line-height:40px; 
    padding:0 20px 0 0; 
    float:left; 
    color:#fff; 
    text-decoration:none;
}

#menu li.current a{
    
    background:url(../images/new_tab_a.png ) no-repeat right bottom; 
}

#menu li.current b{
    background:url(../images/new_tab_b.png) no-repeat left bottom; 
    color:#221e72; 
    text-decoration:none;
    line-height: 50px;
}

#menu li a b {
    display:block; 
    height:40px; 
    float:left; 
    padding:0 0 0 20px; 
    cursor:pointer;
}

#menu li a, 
.home #menu li#home a,
.about #menu li#about a,
.products #menu li#products a,
.ordering #menu li#ordering a,
.contact #menu li#contact a {
    background:url(../images/new_tab_a_down.png ) no-repeat right bottom; 
}

#menu li b,
.home #menu li#home b,
.about #menu li#about b,
.products #menu li#products b,
.ordering #menu li#ordering b,
.contact #menu li#contact b {
    background:url(../images/new_tab_b_down.png) no-repeat left bottom; 
    color: #333; 
    text-decoration:none;
    line-height: 50px;
}

/*********************
    contents
********************/

#content {
    min-height: 300px;
    overflow: hidden;
}

#content img.int { 
    margin-left: 7px;
}

#content #about {
    margin-left:7px;
    width: 720px;
    background-color: white;

    padding: 0px 20px 10px 60px;
}

#content #about p {
    max-width: 650px;
    
}

#content #index img {
    float: left;
    padding-right: 20px;
}

#content #index {
    margin-left:7px;
    width: 800px;
    height: 278px;
    background-color: white;
}

#content h3,
#content #index h3 {
    color: #221e72;
    font-size: 16px;
    font-weight: bold;
    padding-top: 20px;
    margin-bottom: 7px;
}

#content p,
#content #index p {
    color: black;
    font-size: 12px;
    line-height: 17px;
    margin-bottom:8px;
    max-width: 740px;
}

/*********************
    footer
********************/

#footer {
    height: 100%;
    background: url(../images/footer.png) no-repeat bottom left;
    text-align: center;
    padding-left: 7px;
    width: 814px;
}

#footer p {
    font-size: 10px;
    line-height: 13px;
    padding-bottom: 18px;
    letter-spacing: .05em;
    color: #333;
}

#footer a {
    color: #221e72;
}

/*********************
    clear
********************/

.clear {
    clear: both;
}

**angele803** · 05-19-2009, 11:35 AM

Im not sure about the png thing yet, but I noticed that you have two clearing divs inside the form. I don't think you need the first one at all, and I think you need to put the second one outside of the closing form tag.

**LadynRed** · 05-19-2009, 12:04 PM

None of the usual PNG fix filters will work on a REPEATING PNG because IE6 simply cannot support it. However, IEPngFix version 2.0 uses javascript that DOES work for repeating PNGs - http://www.twinhelix.com

**indyryan** · 05-19-2009, 03:44 PM

Quote:

Originally Posted by angele803

I noticed that you have two clearing divs inside the form. I don't think you need the first one at all, and I think you need to put the second one outside of the closing form tag.

I tried removing the first clearing div, and everything went crazy. If I remove the second one, nothing happens, so I took it out.

**indyryan** · 05-19-2009, 03:45 PM

thanks LadynRed

**indyryan** · 05-19-2009, 05:35 PM

things are still pretty squirrely. can someone help?

**larryatwt** · 05-19-2009, 05:48 PM

Double margin problem with IE6? I am not good at CSS. But I did see some of your codes (using float and margin in the same direction) in CSS might have double margin problems in IE6.

**LadynRed** · 05-19-2009, 09:58 PM

Quote:

But I did see some of your codes (using float and margin in the same direction) in CSS might have double margin problems in IE6.

Absolutely right ! You need conditional comments and a separate CSS file containing JUST the 'fixes' for IE6. To stop this bug, you need to add display:inline on the floated element with the margin in the same direction as the float.

**indyryan** · 05-20-2009, 11:20 AM

Quote:

Originally Posted by LadynRed

on the floated element with the margin in the same direction as the float.

so..... float:left margin-left; Xpx?

**LadynRed** · 05-20-2009, 11:38 AM

float:left with margin-left will cause IE6 do DOUBLE the margin widths. So, to stop that you need the display:inline on that element, but you don't want to add it to your main CSS file for all browsers to read, you need conditional comments and a SEPARATE file that ONLY IE will read.

**indyryan** · 05-20-2009, 12:15 PM

what is the solution for creating a 'margin' then on a floated object?

*edit* display inline does some funky things

**LadynRed** · 05-20-2009, 12:29 PM

Quote:

*edit* display inline does some funky things

I already told you, you need a SEPARATE CSS file JUST for IE and you need to call that file using conditional comments. http://www.quirksmode.org/css/condcom.html

display:inline WILL do funky things IF you put it into your main css file, you should NOT put it there.

**indyryan** · 05-20-2009, 01:09 PM

Ok, thanks. It's fine now.

is there any reason why my form shouldn't be justifying in IE?

Code:

/*********************
    form-home
********************/

#form {
    float:left;
    position: relative;
    display: inline;
    margin: 5px 40px 0px 380px;

}

label {
    width: 60px;
    float: left;
    text-align: right;
    position: relative;
    margin: 2px 15px 0px 8px;
    display: inline;
    font-size: 9pt;
    line-height: 14pt;
    color: #333;
}

input {
    color: #333;
    background: url(../images/formbg.gif) repeat-x left top;
    border: 1px solid black;
    text-align: left;
    margin: 5px 0px 0px 0px;
    width: 90px;
}

.submit input
{
    cursor:pointer;
    border:outset 1px #ccc;
    background:#999;
    padding: 1px 2px;
    background:url(../images/formbg.gif) repeat-x left top;
    margin: 3px 0px 5px 74px;
    width: 50px;
    text-align: center;
}

fieldset {
    border: 1px solid #ccc;
    width: 182px;
    margin-top:5px;
    background-color: white;
}

#form p.form {
    margin: 6px 0px 0px 6px;
    color: #333;
    font-size: 9pt;
    background:url(../images/formbg.gif) repeat-x left top;
    border:outset 1px #ccc;
    padding: 2px 6px;
    width: 155px;
    text-align: center;
}

HTML

Code:

<form id="form" action="#">
                    <fieldset>
                        <p class="form">View Catalog:</p><div class="clear"></div>
                            <p><label for="username">Username:</label> <input type="text" id="username" ></p>
                            <p><label for="password">Password:</label> <input type="password" id="password" ></p>
                            <p class="formsub"><a href="#">Forgot password?</a>&nbsp;|&nbsp;<a href="#">Create account</a>
                            <p class="submit"><input type="submit" value="Log in"></p>
                    </fieldset>
                </form>

thanks, indyryan