IE problem with CSS

[polomolo]

Hi,

I'm coding a website for someone, I kinda know what I'm doing, although the design of the page isn't really making things easier...anyway, I actually thought everything was going well on safari and firefox (on my mac) then when i decided to try it on a PC IE, i was amazed at what I saw. everything was scattered everywhere, at least for some of the pages. the homepage looks fine the first time I look at it, but when I navigate to another page, and later come back to the homepage, it just completely stuffs up as well.

I've searched the net on problems such as this, but I really don't know what to search for. I found some solutions on this site, where I found CSS codes for to put, such as position: relative; and margin: 0; display: block-inline; etc. etc.

nothing really changed... what could be my problem?

Here's my CSS and HTML for the main page that i'm having problems with, keep in mind that I'm still a beginner in this as well, so like there might be some wrong methods of doing this . At first I only had width height and float, which seemed to work great with firefox and safari, but then I had to add all this other crap just to make it work with IE6, but its not doing anything. I tested many variations of these codes.. and i kinda gave up... I need help.

Just to note, in IE (on mac),#headerleft and #headerright and .buttons work show up but everything under /*online shop stuff*/ is all over the place. I even tried having a container for that which is #onlinebg still didn't help.

Thanks (in advance)

Paul.

_______CSS__________________
<code>
#container{
margin:0 auto;
width: 543px;
position: relative;
padding: 0;
zoom: 1;
}

#headerleft{
background: url(images/sidehead.png) center no-repeat;
margin:0 auto;
width: 143px;
height: 205px;
float: left;
position: relative;
}

#headerright{
background: url(images/header.png) top center no-repeat;
width: 400px;
height: 89px;
float: right;
position: relative;
}

.button{
width: 143px;
height: 180px;
float: left;
position: relative;
}

.button .home a{
background: url(images/home.png) top left no-repeat;
width: 143px;
height: 45px;
float: left;
}

.button .online a{
background:url(images/online.png) top left no-repeat;
width: 143px;
height: 45px;
float: left;
}

.button .purchase a{
background:url(images/purchase.png) top left no-repeat;
width: 143px;
height: 44px;
float: left;
}

.button .contact a{
background:url(images/contact.png) top left no-repeat;
width: 143px;
height: 46px;
float: left;
}

/*online shop stuff*/

#onlinebg{
width: 400px;
height: 679px;
float: right;
margin: 0 auto;
display: block;
position: relative;
}

#top{
background:url(images/onlinetitle.png) top left no-repeat;
width: 400px;
height: 67px;
float: left;
position: relative;
display: inline;
padding: 0;
}

#leftbar{
background:url(images/left-bar.png) top left no-repeat;
width: 64px;
height: 612px;
float: left;
position: relative;
display: inline;
padding: 0;
}

#clothing{
background: url(images/product_images/clothing.png) top left no-repeat;
width: 107px;
height: 105px;
float: left;
position: relative;
display: block-inline;
}

.clothingbut{
width: 171px;
height: 80px;
float: left;
position: relative;
display: block-inline;
}

.clothingbut .clobut a{
background: url(images/clothing_but.png) top left no-repeat;
width: 171px;
height: 80px;
float: left;
display: block-inline;
}

#rightbox{
background: url(images/rightbox.png) top left no-repeat;
width: 58px;
height: 80px;
float: left;
position: relative;
display: block-inline;
}

#clothingunder{
background:url(images/clothingunder.png) top left no-repeat;
width: 229px;
height: 25px;
float: left;
margin: 0 auto;
position: relative;
display: block-inline;
}

#between{
background:url(images/between.png) top left no-repeat;
width: 336px;
height: 36px;
float: left;
margin: 0 auto;
position: relative;
display: block-inline;
padding: 0;
}

#shoes{
background: url(images/product_images/shoes.jpg) top left no-repeat;
width: 107px;
height: 104px;
float: left;
margin: 0 auto;
position: relative;
display: block-inline;
}

.shoesbut{
width: 153px;
height: 80px;
float: left;
position: relative;
display: block-inline;
}

.shoesbut .shobut a{
background: url(images/shoes_but.png) top left no-repeat;
width: 153px;
height: 80px;
float: left;
display: block-inline;
}

#bottombar2{
background:url(images/bottombar2.png) top left no-repeat;
width: 107px;
height: 367px;
float: left;
position: relative;
display: block-inline;
}

#bottombar1{
background:url(images/bottombar1.png) top left no-repeat;
width: 153px;
height: 391px;
float: right;
position: relative;
display: block-inline;
}

#rightbar{
background:url(images/rightbar.png) top left no-repeat;
width: 76px;
height: 471px;
float: right;
position: relative;
display: block-inline;
}
/*online shop stuff*/
</code>

____________HTML_____________
<code>

<!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=UTF-8" />
<title>Welcome to Crush Clothing Online</title>
<link href="crush.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="headerleft"></div>
<div id="headerright"></div>


<div id="onlinebg">
<div id="top"></div>
<div id="leftbar"></div>
<div id="clothing"></div>
<div class="clothingbut">
<div class="clobut"><a href="clothing.html"></a></div></div>
<div id="rightbox"></div>
<div id="clothingunder"></div>
<div id="between"></div>
<div id="shoes"></div>
<div class="shoesbut">
<div class="shobut"><a href="shoes.html"></a></div></div>
<div id="rightbar"></div>
<div id="bottombar1"></div>
<div id="bottombar2"></div>
</div>
<div class="button">
<div class="home"><a href="index.html"></a></div>
<div class="online"><a href="online.html"></a></div>
<div class="purchase"><a href="purchase.html"></a></div>
<div class="contact"><a href="contact.html"></a></div>
</div>
<div id="bottombar"></div>


</div>
</body>
</html>

</code>

[vincevincevince]

Make sure you have something in every DIV for the purposes of IE. That may be the problem. If you don't want to show something in the DIV, write &nbsp; and leave it at that.

[polomolo]

Thanks for that tip... I tried doing that in all of the empty spaces of my divs, still didn't change anything in IE. But i'll be keeping that in mind for next time :)

[SuzyUK]

Hi Paul and Welcome to WebmasterWorld [webmasterworld.com]

This is a really big question ;)

you seem to have hit what are now known as hasLayout or layout errors in IE. the symptoms you report such as page being ok when you look at at but stuffing up another time fit the bill, there are lots of "named" bugs, peekaboo, guillotine etc (search term are a bit hard to come by hehe) especially in IE6, check out Position Is Everything.net for the gory details, however most of them have since been linked with Microsoft's hasLayout property [webmasterworld.com].

don't glaze over just yet, it's not that bad..
the solutions you mention (btw it's display: inline-block; not

block-inline

) are all used in one way or another but usually all that is required is to set hasLayout to true on affected elements

position: relative

; is not a hasLayout=true trigger, but often if you use position: relative because your design needs it, then the element with that set on it will need hasLayout too

[reminder of properties which trigger hasLyout]
CSS property values which set hasLayout to true

* display :: inline-block
* height :: any numerical value/%
* float :: left or right
* position :: absolute
* width :: any numerical value/%
* writing-mode :: tb-rl
* zoom:: any numerical value/%

New/updated in IE7

* min-height :: any numerical value/%
* max-height :: any numerical value/%
* min-width :: any numerical value/%
* max-width :: any numerical value/%
* overflow :: auto, hidden or scroll
* position :: absolute or fixed

this is not as scary as it looks, what you should do is get your site working (without thinking about this) in FF/Opera/Safari whatever your choice of compliant browser.. then if it's still wonky come back with the CSS as is. IE7 is still bothered with hasLayout, though a lot of the named bugs are fixed.. so if you can you should test the outcome in IE6.. IE7 is more compliant, but not compliant enough to develop in IMHO

we can take a look at the CSS that's here, but TBH it looks to me that you've tried to 'overfix' it already, which is possibly causing chain reaction errors.. I've found that less is more when trying to find the balance

e.g.

#container{
margin:0 auto;
width: 543px;
position: relative;
padding: 0;
zoom: 1;
}

you don't need

zoom: 1;

as the width on the container is setting hasLayout, you also shouldn't need position: relative; as I see no elements inside the container which are absolutely positioned? (the main reason for using pos:rel on a container)

What I have found is that any elements which have margins, border or padding, but DO NOT have hasLayout i.e. no width float or whatever are a possible cause for concern in IE

another one..

#rightbar{
background:url(images/rightbar.png) top left no-repeat;
width: 76px;
height: 471px;
float: right;
position: relative;
display: block-inline;
}

width, height and float are all setting hasLyout =true for that element so you don't the "inline-block" trigger nor should you need

position:relative

, unless that element is floating over the edge of another element which it doesn't look like it is as I see no negative margins.

All browsers are supposed to ignore the

display

property when it's set on a floated element, because floating an element automatically makes it into a block level element. The exception, you knew there would be one right ;), putting

display: inline;

on a floated element fixes a couple of IE6 bugs so it might be worth doing that.. it doesn't have any serious side effects for other browsers because they ignore it like they're supposed to.

If you can strip the CSS back to what it needs to be for everyone else then come back with the code and a bit of description about which bit of the page is moving, misbehaving or disappearing, I'm sure it will be easier to provide some general safety rules for you

-Suzy

[polomolo]

Hi Suzy... thanks for all your help,

All I did here was just cleared all that other stuff out and did it the way I had started. This works great with Safari and Firefox at the moment:

This is what its supposed to look like:
[aycu24.webshots.com...]

This is what it looks like on IE: (you can't really see what's going on, but everything just tiles down below that side bar with is #leftbar...these objects are not visible unless I put "position: relative;" on #onlinebg... Basically Everything after #rightbox (which is the little box to the right of the button "clothing"... has been tiled all the way down below the container #onlinebg.
[aycu27.webshots.com...]

Also I'm having another problem in Dreamweaver, I don't know if its really that important, where the objects on the page are a tiny bit out of place (which isn't visible in firefox or safari) but the problem fixes itself when I put all the divs to position:relative, basically that's why I had those on there anyway..

Here's my original CSS for the pages with the problem:

___________________________
body{
font:80% Optima,sans-serif;
background:#000000;
color:#CCCCCC;
margin:0;
padding:0;
}

#container{
margin:0 auto;
width: 543px;
}

#headerleft{
background: url(images/sidehead.png) center no-repeat;
width: 143px;
height: 205px;
float: left;
}

#headerright{
background: url(images/header.png) top center no-repeat;
width: 400px;
height: 89px;
float: right;
}

.button{
width: 143px;
height: 180px;
float: left;
}

.button .home a{
background: url(images/home.png) top left no-repeat;
width: 143px;
height: 45px;
float: left;
}

.button .online a{
background:url(images/online.png) top left no-repeat;
width: 143px;
height: 45px;
float: left;
}

.button .purchase a{
background:url(images/purchase.png) top left no-repeat;
width: 143px;
height: 44px;
float: left;
}

.button .contact a{
background:url(images/contact.png) top left no-repeat;
width: 143px;
height: 46px;
float: left;
}

/*online shop stuff*/

#onlinebg{
width: 400px;
height: 679px;
float: right;
}

#top{
background:url(images/onlinetitle.png) top left no-repeat;
width: 400px;
height: 67px;
float: left;
}

#leftbar{
background:url(images/left-bar.png) top left no-repeat;
width: 64px;
height: 612px;
float: left;
}

#clothing{
background: url(images/product_images/clothing.png) top left no-repeat;
width: 107px;
height: 105px;
float: left;
}

.clothingbut{
width: 171px;
height: 80px;
float: left;
}

.clothingbut .clobut a{
background: url(images/clothing_but.png) top left no-repeat;
width: 171px;
height: 80px;
float: left;
}

#rightbox{
background: url(images/rightbox.png) top left no-repeat;
width: 58px;
height: 80px;
float: left;
}

#clothingunder{
background:url(images/clothingunder.png) top left no-repeat;
width: 229px;
height: 25px;
float: left;
display: inline;
margin: 0 auto;
}

#between{
background:url(images/between.png) top left no-repeat;
width: 336px;
height: 36px;
float: left;
display: block;
margin: 0 auto;
}

#shoes{
background: url(images/product_images/shoes.jpg) top left no-repeat;
width: 107px;
height: 104px;
float: left;
margin: 0 auto;
}

.shoesbut{
width: 153px;
height: 80px;
float: left;
}

.shoesbut .shobut a{
background: url(images/shoes_but.png) top left no-repeat;
width: 153px;
height: 80px;
float: left;
}

#bottombar2{
background:url(images/bottombar2.png) top left no-repeat;
width: 107px;
height: 367px;
float: left;
}

#bottombar1{
background:url(images/bottombar1.png) top left no-repeat;
width: 153px;
height: 391px;
float: right;
}

#rightbar{
background:url(images/rightbar.png) top left no-repeat;
width: 76px;
height: 471px;
float: right;
}
/*online shop stuff*/

___________________________

</head>

<body>
<div id="container">
<div id="headerleft">&nbsp;</div>
<div id="headerright">&nbsp;</div>


<div id="onlinebg">
<div id="top">&nbsp;</div>
<div id="leftbar">&nbsp;</div>
<div id="clothing">&nbsp;</div>
<div class="clothingbut">
<div class="clobut"><a href="clothing.html"></a></div></div>
<div id="rightbox">&nbsp;</div>
<div id="clothingunder">&nbsp;</div>
<div id="between">&nbsp;</div>
<div id="shoes">&nbsp;</div>
<div class="shoesbut">
<div class="shobut"><a href="shoes.html"></a></div></div>
<div id="rightbar">&nbsp;</div>
<div id="bottombar1">&nbsp;</div>
<div id="bottombar2">&nbsp;</div>
</div>
<div class="button">
<div class="home"><a href="index.html"></a></div>
<div class="online"><a href="online.html"></a></div>
<div class="purchase"><a href="purchase.html"></a></div>
<div class="contact"><a href="contact.html"></a></div>
</div>
<div id="bottombar">&nbsp;</div>


</div>
</body>
</html>

[polomolo]

I found that the design of the page might be the problem, so I kinda just ignored all those lil boxes and divs that I had and had more of a horizontal alignment rather than vertical...and this fixed it. So instead of slicing bars to go from top to bottom, i did it left to right, and this way they all had the exact height on one line. So everything went along with the image box.

But I found another little tiny problem...
[aycu10.webshots.com...]

It looks fine in dreamweaver, and obviously safari and firefox... that black empty space is supposed to be part of the box on top of it. I'm pretty sure its not the image file... but i'll keep checking I guess.

Anyone have an idea why IE would do that?

[polomolo]

Found a solution for that problem as well... just incase anyone else is having trouble with a similar problem:
- the image was shown a bit shorter than what it is (don't know why)... so I went back to photoshop and lengthened the image, then in #rightbox I put overflow: hidden; This way the image covered that black area as well.

Thanks to all who helped.
I hope no one goes through what I went through! (but i guess that's unstopable haha)..

Paul.