Cross-browser CSS problem

[westis]

Hi,

I've decided to start building a web-site in CMS Made Simple after all & it sure is simple! But cross-browser CSS is always a challenge... I haven't been able to find out why the bottom border of the footer of this site: www.kisima.org/cmsmadesimple stretches out on the sides in IE. In Firefox it works perfectly and the border is hidden behind the corner images.

What have I missed?

The HTML for the footer is:

Code: Select all

<div class="bottom">
        <img class="bottomleft" src="images/bottomleft.gif" alt=" " width="33" height="38" />
        <img class="bottomright" src="images/bottomright.gif" alt=" " width="33" height="38" />
        Powered by CMS Made Simple {cms_version}<br />
        Think you've found a bug?  <a href="http://bugs.cmsmadesimple.org">Report</a> it.
</div>

And the relevant CSS:

Code: Select all

div.bottom {
    background-color: #781c12; 
    border-bottom: 3px solid #44100B;
    border-top: 3px solid #44100B;
    padding: 0px; 
    text-align: center;
    font-size: 11; 
	position: relative;
	clear: both;
    height: 32px;
   \height: 32px;
   h\eight: 26px;
}
.bottomleft {
    float: left;
    clear: both; 
    margin: -3px 0px 0px 0px;
    \margin: -3px 0px -3px 0px; 
    m\argin: -3px 0px 0px 0px;
    border: 0;
}
.bottomright { 
     float: right; 
     clear: right;
     margin: -3px 0px 0px 0px;
     \margin: -3px 0px -3px 0px; 
    m\argin: -3px 0px 0px 0px;
    border: 0;
}

A minor thing is the white space below the image above the menu in IE. There should be no white space and there is none in FF...

Thanks!

[Woudloper]

It has to do with the height of the div.bottom that is difined in the .css document. This needs to be a different height for 'Internet Explorer'.

Unfortunatly you are using CSS Hacks to make it working on both browsers. As you probably know Internet Explorer is rather buggy if you talk about stylesheet implementation. You can best avoid CSS Hacks, see more about this in the following articles:

• Digital Web - Keep CSS Simple
• 456 bereastreer - CSS tips and tricks

If you would like to implement stylesheets, which are especially for 'Internet Explorer' you can best implement Conditional Comments. This is working OK, and it validates the page correctly.

Code: Select all

<!--[if IE]>
<style>
div.logo {
	margin-left: 10px;
}
</style>
<![endif]-->

Unfortunatly this will not work in 'CMS Made Simple' as this CMS is working with dynamic templates and not with static versions of a template (as other CMS systems are doing).

[westis]

Thanks Woudloper! I think I'll make three divs for the footer instead, one each for the corner images and one for the content in between. I'll also have a closer look at the articles you provided links to.