Hi,

in my IE8 there is now difference to FF. Which version of IE you use? If it's a (very) lower version please have a look here:

http://gs.statcounter.com/#browser_version-ww-monthly-201202-201203-ba r, what means in this case, don't worry.

Hans-Günter

You have some code errors in the page that might help if they were fixed.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.humboldt. edu%2Fcicd%2F

Martin

Hhm:

... again my question about your IE version.

Hans-Günter

This should fix it. I don't have IE to test but IE is a nightmare with margins and paddings.

#Right ul {

    background: url("../images/faderight.gif") no-repeat scroll right top transparent;

    list-style-type: none;

    margin: 0 0 40px;

    margin: 0 0 40px 10px; /* The 40px is not needed */

    padding-top: 10px;

    padding: 0;

}

 

#Right ul li {

    line-height: 1.3em;

    margin: 7px 5px 0 -30px;

    margin-bottom: 10px;

    padding: 0;

}

Overtim3 wrote:

The spacing may look a little funny still but much more bearable than before.

What is still wrong with the spacing? Can you screenshot the updated problem?

It's difficult to tell without IE but i would change the below and see if it helped any.

#ThreeColumns {

    background-color: transparent;

    float: left;

    margin: 0;

    margin-left: 15px;

    padding: 0 15px;

    padding: 0;

    width: 425px;

}

* html #Right ul li {

    margin-left: 10px;

}

Best way is to just keep checking your site in the validator and do what you're doing with checking on both machines. By using something like FireBug you can troubleshoot a lot of the problems that arise but the problem with viewing it on a non-windows machine is that it doesn't specifically show your issue. One thing to consider is that IE is different from other browsers in the way it deals with padding and margin. I would try and use as little of both as possible and re-check the mathematics of your DIV widths.

Having said that, the order of your DIVs seems to be causing a few issues. If you re-order them, this should help your gaps and will enable you to reduce the amount of margin and padding used.

• Move <div id="mission"> AFTER <div id="navigation">
• Move <div id="right"> AFTER <div id="ThreeColumn">
• Change floats in 'Mission" and "Right" from float:Right to float:left
• Remove "position:relative" and "display:block" from ContentWrapper

You should then see that the line under Mission meets the vertical line of Navigation and that you now have a gap to the right of "Right". Test in your IE and if this has solved the additional gaps in "Right", post back and we can work on the margins/padding if you still have some issues.

Can you upload a test page with those changes made?

Copy the page you were working on to make the changes, save it with a "_test" afterwards and upload to the same location as the other pages. There should be no way to link to that test page from the rest of the site so you need to send us the direct URL.

With the CSS, you can either embed it all in the top of the document or duplicate the CSS and link to your new CSS from the new "_test.html" document.

Eg:

<style type="text/css">

<!--
@import url(styles/main_test.css);     
-->
</style>

In your index_test.htm file, it seems to be linking to the original template. To detach from the template, go to Modify > Templates > Detach from template. You can then manually edit the CSS file reference and upload both files into their relative location.

This will give you a page and a css file to test on while making updates. Once you realise what is working, you can transfer the code to your original template file and then it will be applied to all pages.

Glad you have got it fixed! It looks good to me.

You have a double margin on the main content area. I would try the below and see if that helps.

#ThreeColumns {

  background-color:transparent;

  float:left;

  margin: 015px;

  padding:0;

  width:425px;

}

 

#Content {

  font-family:Verdana, Geneva, sans-serif;

  margin:10px 0 60px 0;

  padding:0;

}