|
|
|
gries818
|
 Posted:
Thu Jul 31, 2008 9:30 am |
|
|
|
Respected Member
of PROnetworks
Joined: 07 Jul 2004
Posts: 6563
|
I'm having a rather confusing problem that I can't quite figure out with IE 6. My divs in IE 6 aren't lining up correctly and nothing seems to make them work in IE 6. The worst part is that they work perfectly in Firefox and IE 7.
Here is the problem in IE 6:
Here are screenshots of it displaying correctly in IE 7 and Firefox:
Here is the code that I'm using:
HTML
| Code: |
<DOCTYPE>
<html>
<head>
<title>Design</title>
<link>
</head>
<body>
<div class="sidebar_align">
<table><tr><td><div class="sidebar_top"></div></td></tr>
<tr><td><div class="sidebar">
<center><div class="sidebar_inner_top"></div>
<div class="sidebar_inner"></div>
<div class="sidebar_inner_bottom"></div></center></div></td></tr>
<tr><td><div class="sidebar_bottom"></div></td></tr></table>
<div class="spacer_sidebar"></div>
<div class="sidebar_top"></div><div class="sidebar">
<center><div class="sidebar_inner_top"></div>
<div class="sidebar_inner"></div>
<div class="sidebar_inner_bottom"></div></center>
</div><div class="sidebar_bottom"></div></div>
<div>
<div class="main_top"></div><div class="main">
<center><div class="main_inner_top"></div>
<div class="main_inner"></div>
<div class="main_inner_bottom"></div></center>
</div><div class="main_bottom"></div>
</div>
</body>
</html> |
You'll notice that the first div grouping is inside a table. I did this because this technique has worked in the past to get around IE 6's crappy rendering. It doesn't work for whatever reason in this case. NOTE: Removing the doctype makes IE 7 mess up like IE 6... Firefox is still fine though.
CSS
| Code: |
/* General styling */
body
{
margin:0px;
padding:0px;
}
a
{
text-decoration:none;
}
/* sidebar styling */
.sidebar_align
{
float:left;
position:absolute;
top:10px;
left:10px;
}
.sidebar_top
{
background-image:url("images/sidebar_top.png");
height:5px;
width:300px;
background-repeat:no-repeat;
}
.sidebar
{
background-position:top;
background-color:#d8451a;
width:300px;
height:267px;
}
.sidebar_bottom
{
background-image:url("images/sidebar_bottom.png");
height:5px;
width:300px;
background-repeat:no-repeat;
}
.sidebar_inner_top
{
background-image:url("images/sidebar_inner_top.png");
background-repeat:no-repeat;
width:290px;
height:5px;
}
.sidebar_inner
{
background-color:White;
width:290px;
height:257px;
}
.sidebar_inner_bottom
{
background-image:url("images/sidebar_inner_bottom.png");
background-repeat:no-repeat;
width:290px;
height:5px;
}
.spacer_sidebar
{
height:10px;
width:300px;
}
/* main */
.content_container
{
padding-left:10px;
}
.main_top
{
background-image:url("images/main_top.png");
background-repeat:no-repeat;
width:650px;
height:5px;
}
.main
{
background-color:#d8451a;
width:650px;
height:553px;
}
.main_bottom
{
background-image:url("images/main_bottom.png");
background-repeat:no-repeat;
width:650px;
height:5px;
}
.main_inner_top
{
background-image:url("images/main_inner_top.png");
background-repeat:no-repeat;
width:640px;
height:5px;
}
.main_inner
{
background-color:White;
width:640px;
height:543px;
}
.main_inner_bottom
{
background-image:url("images/main_inner_bottom.png");
background-repeat:no-repeat;
width:640px;
height:5px;
} |
Thanks for the help! |
|
|
|
|
|
|
|
Back to top
|
|
|
|
gries818
|
|
Posted:
Thu Jul 31, 2008 1:45 pm |
|
|
|
Respected Member
of PROnetworks
Joined: 07 Jul 2004
Posts: 6563
|
|
After some personal research I came across the solution. Apparently you can get around this problem in IE 6 by setting margin-top in affected classes as a a negative pixel height (to undo the offset top). Some additional tweaking is needed to make it display completely the same as it does in IE 7.
This workaround does present a problem however. While it fixes IE 6, it will screw up IE 7 and Firefox (and I'm sure other browsers). My solution to this problem is to make two separate CSS files and switch them with Javascript depending on the browser (IE 6 and IE 7/Firefox).
|
|
|
|
|
|
|
|
Back to top
|
|
|
|
bigt0242000
|
|
Posted:
Thu Jul 31, 2008 7:59 pm |
|
|
|
PRO Level 2
Joined: 16 Jun 2004
Posts: 21
Location: Rome, GA
|
|
Wouldn't it be easier to use an IF statement to switch style sheets instead of using javascript?
|
|
|
|
|
|
|
|
Back to top
|
|
|
|
gries818
|
|
Posted:
Tue Aug 05, 2008 10:16 am |
|
|
|
Respected Member
of PROnetworks
Joined: 07 Jul 2004
Posts: 6563
|
| bigt0242000 wrote: |
| Wouldn't it be easier to use an IF statement to switch style sheets instead of using javascript? |
Is that even compatible with Firefox? I've never even heard of that.
|
|
|
|
|
|
|
|
Back to top
|
|
|
|
bigt0242000
|
|
Posted:
Tue Aug 05, 2008 5:23 pm |
|
|
|
PRO Level 2
Joined: 16 Jun 2004
Posts: 21
Location: Rome, GA
|
IE is the only one that reads the If statements. See here. |
|
|
|
|
|
|
|
Back to top
|
|
|
|
gries818
|
|
Posted:
Tue Aug 05, 2008 5:52 pm |
|
|
|
Respected Member
of PROnetworks
Joined: 07 Jul 2004
Posts: 6563
|
| bigt0242000 wrote: |
| IE is the only one that reads the If statements. See here. |
Yeah then it would be a problem because I need to use one stylesheet for IE 7 and Firefox and one for IE 6.
I'll post my javascript later so anyone can use it.
|
|
|
|
|
|
|
|
Back to top
|
|
|
|
bigt0242000
|
|
Posted:
Tue Aug 05, 2008 10:05 pm |
|
|
|
PRO Level 2
Joined: 16 Jun 2004
Posts: 21
Location: Rome, GA
|
|
How much of the stylesheet has to be redone?
You could use "if IE 6" and then stick what you need for it inside of a style tag.
|
|
|
|
|
|
|
|
Back to top
|
|
|
|
gries818
|
|
Posted:
Wed Aug 06, 2008 1:26 pm |
|
|
|
Respected Member
of PROnetworks
Joined: 07 Jul 2004
Posts: 6563
|
| bigt0242000 wrote: |
How much of the stylesheet has to be redone?
You could use "if IE 6" and then stick what you need for it inside of a style tag. |
that's true I guess. Here's the solution I came up with:
| Code: |
var browser = navigator.appVersion;
if (browser.substring(17,25) == "MSIE 6.0") {
document.writeln("<link>");
}
else {
document.writeln("<link>");
} |
Works just as well - and it can be applied to multiple pages more easily - and that's kinda the point of CSS to begin with. Thanks for the suggestion of "if" tags... I'm sure I can find a use for them at a later point 
|
|
|
|
|
|
|
|
Back to top
|
|
|
|
kanaloa
John C. Derrick |
|
Posted:
Wed Aug 06, 2008 1:43 pm |
|
|
|
Founder
Joined: 09 Mar 2002
Posts: 43414
Location: Columbia, SC
|
|
IE6 is notorious for screwing up CSS code. I hate it with a passion. IE7 has some issues too, but IE6 took the cake. If Microsoft would make their darn browsers standards compliant, this wouldn't be an issue. Instead we have to "hack" our code or put in redundant code.
The if statements are your best bet. I use them and most other developers I know do too.
|
|
|
|
|
|
|
|
Back to top
|
|
|
|
|
Back to top |
|
|
|
|
|
