My amble towards comptency: Help me make my site IE compliant.

[GilloD]

Here's the website I'll be discussing:

http://asilenttreatment.org/JPRedesign/jpredesigntempnewhead.html

It calls 2 CSS sheets:

http://asilenttreatment.org/JPRedesign/home.css
http://asilenttreatment.org/JPRedesign/jpstyle.css



At the risk of revealing to you dogs the company at which I work, I needs a hand. I'm trying to bring the site up to compliance with IE, but I'm having a hell of a time. I have two major problems: In IE, my content wrapping div WILL NOT CENTER FOR LOVE OR MONEY. It always hangs on the left- I'm supposing this is an issue with inherited values. I was told to do:

Code: [Select]

#contentwrap {
width: 760px;
margin-left: auto;
    margin-right: auto;
text-align: left;
}

And that seemed to work for awhile. But no longer, not since I tried to merge my IE style sheet and my Firefox stylesheet.

The second problem is that I'm using a Sprite-based image replacement for my upper nav bar (And, yes, I know- I fucked one of them up. This is just quick and dirty, I'll pass it along to the art guy when it's ready). The nav bar is split into two DIV containers- One for the upper elements and one for the lower. In Firefox this works fine, in IE it places a small white space inbetween the two DIVs. Here's the code for that:

Code: [Select]

<div id="headerspace">

<div id="tmenuhead">
<img src="img/tmheader.jpg">
</div>

<div id="tmenumenu"> <!-- WHY IS THERE A GAP BETWEEN THE ELEMENTS?! WHY OH WHY. Maybe this is why they use lists. -->
<ul>
<li id="tmhome"><a href="jpredesigntempnewhead.html">HOME</a></li>
<li id="tmfaq"><a href="faq.html">FAQ</a></li>
<li id="tmcontact"><a href="contact.html">CONTACT</a></li>
</ul>
</div>

<div id="lmenu">
<ul>
<li id="lmproducts"><a href="productdisplay.html">PRODUCTS</a></li>
<li id="lmrjapan"><a href="retailjapan.html">RETAIL JAPAN</a></li>
<li id="lmnutrition"><a href="nutrition.html">NUTRITION</a></li>
<li id="lmblog"><a href="blog.html">BLOG</a></li>
<li id="lmrecipes"><a href="recipedisplay.html">RECIPES</a></li>
</ul>

And the relevant CSS:

Code: [Select]

#headerspace {
margin: 20px 0px 0px 0px;
width:770px;
height:100px;

}

#headerspace h1 {
display: block;
float: left;
text-align:-9999px;
}
/* Classes for the re-assembly of the upper and lower menus */
#tmenuhead{
width:507px;
height: 70px;
float:left;
}

#tmenumenu{
width:253px;
height:70px;
float:left;
background: #4494d1;
}

#tmenu li{
float:left;
height: 50px;
}

#tmhome,#tmfaq,#tmcontact{
text-indent:-9999px;
float:left;
}

#tmhome a{
display: block;
height: 69px;
width:68px;
text-decoration:none;
background: url(img/tmhome.jpg) no-repeat;
}

#tmfaq a{
display: block;
height: 69px;
width:54px;
text-decoration:none;
background: url(img/tmfaq.jpg) no-repeat;
}

#tmcontact a{
display: block;
height: 69px;
width:131px;
text-decoration:none;
background: url(img/tmcontact.jpg) no-repeat;
}

#tmhome a:hover{background: url(img/tmhome.jpg) no-repeat 0 -69px;}
#tmfaq a:hover{background: url(img/tmfaq.jpg) no-repeat 0 -69px;}
#tmcontact a:hover{background: url(img/tmcontact.jpg) no-repeat 0 -69px;}

#lmenu{
width:760px;
height:30px;
background: #4494d1;
}

#lmenu li{
float:left;
height: 30px;
}

#lmproducts,#lmrjapan,#lmnutrition,#lmblog,#lmrecipes{
text-indent:-9999px;
float:left;
}

#lmproducts a{
display: block;
height: 30px;
width:149px;
text-decoration:none;
background: url(img/lmproducts.jpg) no-repeat;
}

#lmrjapan a{
display: block;
height: 30px;
width:203px;
text-decoration:none;
background: url(img/lmrjapan.jpg) no-repeat;
}

#lmnutrition a{
display: block;
height: 30px;
width:171px;
text-decoration:none;
background: url(img/lmnutrition.jpg) no-repeat;
}

#lmblog a{
display: block;
height: 30px;
width:99px;
text-decoration:none;
background: url(img/lmblog.jpg) no-repeat;
}

#lmrecipes a{
display: block;
height: 30px;
width:137px;
text-decoration:none;
background: url(img/lmrecipes.jpg) no-repeat;
}

#lmproducts a:hover{background: url(img/lmproducts.jpg) no-repeat 0 -30px;}
#lmrjapan a:hover{background: url(img/lmrjapan.jpg) no-repeat 0 -28px;}
#lmnutrition a:hover{background: url(img/lmnutrition.jpg) no-repeat 0 -30px;}
#lmblog a:hover{background: url(img/lmblog.jpg) no-repeat 0 -30px;}
#lmrecipes a:hover{background: url(img/lmrecipes.jpg) no-repeat 0 -30px;}

IE is also tossing some crazy margins on the bottom of the big promo tile, but I'll tide those up. These are the two major issues that are glaringly obvious. Thanks!

[GilloD]

Okay, so I realized that I had some problems.

I should have centered the body

Code: [Select]

body{
background: #FFFFFF;
font-size: x-small;
text-align: center;
}

And then compensated on the container:

Code: [Select]

#contentwrap {
width: 760px;
margin: 0 auto;
text-align: left;
}
But not even THAT is working now. Something else is the code must be interfering. Thoughts?

[GilloD]

F'in dumb- I was refreshing the website and not teh working version on my desktop.

Still having that issue with the gap between elements

[GilloD]

Just a follow-up: I fixed the weird gap between DIVs in IE by setting the background color in the wrapper class for the header. Simple fix, but I'm wondering what the problem was.

[demi]

If it's one thing I learned is that working with other people's code makes my head explode so no, I will not be helping you

Bye

[Bocsius]

IE loves to create whitespace.

<div>junkimage1.jpg</div>
<div>junkimage2.jpg</div>

will render one right on top of the other, no problem

<div>
  junkimage1.jpg
</div>
<div>
  junkimage2.jpg
</div>

will create a little whitespace between the two images. Who knows why.


For the record, I still see the gap in IE6. I fortunately still have it installed on my work PC and refuse to upgrade.

I would try to start/finish your menu divs like this and see if it works better for you. Maybe somebody else has a better CSS approach, though.

<div><ul>
 ....
</ul><div>

[GilloD]

IE loves to create whitespace.

<div>junkimage1.jpg</div>
<div>junkimage2.jpg</div>

will render one right on top of the other, no problem

<div>
  junkimage1.jpg
</div>
<div>
  junkimage2.jpg
</div>

will create a little whitespace between the two images. Who knows why.


For the record, I still see the gap in IE6. I fortunately still have it installed on my work PC and refuse to upgrade.

I would try to start/finish your menu divs like this and see if it works better for you. Maybe somebody else has a better CSS approach, though.

<div><ul>
 ....
</ul><div>

Yeah, I hadn't uploaded the new code yet. It should look fine now. But I'll check out your solution, Thanks for the heads up. Half of this battle is just learning little things like that. There's no way for an inexperienced dude to find that out except by accident.

[GilloD]

If it's one thing I learned is that working with other people's code makes my head explode so no, I will not be helping you

Bye

Great post, thanks.