DIV's are messed up in IE
02-02-2008, 08:14 PM
|
DIV's are messed up in IE
|
Posts: 61
|
Hi, I'm making a new website with a friend and decided to use DIV's/CSS to code it instead of tables like I normally use. Now, I'm not very good at all doing it this way but figured it would be a learning experience.
My site is: www.tech-grid.com/test
It works fine in Firefox and Opera, but using IE6 the left column and center column appear to go under the right column. I've tried a few things but it only made it worse.
Here is my index.html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container" align="center">
<div id="banner_top"></div>
<div id="banner_bottom">
<div id="rightCol">filler<br /><br />filler<br /><br />filler<br /><br />filler<br /></div>
</div>
<div id="leftCol">
<div class="navTop"></div>
<div class="navCenter">
<div class="navText">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
</div>
</div>
<div class="navBottom"></div>
filler<br />filler<br />filler<br />filler<br />filler<br />filler<br />filler<br />filler<br />filler<br />
</div>
<div id="content"><h1>Filler Title Filler Title....</h1><h2>Posted By: CrazeD<br />January 31, 2008 - 6:32PM</h2><p>filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content </p>
<p>filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content </p>
<p>filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content filler content </p></div>
<div id="footer"><p>Copyright 2008 Tech-Grid</p></div>
</div>
</body>
</html>
And my style.css:
Code:
/* kill defaults */
html, body, ul, dl, li, h1, h2, h3, h4, img {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
border: 0;
body {
background-color: #b2b2b2;
height: 100%;
margin: 0px;
text-align: center;
}
.container {
background-color: #d6d6d6;
width: 900px;
height: 100%;
margin: auto auto;
border: 1px #000000;
border-left-style: none;
border-right-style: none;
border-top-style: solid;
border-bottom-style: solid;
}
.container #banner_top {
background-image: url(images/banner_top.gif);
background-repeat: no-repeat;
border: 1px #000000;
border-left-style: solid;
border-top-style: none;
border-bottom-style: none;
border-right-style: solid;
width: 900px;
height: 106px;
}
.container #banner_bottom {
background-image: url(images/banner_bottom.gif);
background-repeat: no-repeat;
border: 1px #000000;
border-left-style: solid;
border-top-style: none;
border-bottom-style: none;
border-right-style: none;
width: 900px;
height: 53px;
}
.container #leftCol {
background-color: #959595;
border: 1px #000000;
border-left-style: solid;
border-top-style: none;
border-bottom-style: solid;
border-right-style: solid;
float: left;
width: 131px;
}
.container #content {
background-color: #959595;
border: 1px #000000;
border-left-style: solid;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
margin-top: 8px;
margin-left: 140px;
margin-right: 180px;
text-align: left;
padding: 10px;
}
.container #content h1 {
font-family: Serif;
font-size: 20px;
text-align: left;
}
.container #content h2 {
font-family: Serif;
font-size: 10pt;
text-align: left;
font-weight: normal;
}
.container #content p {
font-family: Serif;
font-size: 12pt;
text-align: left;
}
.container #content img {
border: 1px solid #101010;
}
.container #rightCol {
background-color: #959595;
border: 1px #000000;
border-left-style: solid;
border-top-style: solid;
border-bottom-style: solid;
border-right-style: solid;
margin-top: 6px;
float: right;
width: 171px;
}
.navTop {
background-image: url(images/nav_top.gif);
background-repeat: no-repeat;
height: 10px;
}
.navCenter {
background-image: url(images/nav_center.gif);
background-repeat: repeat-y;
}
.navBottom {
background-image: url(images/nav_bottom.gif);
background-repeat: no-repeat;
height: 6px;
}
.navText {
font-family: Serif;
font-size: 10pt;
text-align: left;
}
.navText li {
background-image: url(images/nav_button.gif);
background-repeat: no-repeat;
height: 18px;
margin-left: 9px;
margin-bottom: 3px;
padding-left: 5px;
}
.navText a, a:active, a:visited {
color: #000000;
text-decoration: none;
}
.navText a:hover {
color: #000000;
text-decoration: underline;
}
.container #footer {
padding: 0 40px;
}
.container #footer p {
margin: 0;
padding: 10px 0;
}
Any help would be great, thanks. |
|
|
|
|
02-03-2008, 05:14 AM
|
Re: DIV's are messed up in IE
|
Posts: 1,612
Name: Michael (mik) Land
Location: England
|
Display: inline to your floats.
If it's not because of the missing display: inline, then you need to use the IE backslash hack to reduce the width of that float by 1.
Here's your code, I took the liberty of optimising it:
Code:
html, body, ul, dl, li, h1, h2, h3, h4, img {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
border: 0;
}
body {
margin: 0;
text-align: center;
background: #b2b2b2;
}
.container {
width: 900px;
margin: auto;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
background: #d6d6d6;
}
.container #banner_top {
border-left: solid 1px #000;
border-right: solid 1px #000;
width: 900px;
height: 106px;
background: url(http://www.tech-grid.com/test/images/banner_top.gif) no-repeat;
}
.container #banner_bottom {
border-left: solid 1px #000;
width: 900px;
height: 53px;
background: url(http://www.tech-grid.com/test/images/banner_bottom.gif) no-repeat;
}
.container #leftCol {
border: solid 1px #000;
border-top: 0;
float: left;
display: inline;
width: 131px;
background: #959595;
}
.container #content {
border: solid 1px #000;
margin: 8px 180px 0 140px;
text-align: left;
padding: 10px;
background: #959595;
}
.container #content h1 {
text-align: left;
font: 20px Serif;
}
.container #content h2 {
text-align: left;
font: normal 10pt Serif;
}
.container #content p {
text-align: left;
font: 12pt Serif;
}
.container #content img {
border: 1px solid #101010;
}
.container #rightCol {
border: solid 1px #000;
margin-top: 6px;
float: right;
display: inline;
width: 171px;
background: #959595;
}
.navTop {
height: 10px;
background: url(http://www.tech-grid.com/test/images/nav_top.gif) no-repeat;
}
.navCenter {
background: url(http://www.tech-grid.com/test/images/nav_center.gif) repeat-y;
}
.navBottom {
height: 6px;
background: url(http://www.tech-grid.com/test/images/nav_bottom.gif) no-repeat;
}
.navText {
text-align: left;
font: 10pt Serif;
}
.navText li {
background: url(http://www.tech-grid.com/test/images/nav_button.gif) no-repeat;
height: 18px;
margin: 0 0 3px 9px;
padding-left: 5px;
}
.navText a, a:active, a:visited {
color: #000;
text-decoration: none;
}
.navText a:hover {
color: #000;
text-decoration: underline;
}
.container #footer {
padding: 0 40px;
}
.container #footer p {
margin: 0;
padding: 10px 0;
}
Last edited by Mooofasa : 02-03-2008 at 05:38 AM.
|
|
|
|
|
02-03-2008, 08:12 AM
|
Re: DIV's are messed up in IE
|
Posts: 61
|
Thanks, but that didn't fix it.  What is this "backslash hack" you speak of? |
|
|
|
|
02-03-2008, 08:34 AM
|
Re: DIV's are messed up in IE
|
Posts: 1,612
Name: Michael (mik) Land
Location: England
|
Sorry, I meant for you to use the child selector. IE6 will ignore body>.container #leftCol, but compliant browsers won't.
Code:
.container #leftCol {
border: solid 1px #000;
border-top: 0;
float: left;
display: inline;
width: 130px;
background: #959595;
}
body > .container #leftCol{
width:131px;
}
Last edited by Mooofasa : 02-03-2008 at 08:41 AM.
|
|
|
|
|
02-03-2008, 09:05 AM
|
Re: DIV's are messed up in IE
|
Posts: 61
|
Just tried this and no luck there either. I even tried reducing the leftCol by several px, and no difference.
Thank you for the help, keep the suggestions rollin'.  |
|
|
|
|
02-03-2008, 11:05 AM
|
Re: DIV's are messed up in IE
|
Posts: 6,699
Location: Tennessee
|
Quote:
|
decided to use DIV's/CSS to code it instead of tables
|
Hallelujah !
Don't use hacks in your css. Use a separate CSS file for the 'fixes' needed to make IE tow the line and use conditional comments in your html to target that css file. It's also not usually necessary to hack.
The problem you're dealing with is IE's busted box model.
http://www.communitymx.com/content/a...989953B6F20B41
And all it's other bugs:
http://www.positioniseverything.net/ie-primer.html
http://www.positioniseverything.net/explorer.html
My suggestion -
Ok.. I messed around with your layout and here's what works and was easiest to solve;
- take the right column OUT of the #banner_bottom div
- next, move #rightcol in your html to just above #left_col
- add a negative top margin of about 45px to #right_col to pull it up into the space where you want it.
IE6 displays this properly as does Firefox.
Oh.. and don't do this:
<div class="container" align="center">
Read the stickies, I put one there specifically for centering.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
Last edited by LadynRed : 02-03-2008 at 11:21 AM.
|
|
|
|
|
02-03-2008, 11:52 AM
|
Re: DIV's are messed up in IE
|
Posts: 1,612
Name: Michael (mik) Land
Location: England
|
Quote:
Originally Posted by LadynRed
Don't use hacks in your css
|
Why not? |
|
|
|
|
02-03-2008, 01:18 PM
|
Re: DIV's are messed up in IE
|
Posts: 14,876
Location: Blackpool. UK
|
because "hacks" are usually using one bug to work around another bug.
At some point in time the "bug" will be fixed and the hack then usually screws up the browser in some other way.
Which is what is happening now in the continuing Internet Explorer saga with ver 7.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
|
|
|
|
|
02-03-2008, 05:23 PM
|
Re: DIV's are messed up in IE
|
Posts: 61
|
Much thanks LadynRed, this worked. |
|
|
|
|
« Reply to DIV's are messed up in IE
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
|
