IE6 displays this code as crap and not how it should look.

Discussion in 'CSS' started by woocha, Jun 15, 2008.

0
  1. #1
    Hi Guys...

    I need some help here on my CSS skills. I have this bit of HTML and CSS and it looks perfect in IE7, FireFox, and Opera. However it doesn't behave right in IE6. The regions lapse over one another when the browser is minimized and the whole thing should float in the middle and be no larger than 800 pixels wide. Doers anyone have any suggestions?

    Thanks guys

    <!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>Title Here</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">

body {
background-color: #d7d6d3;
}

.wrapper{
margin: 5px auto 20px;
max-width: 800px;
min-width: 500px;
border: solid 1px #000;
}
.left {
float: left;
padding: 0px 10px 0px 0px;
width: 90px;
border: solid 1px red;
}
.middle {
top: 10px;
margin-left: 100px;
margin-right: 100px;
height: 400px;
}
.right {
float: right;
padding: 0px 0px 0px 10px;
width: 90px;
border: solid 1px red;
height: 100%;
}
.footer	{ 
clear: both; 
width: inherit;
padding: 5px 5px 5px 5px;
text-align: center;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small;
}
.footer a:link , 
.footer a:visited
{
text-transform: uppercase;
color: #666666;
}
.footer a:hover , .footer a:active
{
color: #ffa800;
}
a:hover	{
color: #BA1D1D;
text-decoration: underline;
}
a:active
{
color: #BA1D1D;
}
a:link	{
color: #BA1D1D; text-decoration: none;
}
a:visited
{
color: #BA1D1D; text-decoration: none; 
}




</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="left">
Navigation - 1 <br/>
Navigation - 2 <br/>
Navigation - 3 <br/>
Navigation - 4 <br/>
Navigation - 5 <br/>
Navigation - 6 <br/>
Navigation - 7 <br/>
Navigation - 8 <br/>
</div>
<div class="right">
Navigation - 1 <br/>
Navigation - 2 <br/>
Navigation - 3 <br/>
Navigation - 4 <br/>
Navigation - 5 <br/>
Navigation - 6 <br/>
Navigation - 7 <br/>
Navigation - 8 <br/>
</div>
<div class="middle">
This works great in IE7, Firefox 2+, and Opera....Can't center the three columns on the 

screen in I E 6 thought.  Any thoughts??
</div>
</div>
</div>


<hr> 
	<div class="footer">
	<p>
        </p>
	<p>
      <font size=1>
         &copy;Test Co. LLC. :: 2007 - 2012
      </font>
	</p>
	</div>

</body>
</html>
    Code (markup):
     
    woocha, Jun 15, 2008 IP
  2. BANAGO

    BANAGO Active Member

    Messages:
    456
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #2
    IE6 does not recognize max-width and min-width. You should add some hack for it where you set a value for width. Is that clear? Let us know.
     
    BANAGO, Jun 15, 2008 IP
  3. woocha

    woocha Peon

    Messages:
    107
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I will try that when I get bak in the office...Thanks for the tip:)
     
    woocha, Jun 15, 2008 IP
  4. BANAGO

    BANAGO Active Member

    Messages:
    456
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #4
    Welcome! If you need further help, let me know.
     
    BANAGO, Jun 15, 2008 IP
  5. woocha

    woocha Peon

    Messages:
    107
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi BANAGO,

    I tried out that tip, but then page doesn't behave properly when the browser is minimized. I tried to make it so that when the browser is being positioned by a user the middle section of the page would be resized and adjusted to a minimum of 500px....is there a way to keep that sort of function?

    I know I can, but I really dont want to get involved in browser detecting.
     
    woocha, Jun 15, 2008 IP
  6. nyxano

    nyxano Peon

    Messages:
    417
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Is my understanding correctly that you want the site to be a percentage of the width of the browser window UNLESS the window is narrower than 500 pixels and if so, keep the site at 500 pixels?

    If I am correct, you could do something like:

    <body>
<img src="spacer.gif" height="1" width="500" align="center">
<div class="wrapper">
    Code (markup):
    This will force the browser window to not go narrower than 500 pixels unless it displays a horizontal scroll bar.

    Spacer.gif can just be a 1x1 pixel image either completely transparent or the same color as your page background.

    Probably not the most efficient or technical way of doing it but it should do the trick.
     
    nyxano, Jun 15, 2008 IP