PDA

View Full Version : IE6: DIVs stuck together


jdjones
01-27-2009, 03:49 AM
OK, I have scoured the web for an answer to this, but every solution I find is about wanting to eliminate the space between DIVs. My problem is that my layout looks good in any other browser, but in IE6, the menu DIV and the Main COntent DIV are stuck together like magnets. The following images respectively show the desired appearance in Firefox 3, and the broken result in IE6. The menu actually looks ok, but the main white window is scooting to the right. It's probably a simple fix, but I cannot figure it out. Thanks to anyone who can help. Isn't IE6 dead yet?

http://www.localaperture.com/pics/jdj-ffx.jpg

http://www.localaperture.com/pics/jdj-ie6.jpg

@charset "utf-8";
* {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
margin: 0;
text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
padding: 0;
background-image: url(../images/jdjones-bg.jpg);
}



p {
font-size: 100%;

}
h1 {
font-size: 100%;
}
h2 {
font-size: 100%;
}
.centerText {
text-align: center;
}





a:link {
color: #C2C2C2;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #C2C2C2;
}

a:hover {
color: #FF9F40;
text-decoration: underline;
}
a:active {
color: #FFFFFF;
}

.twoColFixLtHdr #container {
width: 960px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-bottom: 0;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
.twoColFixLtHdr #header {
margin-top: 0px;
background-repeat: no-repeat;
background-color: #FFFFFF;
}
.twoColFixLtHdr #header h1 {
margin: 0;
padding-left: 0px;
padding-bottom: 11px;
padding-top: 10px;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
.twoColFixLtHdr #sidebar1 {
float: right;
width: 200px;
margin-top: 27px;
margin-right: 0px;
font-size: 0.9em;
color: #FFFFFF;
line-height: 19px;
}
.twoColFixLtHdr #mainContent {
float: left;
width: 520px;
margin-left: 110px;
margin-top: 30px;
height: auto;
background-color: #FFFFFF;
border: 1px solid #000000;
font-size: 0.9em;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}

.twoColFixLtHdr #footer {
padding-top: 0;
padding-bottom: 0;
text-align: center;
height: 35px;
bottom: 0px;
width: 960px;
float: left;
}
.twoColFixLtHdr #footer p {
margin: 0;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
padding-top: 130px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}

.smallText {
font-size: 80%;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColFixLtHdr #galleryFlash {
float: left;
width: 540px;
margin-left: 110px;
margin-top: 30px;
height: 540px;
padding: 0px;
border: 1px solid #000000;
background-color: #FFFFFF;
}
#bulletList {
padding-left: 30px;
}
.twoColFixLtHdr #container #mainContent #bulletList2 {
padding-left: 30px;
}

.twoColFixLtHdr #mainContent a:link {
color: #F97C00;
}
.twoColFixLtHdr #mainContent a:active {
color: #FFFFFF;
}

.twoColFixLtHdr #mainContent a:visited {
color: #F97C00;
}
.twoColFixLtHdr #mainContent a:hover {
color: #FF9F40;
}
.currentMenuSmall {
color: #FFFFFF;
font-size: 80%;
}

jdjones
01-29-2009, 05:14 PM
Either this is too puzzling for everyone or I have broken some code of engagement and no one wants to help. Which is it?

Corrosive
01-29-2009, 05:19 PM
Either this is too puzzling for everyone or I have broken some code of engagement and no one wants to help. Which is it?

Hi mate. No, you've not upset anyone/broken any rules. Your post was great and included lots of good info...strange that no-one has answered it really. I can't see what you have done as I am terrible at de-bugging others code. It's a good idea, if you don't get an answer, just to give the thread a nudge again.

urbanrays
01-29-2009, 05:37 PM
Hi,

With ie6 have you tried avoiding using padding and use margins.

You can also try using this for your code

.example{
margin:10px
_margin:15px
}
etc

Ie6 will read the underscore other browsers will just dismiss it

Corrosive
01-29-2009, 05:42 PM
Hi,

With ie6 have you tried avoiding using padding and use margins.

You can also try using this for your code

.example{
margin:10px
_margin:15px
}
etc

Ie6 will read the underscore other browsers will just dismiss it

The whole thing seems incredibly complicated for what is a very basic layout. You've got stuff in there you don't need IMO. Did you start from scratch or hack another layout?

urbanrays
01-29-2009, 05:59 PM
I had a quick bash mate and it worked.
I can fully understand where your coming from though getting complicated for a simple layout.

Corrosive
01-29-2009, 06:24 PM
I had a quick bash mate and it worked.
I can fully understand where your coming from though getting complicated for a simple layout.

Try this JDJones...

http://corrosiveonline.co.uk/_projects/jdjones/test.htm

Much cleaner :wink:

urbanrays
01-29-2009, 07:20 PM
Try this JDJones...

http://corrosiveonline.co.uk/_projects/jdjones/test.htm

Much cleaner :wink:

Right I see where I stand now, has this got anything to do with a foot rub.:roll:

Corrosive
01-29-2009, 11:44 PM
Right I see where I stand now, has this got anything to do with a foot rub.:roll:

Nope. I have OCD and can't take looking at untidy code...or not washing my hands every 5 minutes...or not brushing my hair 23 times.

jdjones
02-03-2009, 04:51 PM
Hello all,
I started the site using a blank template in Dreamweaver CS3. I know DW puts significant CSS code into the templates by default to deal with cross-browser issues, so that could be some of the 'complexity.' Corrosive's example does not contain ANY of that stuff. Is it not necessary? I thought I was avoiding browser issues leaving it in there, but maybe the reverse is true.

And yes, I know my code is not exactly elegant, but until I saw it in IE6, I thought it at least worked. Another thing to mention is that some of the CSS is for pages that are either not built yet or have been deleted (yes, I know...).

I guess I just thought someone would see something in particular in my CSS that is causing the IE6 problem. I do plan to rework the code at some point when I am more skilled, but I haven't the time right now. Maybe I'll just go through each line of it, testing in IE6 until the problem goes away.
I do appreciate the help. Thank You.

Corrosive
02-03-2009, 05:04 PM
Hello all,
I started the site using a blank template in Dreamweaver CS3. I know DW puts significant CSS code into the templates by default to deal with cross-browser issues, so that could be some of the 'complexity.' Corrosive's example does not contain ANY of that stuff. Is it not necessary? I thought I was avoiding browser issues leaving it in there, but maybe the reverse is true.

And yes, I know my code is not exactly elegant, but until I saw it in IE6, I thought it at least worked. Another thing to mention is that some of the CSS is for pages that are either not built yet or have been deleted (yes, I know...).

I guess I just thought someone would see something in particular in my CSS that is causing the IE6 problem. I do plan to rework the code at some point when I am more skilled, but I haven't the time right now. Maybe I'll just go through each line of it, testing in IE6 until the problem goes away.
I do appreciate the help. Thank You.

Urbanrays seems to have given you a solution that works. Check his post. I think the issue is that the CSS 'hacks' are for the whole layout to work. If you start hacking the layout apart and changing significant bits then some of it becomes obsolete. I'd always start with a blank page and work from there.

jdjones
02-03-2009, 05:28 PM
I didn't really understand what he was telling me to do at first. Only IE6 reads the underscored CSS?...That information is solid gold. Not sure why it needs those wacky margins to make my page work, but whatever. It's already fixed! Although I have more work to do on the site, at least it doesn't break for 20% (or more) of the browsing public. Thank you.

domedia
02-03-2009, 06:43 PM
I didn't really understand what he was telling me to do at first. Only IE6 reads the underscored CSS?...
Google a little about IE6 and CSS.
The CSS box model is broken in IE6, they chose to implement it in a little different way.In the box model, padding is added to the width of the box. So you have to use a box model hack for IE6.