Indexhibit Support

Hi all,

I got a massive problem when my page is shown with Internet Explorer (IE7). As I already found out in the forum I am aware that IE sometimes causes trouble with Indexhibit. The main problem is that the menue section (white background) with its set position does not work.
My test site is:

www.bureau-bald.de/online

Maybe someone can help?

My problems:
01) The length of the dark grey border-bottom line (length about 10px) above the menue wordings such as WORK at the left menue section is shown with a different length (displayed at the hole menue widht (215px)). Is there any way to fix the length with IE?

02) MORE IMPORTANT: The white background at the container section (right - where the text and images of the projects is displayed) is displayed with a endless width in IE 7 and at a different position. Is there any way to programm a exact size of the white background?

03) Maybe this is the solution for problem 02 but I am not sure.
Do I have to script someting in the ie.css in the Indexhibit.../site /sample section or does the Ie.css script take all relevant information from the style.css?

Thanks in advance.
Cheers,
Patrique

Here is my Css Code - maybe it did something wrong with the padding and margins?

#menu {
width: 215px;
overflow: none;
top: 0;
bottom: 0;
left: 40px;
position: fixed;
height: 100%;
background-color: #fff;
padding: 10px;
}

#menu ul {
list-style: none;
margin: 12px 0 2px 0;line-height:1.7;
}

#menu ul li.section-title {font-weight: bold; max-width: 10px;
color:#666666;margin: 0 0 4px 0;
border-bottom: 1px solid #666666;
}

#content {
height: 100%;
margin: 115px 0pt 0pt 295px;
top: 0pt;
width:750px;
padding: 0;

.container {
padding: 5px 5px 25px 5px; background-color:#FFFFFF;
}

#content p { width: 600px; margin-left:10px; }

p {
margin: 0 0 9px 0;
}

It should say: problem with Margin :)

Hi Patrique,

By looking quickly at your css, I would suggest 2 things:

1. try to avoid mixing units in your margin declarations - or anywhere else for that mater (eg: px and pt or px and no unit...)

2. your #content{} declaration is lacking the final closing curly bracket...

Might help or not, but I would first correct that.

Next I would suggest maybe trying to use margin overrides for IE only using the ie.css which is in the same folder as your style.css

HI Antoine,
thanks a lot for your friendly help. I did fix number 01 and 02. After that I did add this part at the Ie.css from the Style.css. Maybe I did add to much? or I did something wrong but the final outcome was the same at IE 7.

html {
overflow: hidden;
}

body {
height: 100%;
overflow: auto;
}

#menu {
float: left;
width: 215px;
overflow: auto;
top: 0;
bottom: 0;
    left: 40px;
position: fixed;
height: 100%;
    background-color: #fff;
    padding: 10px;
}

#content {
height: 100%;
margin: 115px 0 0 295px;
top: 0;
    width:750px;

Regards,
patrique

But, unless you've changed the conditional statements in the template these will not affect IE7. Right? This is the ie.css file right?

God I'm so annoyed with IE...now we need to toss in another conditional css page just for IE7? And what about IE8?

But, if you have the above in the ie.css file it's really way off...for starters you need to have the % percentages that were there originally...and you can not style the #content div margin top and width this way...use #content .container instead. Real adverse reactions will happen.

I have solved all of this, IE wonkiness, with a javascript utility but I'm not ready to release this...and don't have time right now to dig it out. Will arrive with the next version (and no I don't have an answer for when).

Hi Vaska,
thanks. I know about your tousands of replies to IE. This was the ie.css. I did change all back to the beginning. Now it looks like this:

/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
html {
overflow: hidden;
}

body {
height: 100%;
overflow: auto;
}

#menu {
float: left;
width: 215px;
overflow: auto;
top: 0;
bottom: 0;
position: fixed;
height: 100%;
    background-color: #fff;
}

#content {
height: 100%;
margin: 0 0 0 215px;
top: 0;
}

* html div#menu {
width: 20%;
}

* html div#content {
height: 100%;
width: 80%;
overflow: auto;
position: absolute;
margin: 0;
}

img.png {
    background-image: expression(
        this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter =
        "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src +
        "', sizingMethod='image')",
        this.src = "/path/to/transparent.gif"
    );
}

If you got any easy and simple hint to make the position of the menue section and the project section fixed and more similar to my stye.css please let me know.
Thanks for all that great work and Indexhibit is a gret tool for Websites. best,
patrique

Hey Vaska,

I have a question about IE as well. I'm working on and customizing my site in the style.css. Do i also have to make changes in the ie.css for the site to look 'better' when using ie? The look of the site does change in ie. On some ie the collapsable menu doesn't work.

Just a quick question. Thanks!

Mark

Hi Mark,

Antoine wrote a nice post on this issue.

Thanks snoep for pointing the post, and I've updated it to make sure that people understand it is for IE6 only... like Vaska pointed out. Sorry I overlooked that.

I want to add a little bit to this topic...

My experience with doing CSS for IE, in order to have a consistent look across all platform, is mostly to avoid dangerous zones that IE tends to turn into a mess. There is not one way to do this, but the best attitude is to add one (or a few) CSS properties and test on all browser if the expected result is consistent... there is no fast way, no preview software that can give you a definite output besides that.

This is a lot of pain and not a lot of fun, but after doing it for a few weeks/projects/sites, you'll pickup where you should use this and that and know when to avoid some usage of more difficult properties.

My personal "way of thinking" about CSS is to use only what I can thrust will be rendered the same way first in IE and then in other browsers. Then, you can start using more complex techniques and build up from there. It will always require a lot of testing to achieve a satisfying result... for now, it can't be avoided if you want to achieve a professional level.

Hope that helps.