The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> IE6 Float problems
superjoepsu
post Nov 1 2007, 10:48 AM
Post #1





Group: Members
Posts: 2
Joined: 1-November 07
Member No.: 4,198
So I've been working on a layout that is giving me problems displaying correctly in IE6. It works perfectly in Firefox, IE7, and Safari. Basically I have a 3 column layout, with the left column being used for side navigation. However, when I use the "display: block" element, it is moving my left column to below the content level for my other two columns in IE6. The other browsers are perfect. If I remove the "display: block" element, it lines up correctly with the other two, so I'm assuming that's where the problem is.

I have pasted the code below. Please note that there are styles below that are probably not needed for my example. This code is more of a bare-bones look at a much larger page.

Thank you for any help!

HTML
<!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" />
<title>None</title>
<style>

html, body {
margin: 10px;
padding: 0px;
background-color: #046D87;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #004185;
}

p {
padding: 0px;
margin: 0px;
color: #004185;
}

h2 {
font-size: 16px;
color: #004185;
margin: 0px 0px 1.0em;
p\osition: relative;
font-weight: bold;
line-height: 2em;
}

/********** Layout **********/

#container {
background-color: #FFFFFF;
width: 970px;
margin-left: auto;
margin-right: auto;
p\osition: relative;
}

#center {
background: #FFFFFF;
background-image: url(../images/content.gif);
background-repeat: no-repeat;
background-position: top;
min-height: 515px;
height: auto !important;
height: 515px;
p\osition: relative;
}

#leftnav ul {
list-style: none;
margin: 0;
padding: 0;
}

#leftnav {
margin: 0 770px 0 10px;
p\osition: relative;
border-style: solid solid none solid;
border-color: #0067EB;
border-size: 1px;
border-width: 1px;
}

#leftnav-top {
border: none;
color: #000000;
background-image: url(../images/navboxtop.gif);
background-position: top;
background-repeat: no-repeat;
height: 8px;
margin-left: 10px;
}

#leftnav-content {
padding: 0 10px 10px 10px;
border: none;
color: #000000;
background-image: url(../images/navboxbottom.gif);
background-position: bottom;
margin-left: 10px;
}

#content {
float: right;
width: 770px;
p\osition: relative;
}

#rightnav {
margin-left: 570px;
p\osition: relative;
}

#rightnav-top {
border: none;
color: #000000;
background-image: url(../images/navboxtop.gif);
background-position: top;
background-repeat: no-repeat;
height: 8px;
margin-right: 10px;
}

#rightmain-top {
border: none;
color: #000000;
background-image: url(../images/features.gif);
background-position: top;
background-repeat: no-repeat;
height: 27px;
margin-right: 10px;
}

#rightnav-content {
padding: 10px;
border: none;
color: #000000;
background-image: url(../images/navboxbottom.gif);
background-position: bottom;
margin-right: 10px;
}

#main {
float: left;
width: 570px;
p\osition: relative;
}

#main-top {
border: none;
background-image: url(../images/mainboxtop.gif);
background-position: top;
background-repeat: no-repeat;
height: 8px;
margin-left: 10px;
margin-right: 10px;
}

#main-content {
padding: 0 20px 20px 20px;
border: none;
background-image: url(../images/mainboxbottom.gif);
background-position: bottom;
color: #000000;
margin-left: 10px;
margin-right: 10px;
min-height: 350px;
height: auto !important;
height: 350px;
}

#main-2col {
float: left;
width: 770px;
p\osition: relative;
}

#main-2col-top {
border: none;
background-image: url(../images/main2coltop.gif);
background-position: top;
background-repeat: no-repeat;
height: 8px;
margin-left: 10px;
margin-right: 10px;
}

#main-2col-content {
padding: 0 10px 10px 10px;
border: none;
background-image: url(../images/main2colbottom.gif);
background-position: bottom;
color: #000000;
margin-left: 10px;
margin-right: 10px;
min-height: 350px;
height: auto !important;
height: 350px;
}

#main-2boxes {
border: none;
margin-left: 10px;
margin-right: 10px;
}

#main-left {
float: left;
border: none;
width: 265px;
}

#main-left-top {
border: none;
background-image: url(../images/main2boxtop.gif);
background-repeat: no-repeat;
background-position: top;
height: 8px;
}

#main-left-bottom {
border: none;
background-image: url(../images/main2boxbottom.gif);
background-position: bottom;
padding: 0 10px 10px 10px;
}

#main-right {
float: right;
border: none;
width: 265px;
}

#main-right-top {
border: none;
background-image: url(../images/main2boxtop.gif);
background-repeat: no-repeat;
background-position: top;
height: 8px;
}

#main-right-bottom {
border: none;
background-image: url(../images/main2boxbottom.gif);
background-position: bottom;
padding: 0 10px 10px 10px;
}

/********** Fonts **********/

a:link, a:visited, a:active {
color: #004185;
text-decoration: underline;
}

a:hover {
color: #046D87;
text-decoration: none;
}

.leftnavheader {
color: #FFFFFF;
}

a.leftnavheader:link, a.leftnavheader:active, a.leftnavheader:visited {
width: 168px;
display: block;
border-bottom: 1px solid #0067EB;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-weight: bold;
padding: 10px;
background: #0067EB;
}

a.leftnavheader:hover {
background: #A9EAFD;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}


a.leftnavmenu:link, a.leftnavmenu:active, a.leftnavmenu:visited {
width: 168px;
display: block;
border-bottom: 1px solid #0067EB;
text-decoration: none;
color: #046D87;
font-weight: bold;
padding: 10px;
background: #FFFFFF;
}

a.leftnavmenu:hover {
background: #C9E5DA;
color: #046D87;
text-decoration: none;
font-weight: bold;
}

.leftnavactive, a.leftnavactive {
width: 168px;
display: block;
border-bottom: 1px solid #0067EB;
text-decoration: none;
color: #046D87;
font-weight: bold;
padding: 10px;
background: #A9EAFD;
}

a.leftnavindent:link, a.leftnavindent:active, a.leftnavindent:visited {
width: 168px;
display: block;
border-bottom: 1px solid #0067EB;
text-decoration: none;
color: #046D87;
font-weight: bold;
padding: 10px 0 10px 20px;
background: #FFFFFF;
}

a.leftnavindent:hover {
background: #A9EAFD;
color: #046D87;
text-decoration: none;
font-weight: bold;
}

.leftnavindentactive, a.leftnavindentactive {
width: 168px;
display: block;
border-bottom: 1px solid #0067EB;
text-decoration: none;
color: #046D87;
font-weight: bold;
padding: 10px 0 10px 20px;
background: #A9EAFD;
}

#leftnav-top, #rightnav-top, #rightmain-top, #main-top, #main-2col-top, #main-left-top, #main-right-top
{
font-size: 1px;
line-height: 1;
}
</style>
</head>

<body>

<div id="container">

<div id="center">

<div id="content">
<div id="main-2col">
<div id="main-2col-top"></div>
<div id="main-2col-content">
<h2>Header</h2>
<p>{Insert Text Here}</p>
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>

<div id="leftnav">
<ul>
<li><a href="" class="leftnavheader">Header</a></li>
<li><a href="" class="leftnavmenu">Item 1</a></li>
<li><a href="" class="leftnavmenu">Item 2</a></li>
<li><a href="" class="leftnavmenu">Item 3</a></li>
<li><a href="" class="leftnavmenu">Item 4</a></li>
<li><a href="" class="leftnavindent">Item 5</a></li>
</ul>
</div>

</div>

</div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john f
post Nov 1 2007, 03:02 PM
Post #2


Member
***

Group: Members
Posts: 47
Joined: 23-August 06
Member No.: 10
There is an error in coding.
You should have: <style type="text/css">
</style>

Not: <style> </style>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
superjoepsu
post Nov 1 2007, 04:09 PM
Post #3





Group: Members
Posts: 2
Joined: 1-November 07
Member No.: 4,198
QUOTE(john f @ Nov 1 2007, 04:02 PM) *

There is an error in coding.
You should have: <style type="text/css">
</style>

Not: <style> </style>


in my real code the style sheet is separate. i only embedded it into the html for showing it. either way though, that doesn't address the problem. thank you for your response though!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 07:31 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC