[SOLVED] IE6 is messin up my website

[tissue]

I am trying to find out what the hell is wrong with my websites CSS. It is shown perfect in firefox and IE7. But I hear from other people that it is rubbish in IE6.

These problems started when I changed the picture menu from a table to a div with divs inside it.

But I didnt find out immediately that it got messed up, so I have no idea where precisely the problem lies. I tried changing different float and clear values, but nothing seems to work. Also it is hard for me to test it out, because I cant run IE6 on my vista machine alongside version 7 of this crazy browser  .

 

here is the adress: http://entropia.wietze.net

The CSS that is important for the layout is on top of the CSS file. CSS from the menu is beneath the page section.

 

tnx for your time,

 

grtz Tissue

[tissue]

I checked with Browsershots the page without menu, and it is also messed up.

Strang thing is that the right border div is positioned correctly next to the content div. But the content div does not position next to the left border div. But they use same float...

 

grtz Tissue

[bronzemonkey]

If you want to do your own testing with IE6 I would recommend that you use Virtualbox (virtualization software - excellent step-by-step manual) and then install XP on a virtual machine within your Vista host. This way you can see first hand what the problems are and what is causing them. Hope this helps.

 

http://www.virtualbox.org/

 

As for your site, why don't you just stick with your functioning table menu if you aren't going to upgrade the whole site to a tableless layout? Hopefully someone with IE6 will be able to answer your question.

[tissue]

If you want to do your own testing with IE6 I would recommend that you use Virtualbox (virtualization software - excellent step-by-step manual) and then install XP on a virtual machine within your Vista host. This way you can see first hand what the problems are and what is causing them. Hope this helps.

 

http://www.virtualbox.org/

 

As for your site, why don't you just stick with your functioning table menu if you aren't going to upgrade the whole site to a tableless layout? Hopefully someone with IE6 will be able to answer your question.

 

tnx for the advice. First it seems so much hassle to make a virtual machine just for this. But it is getting more tempting to do that

I am indeed upgrading the website to a tableless layout (apart from the tables with data) step by step. But these problems have stopped my progress

[tissue]

not yet fixed  :'(

[bronzemonkey]

it seems so much hassle to make a virtual machine just for this.

 

What is less hassle? Taking 30 minutes to be able to test your website in a browser that ~35% of your users will be visiting your site with. Or wasting days while you wait for other people to drip feed you information about what is going wrong in IE6?

 

I've been there, and trust me, getting your own access to IE6 is essential if you don't want to waste your time and end up with a mess. If you've got a copy of XP already at hand then I would recommend you install it on a VM while you are doing something else. Virtualbox is literally idiot proof...I know, I use.

 

Part of your problem might be mixing a table and non-table layout - sounds like a nightmare. Why not keep the table layout and then work behind the scenes from scratch on a tableless conversion. Once you've got it working in all the browsers you need to you can replace your table layout.

 

It will be easier to get help here along the way too. Sorry I can't actually help you with your specific problem because I'm working myself and table-based layout problems totally baffle me. ???

[Aureole]

IE6 is messin up my website  New

 

Or maybe your website is messin' up I.E. 6?

[tissue]

Ok ill install the virtual machine with IE6, and stop bothering you 

 

Anyway, if someone can tell me how to float divs correctly , so it works in IE6 (what are the rules?), please do tell me.

 

grtz Tissue

[tissue]

virtual machine is a very handy tool. I installed it with XP and IE6. I managed to solve some of the problems of what IE6 was doing to me. Seems like IE6 couldnt handle my margin properties, so i had to include some spacer divs.

Now there is still a big problem at hand. I have no idea how to solve it:

 

My site has a menu, that has to lay over part of the content part of my site. So i placed the menu in the div above the content div, and set the top parameter to 26, to drop it down over the edge of the containing div. Works like a charm in every normal browser even in IE6.

BUT... IE6 decides to make the containing header div much higher than I tell it to be. He adds up the heights of the divs inside including the menu. And instead of overflowing the div, it is stretching it.

I tried different things i found on different forums. But nothing works. I cannot set the overflow of the header to hidden, because the overflow is what i want to see.

Setting it to hidden does work for IE considering the menu, but the rest of the content of the header gets messed up. Offcourse this does not work for firefox, because firefox actually listens and hides the overflow.

 

PLEASE PLEASE PLEASE help me out. btw i prefer to just use one working html and css for all browsers.

 

Here are the important codes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>[__WINDOWTITLE__]</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" >
<meta http-equiv="Content-Style-Type" content="text/css" >
<meta name="description" content="On this page, you can register your HOF and Global Collection, and view those off other avatars in the Entropia Universe. Entropia Universe is a MMORPG with a real cash economy system. You can actually make real money playing a game">
<meta name="verify-v1" content="K85M4LqXnhL8jDl++34sUijI472hdX3r4B3omRYEJy4=" >
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page_container">
<div id="page_header"><!-- -->
<div id="page_header_spacer"><!-- --></div>
<div id="page_title">[__TITLE__]</div>
<div id="page_menu">[__MENU__]</div>
</div>
<div id="page_left_space"></div>
<div id="page_left"></div>
<div id="page_content_container">
<div id="content"><br><br>[__CONTENT__]<br><br></div>
<div id="gradient_overlay"></div>
</div>
<div id="page_right"></div>
<div id="page_footer"><div id="page_footer_content"><?php include("php/adspace.php"); ?></div></div>
<div id="page_footer_bottom"></div>
</div>
<p>Copyright - Weet Tissue Chief 2007</p>
</body>
</html>

 

and CSS (of page items):

/*Page Layout*/

body {
background-color:#B1B9AF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
text-align:center;
}
html {
overflow:scroll;
}

#page_container{
width:949px;
margin:auto;
}

#page_menu{
position:relative;
float:left;
height:0;
top:-26px;
left: 13px;
}

#page_header{
width:949px;
height:191px;
max-height:191px;
background-image:url("../design/page_header.png");
background-position:center bottom;
background-repeat:no-repeat;
overflow:hidden;
}

#page_header_spacer{
width:100%;
height:100px;
}
#page_title{
height:91px;
width:100%;
text-align:center;
font-size:36px;
color:#FFFFFF;
}

#page_left{
float:left;
width:8px;
background-color:#2C4118;
height:440px;
}
#page_left_space{
float:left;
clear:left;
width:38px;
height:440px;
}
#page_content_container {
float:left;
width:894px;
height:440px;
background-color:#FFFFFF;
text-align:left;
overflow:hidden;
}

#page_right{
width:8px;
background-color:#2C4118;
height:440px;
float:left;
clear:right;
}

#gradient_overlay {
background-image:url(../design/main_bottom.png);
height:21px;
position:relative;
top:-21px;
width:878px;
z-index:2;
}
#page_footer{
clear:both;
margin-left:38px;
width:910px;
height:110px;
background-color:#2C4118;
}

#page_footer_content{
margin-right:8px;
margin-left:auto;
padding-top:5px;
height:95%;
width:95%;
text-align:right;
}
#page_footer_content a{
color:#FFFFFF;
}
#page_footer_bottom{
clear:both;
margin-left:38px;
width:910px;
height:13px;
background-image:url(../design/page_bottom.png);
background-repeat:no-repeat;
}

[mainewoods]

If you are counting your pixels very tightly across the page, then your problem is probably caused by the 'IE box model problem'.  Anytime you use a width or height with one of your elements like a div, then ie will calculate the actual width differently then ff and the other standards based browsers.  It was supposed to be fixed for ie7.  Here's the problem, say you defined this width as part of your css:

width:949px;

ie will say that value is composed of the content area, plus any paddding, plus any border.

ff will say that that only is composed of the content area, no paddings are counted and no borders are counted.  So say that in the case above a padding of 10 pixels was used.  ie will only make the content area 929px while ff will make it 949px! Stuff like that can cause there to be not enough room to float an item next to another item and instead it will jump to a newline after the first item.

 

Even worse, if you do not specify a padding value for all your div's, then ie will use a padding of 2px and ff will use 0px!  Same with the margins if you don't specify them.  Which may be just what your problem is. Try putting this at the top of your css:

 

div { padding:0;margin:0;border:0px none;  }

 

[bronzemonkey]

Try cleaning up your html. There is no need for "spacers". You need to use margins, padding, background images, and positioning to achieve the layout rather than trying to use divs like table cells.  Your html should look more like this:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" >
  <meta name="description" content="">
  <meta name="verify-v1" content="K85M4LqXnhL8jDl++34sUijI472hdX3r4B3omRYEJy4=" >

  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="container">
  <div id="header">
    <h1>Title</h1>
    <ul id="navigation">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div><!-- end of #header -->

  <div id="left_column"></div>

  <div id="content_wrap">
    <div id="content"></div>
  </div>

  <div id="right_column"></div>

  <div id="footer"></div>
</div>

</body>
</html>

 

Having a quick look at your css you could do with some form of global reset to get all browsers to start from the same point. I use a modified version of Eric Meyer's Reset:

 

html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, em, img, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100.01%;
font-family: inherit;
vertical-align: baseline;
}

body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

 

For the positioning of your page menu you should probably just absolutely position it relative to the header (which means you need to add {position:relative} to the css targeting #header).

 

Here's the problem, say you defined this width as part of your css:

width:949px;

ie will say that value is composed of the content area, plus any paddding, plus any border.

 

IE6 uses the w3c box model when in standards mode, and since he is using a doctype, IE6 will be in standards mode. It only uses the same box model that IE5.5 uses when in quirks mode.

 

 

[tissue]

Tnx for the nice info!!!

 

I fixed the issues in IE6.

For the menu and header I had to set a negative margin for the header, so it did not get stretched with the menu inside.

The margins messed up the layout, because of the box model in IE6. So I needed some spacer divs instead of setting a margin, to make it work. It is not a perfect piece of html, but it works. I also rather would lose the spacers!

 

Anyway, layout is good in both IE6 and firefox! yay

 

I'll set this topic as solved, and come back when I get more problems.

 

Tnx to all replyers!!!

 

grtz Tissue

 

 

[bronzemonkey]

As I said, it is not the box model in IE6 that is messing up the layout. IE6, when in standards mode, uses the same box model as modern browsers. You shouldn't be using those spacers because the problem can be easily solved with the correct css.

[tissue]

well I could not set margins that work in IE6 and Firefox.

Some times IE6 even doubled the margins set. And when setting margins it made the div bigger in IE6. And that is not what I needed.

 

If you can make it work without the spacers AND without placing extra divs, be my guest

Find the source and CSS on entropia.wietze.net

 

cheers

[bronzemonkey]

You gonna pay me?

[tissue]

You gonna pay me?

no

[mainewoods]

As I said, it is not the box model in IE6 that is messing up the layout. IE6, when in standards mode, uses the same box model as modern browsers.

--But that's only true as long as the page is valid html, isn't it bronzemonkey?  If invalid html is found, it could jump into quirks mode at any time.  did you validate the page, tissue?

[bronzemonkey]

As long as it uses a valid doctype it is in standards mode.

[tissue]

As I said, it is not the box model in IE6 that is messing up the layout. IE6, when in standards mode, uses the same box model as modern browsers.

--But that's only true as long as the page is valid html, isn't it bronzemonkey?  If invalid html is found, it could jump into quirks mode at any time.  did you validate the page, tissue?

 

offcourse I did validate it with w3c. And therefore it also has a valid doc type.

 

I didnt dare to submit an unvalidated page with errors here

I read some other topics before posting

 

Still I had trouble with setting margins and IE6. IE6 did other things than firefox.

 

But as I said, it works now, but only not most elegant.

I might spend some time and frustration optimizing the layout later, now i have other priorities

 

tnx again for all the feedback!

 

grtz Tissue