CSS problem...

[ShaneMCK]

I am a beginner at CSS and have good knowlege of HTML, etc.

I have an ezpublish intranet site that displays correctly in IE6. I have upgraded to IE7 beta and normally use firefox.

Needless to say, the page isn't displaying correctly...

IE6:

http://img138.imageshack.us/img138/3169/correct0hn.jpg

IE7/Firefox:

http://img138.imageshack.us/img138/4649/incorrect7dp.jpg

I know that the css is probably wrong....and if I need to post the css please let me know, I just don't want to clutter the page if it is not needed.

If someone could please point me in the right direction on what could be causing this....

Thanks for any help in advance.

 

[Vragabond]

Yes, please post the css or even better, give us a link to the page if possible. Basing my answer just on the picture, I might say that you have set height to some of the elements. While FF will respect the height (say 5px) and just float the contents outside the box, IE6 will not respect it and extend the box to fill the contents. But again, we can help more after we see the code.

 

[ShaneMCK]

Here it is, I think this is the right one :S :

/* SITE CSS 20040415 */

div#allcontent
{
    width: 750px;
    margin: 0 auto 0 auto;
}


/* PAGE HEADER */

div#header
{
    padding-top: 10px;
    padding-left: 10px;
}

div#header-design
{
    margin: 0;
    height: 70px;
    float: left;
}

div#header h1
{
    font-size: 2em;
    margin: 0;
    padding: 0.6em;
}

div#header h1 a
{
    text-decoration: none;
    color: #000000;
}


/* TOOLBARS */

div#toolbar-top
{ 
    padding: 13px 0 0 8px;
    text-align: right;
}

div#toolbar-top
{ 
    text-align: right;
}

div#toolbar-top ul
{
    float: right;
}

div#toolbar-bottom
{ 
    margin-top: 8px;
    text-align: center;
}

div#toolbar-bottom ul
{
    padding: 0.5em 0 0.5em 0;
}

div#toolbar-bottom li.toolbar-item a
{
    font-weight: bold;
}

div#toolbar-top li.toolbar-item, div#toolbar-bottom li.toolbar-item
{
    border-right: 1px solid;
    display: inline;
    margin: 0;
    padding: 0 10px 0 6px;
    white-space: nowrap;
}

div#toolbar-top div.search-line, div#toolbar-bottom div.search-line
{
    display: inline;
    vertical-align: middle;
}

div#toolbar-top div.label, div#toolbar-bottom div.label
{
    display: inline;
    text-align: left;
}

div#toolbar-top div.search-line form, div#toolbar-bottom div.search-line form
{
    display: inline;
}

div#toolbar-top div.search-line div.optionblock input,
div#toolbar-top div.search-line div.optionblock label,
div#toolbar-right div.search-full div.optionblock input,
div#toolbar-right div.search-full div.optionblock label
{ 
    display: inline;
}

div#toolbar-top input.searchinput, div#toolbar-bottom input.searchinput
{
    height: 1.6em;
    width: 7em;
}

div#toolbar-top li.toolbar-item a, div#toolbar-bottom li.toolbar-item a
{ 
    text-decoration: none;
}

div#toolbar-top li.first, div#toolbar-bottom li.first
{
    display: inline;
}

div#toolbar-top li.last, div#toolbar-bottom li.last
{
    border-right: none;
    display: inline;
}


/* TOP MENU */

div#topmenu
{
    margin: 0;
    padding: 0;
    /* border-bottom: 1px solid; */
}

div.topmenu-line
{
    border-bottom: 1px solid; /* This line needs to be set to avoid bug in IE */
}

div#topmenu-design
{
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: middle;
}

div#topmenu ul
{
    margin: 0;
    padding: 0;
}

div#topmenu li
{
    margin: 0;
    padding: 0;
    border-right: 1px solid;
    float: left;
    display: block;
}

div#topmenu li div.spacing
{
    padding: 0.2em 12px 0.3em 12px;
}

div#topmenu li a
{
    text-decoration: none;
}

div#topmenu li a:hover
{
    text-decoration: underline;
}


/* SUB MENU */

div#submenu
{
    /* margin-top: -1px; */
    padding: 0;
    border-bottom: 1px solid; /* This line needs to be set to avoid bug in IE */
}

div#submenu-design
{
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: middle;
    position: relative;
}

div#submenu ul
{
    padding: 0;
    margin: 0;
}

div#submenu li
{
    margin: 0;
    float: left;
    display: block;
}

div#submenu li div.spacing
{
    padding: 0.2em 12px 0.3em 12px;
}

div#submenu li a
{
    text-decoration: none;
}

div#submenu li a:hover
{
    text-decoration: underline;
}


/* PATH */

div#path-design
{
    margin: 0.2em 12px 0.2em 12px;
}

div#path p
{
    margin: 0;
}

div#path p a
{
    text-decoration: none;
}


/* COLUMNS */

div#columns
{
    height: 100%; /* Needs to be set to avoid bug in IE 5.5 */
}


/* MENUES */

div#leftmenu ul, div#rightmenu ul
{
    margin-left: 6px;
}

div#leftmenu
{
    float: left;
    width: 13em;
}

div#leftmenu-design li.menu-level-0
{ 
    text-decoration: none;
    border-top: 1px solid;
    padding: 4px 0 2px 10px;
    list-style-type: none;
}

div#leftmenu-design li.menu-level-0 a
{ 
    text-align: center;
    font-weight: bold;
    text-decoration: none;
}

div#leftmenu-design li.menu-level-1
{ 
    text-decoration: none;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    list-style-type: none;
}

div#leftmenu-design li.menu-level-1 a
{ 
    text-align: center;
    text-decoration: none;
}

div#rightmenu 
{
    float: right;
    width: 15em;
}

div#rightmenu-design
{
    padding-right: 10px;
}

div#maincontent
{
}

div.maincontent-bothmenus
{ 
    margin-left: 14em;
    margin-right: 16em;
    height: 100%; /* Needs to be set to 1% to avoid bug in IE 5.5 */
}

div.maincontent-noleftmenu
{ 
    margin-left: 10px;
    margin-right: 16em;
    height: 100%; /* Needs to be set to 1% to avoid bug in IE 5.5 */
}

div.maincontent-norightmenu
{ 
    margin-left: 14em;
    margin-right: 10px;
    height: 100%; /* Needs to be set to 1% to avoid bug in IE 5.5 */
}

div.maincontent-nomenus
{ 
    margin-left: 10px;
    margin-right: 10px;
    height: 100%; /* Needs to be set to 1% to avoid bug in IE 5.5 */
}

div#fix /* This style breaks the unwanted connection between 
the content of the maincontent box and the menues on the 
left and right in some browsers */
{
    float: left;
    width: 100%;
}


/* NAVIGATORS */

div.content-navigator
{
    display: block;
    clear: both;
}

div.content-navigator div
{
    display: inline;
    text-align: center;
}

div.content-navigator div.content-navigator-separator, div.content-navigator div.content-navigator-separator-disabled
{
    padding-left: 4px;
    padding-right: 4px;
}

div.content-navigator div.content-navigator-arrow
{
    font-size: 150%;
}


/* TOOLBOXES */

div.toolbox
{ 
    width: 100%;
    margin-bottom: 8px;
    margin-top: 8px;
}

div.toolbox-design
{ 
    padding: 0px;
}

div.toolbox-design h2
{ 
    font-size: 1em;
    margin-top: 0px;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

div.toolbox-design div.toolbox-content
{ 
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 10px;
}

div.toolbox-design input.searchtext, div.toolbox-design input.textinput
{
    height: 18px;
    width: 120px;
    border: 1px solid;
}

div.toolbox-design label
{
    font-weight: normal;
    margin-bottom: 0;
    padding: 6px 0 0 0;
}

div.toolbox-design form
{
    vertical-align: bottom;
}

div.toolbox-design div.info-text p
{ 
    font-weight: normal;
}

div.toolbox-design div.attribute-link p
{ 
    font-weight: normal;
    padding: 0 0 0 6px;
    vertical-align: middle;
}

div.toolbox-design div.attribute-link-disabled p
{ 
    font-weight: normal;
    padding: 0 0 0 6px;
    vertical-align: middle;
}


/* TOOL LISTS */

div.toollist
{ 
    width: 100%;
    margin: 8px 0 8px 0;
}

div.toollist-design
{ 
    padding: 0px;
    border: 1px solid;
}

div.toollist-design h2
{ 
    font-size: 1em;
    margin-top: 0px;
    padding: 2px 0 3px 10px;
}

div.toollist-design div.content-view-children
{ 
    padding: 3px 10px 10px 10px;
}

div.toollist-design h3
{ 
    margin: 0;
    text-decoration: underline;
}

div.toollist-design div.class-article div.attribute-short p
{ 
    margin: 0;
}

div.toollist-design div.class-article div.attribute-link p
{ 
    margin: 0 0 10px 0;
}

div.toollist-design div.class-article div.attribute-link-disabled p
{ 
    font-weight: normal;
    padding: 0 0 0 6px;
    vertical-align: middle;
}


/* FOOTER */

div#footer
{ 
    clear: both;
}

div#footer-design 
{
    padding: 10px 0 10px 0;
    text-align: center;
}

div#footer-design address
{
    font-style: normal;
}

div#footer-design a
{
    text-decoration: none;
}


/* GENERAL ELEMENTS */

div#maincontent h1
{ 
    font-size: 1.8em;
    font-weight: bold;
    margin-top: 0.2em;
}

div#maincontent h2
{ 
    font-size: 1.4em;
    font-weight: bold;
}

div#maincontent h3
{ 
    font-size: 1.1em;
    font-weight: bold;
}

div#maincontent h4
{ 
    font-size: 1em;
    font-weight: bold;
}

div#maincontent-design h5
{ 
    font-size: 1em;
    font-weight: bold;
}


/* GENERAL TABLE */

table th
{ 
    background-color: #d9e5f2;
}

/* SUBMIT BUTTONS */

input.defaultbutton
{
    font-weight: bold;
    border: 1px solid;
    margin: 0.5em 0.5em 0 0;
}

input.button
{
    border: 1px solid;
    margin: 0.5em 0.5em 0 0;
}

input.searchbutton
{
    border: 1px solid;
}

input.shopbutton
{
    border: 1px solid;
}

input.searchimage
{
    width: 18px;
    height: 18px;
    background-image: url(../images/button.gif);
    background-repeat: no-repeat;
}

 

[Vragabond]

When you say this might be the right one, does that imply more than one? Because I couldn't see anything here that would relate to the part that looks wrong in FF. Could you post your html, primarily the one around your problematic areas? And then try to match corresponding css code.

Incidentally, your css is somewhat documented, but the documentation seems to be more confusing than not. In the documentation you have top menu, sub menu, menu, navigator, tool list and more, and I seem to be missing most of those parts in the actual website, or at least I am confused as to what they could relate to.

 

[ShaneMCK]

I apologize for my ignorance.

Here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en-GB" 
lang="en-GB">

<head>

<style type="text/css">
    @import url("/ezpublish/design/base/stylesheets/core.css");

    @import url("/ezpublish/design/base/stylesheets/site.css");

    @import url("/ezpublish/var/intranet/storage/packages/clean_grey
/files/default/file/site-col.css");
    @import url("/ezpublish/design/base/stylesheets/classes.css");
 
    @import url("/ezpublish/var/intranet/storage/packages/clean_grey
/files/default/file/classes-.css");
    @import url("/ezpublish/design/standard/stylesheets/debug.css");
    </style>


<!--[if lt IE 6.0]>
<style>
div#maincontent-design { width: 100%; } /* This is needed to 
avoid width bug in IE 5.5 */
</style>
<![endif]-->


                
    <title>Habersham EMC Intranet - Habersham EMC Intranet</title>

    
    
    
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <meta http-equiv="Content-language" content="en-GB" />

    
        <meta name="author" content="eZ systems" />

        <meta name="copyright" content="eZ systems" />

        <meta name="description" content="Content Management System" />

        <meta name="keywords" content="cms, publish, 
e-commerce, content management, development framework" />

        <meta name="0" content="eZ systems" />

        <meta name="1" content="eZ systems" />

        <meta name="2" content="Content Management System" />

        <meta name="3" content="cms, publish, e-commerce, 
content management, development framework" />

    
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />
    <meta name="generator" content="eZ publish" />
    

<link rel="Home" href="/ezpublish/index.php/intranet" 
title="Habersham EMC Intranet front page" />
<link rel="Index" href="/ezpublish/index.php/intranet" />

<link rel="Top"  href="/ezpublish/index.php/intranet" 
title="Habersham EMC Intranet - Habersham EMC Intranet" />
<link rel="Search" 
href="/ezpublish/index.php/intranet/content/advancedsearch" 
title="Search Habersham EMC Intranet" />
<link rel="Shortcut icon" 
href="/ezpublish/design/standard/images/favicon.ico" 
type="image/x-icon" />
<link rel="Copyright" 
href="/ezpublish/index.php/intranet/ezinfo/copyright" />
<link rel="Author" 
href="/ezpublish/index.php/intranet/ezinfo/about" />
<link rel="Alternate" 
href="/ezpublish/index.php/intranet/layout/set/print" 
media="print" title="Printable version" />
</head>
<body>

<div id="allcontent">
    <div id="topcontent">

                <div id="header">
            <div id="header-design">

                
                                    <a href="/ezpublish/index.php/intranet"><img 
src="/ezpublish/var/intranet/storage/images/design/
habersham_emc_intranet/172-4-eng-GB/habersham_emc_intranet
.jpg" alt="HEMC Intranet" /></a>
                            </div>
        </div>
        
            <div id="toolbar-top">
            <div class="toolbar-design">
                <ul><li class="toolbar-item first">
<div class="label">Search: </div><div 
class="search-line"><form 
action="/ezpublish/index.php/intranet/content/search" 
method="get"><input class="searchinput" type="text" 
size="10" name="SearchText" value="" />
<input type="image" class="searchimage" 
src="/ezpublish/design/standard/images/1x1.gif" /></form></div>
</li><li class="toolbar-item last">Online: 0:0</li></ul>            </div>

             <div class="break"></div>
        </div>
    
                <div class="break"></div>
    </div>

    <hr class="hide" />

    <div id="topmenu">
    <div id="topmenu-design">

    <h3 class="hide">Top menu</h3>

        <ul>
                                                            
<li ><div class="spacing"><a 
href="/ezpublish/index.php/intranet/news">
News</a></div></li>
                                                                                                    
<li ><div class="spacing"><a 
href="/ezpublish/index.php/intranet/policies">
Policies</a></div></li>
                                                                                                    
<li ><div class="spacing"><a 
href="/ezpublish/index.php/intranet/
common_forms_documents">Common Forms & 
Documents</a></div></li>

                                                                                                    
<li ><div class="spacing"><a 
href="/ezpublish/index.php/intranet/media_files">Media 
files</a></div></li>
                                                                                                    
<li ><div class="spacing"><a 
href="/ezpublish/index.php/intranet/
training_continuing_ed">
Training & Continuing Ed</a></div></li>
                                                                                                    
<li ><div class="spacing"><a 
href="/ezpublish/index.php/intranet/classifieds">
Classifieds</a></div></li>
                                                                                                    
<li ><div class="spacing"><a 
href="/ezpublish/index.php/intranet/links">Links</a></div>
</li>
                                                                                                    
<li class="last "><div class="spacing"><a 
href="/ezpublish/index.php/intranet/contact_us">Contact Us</a></div></li>

                                                </ul>
    	<div class="break"></div>
    </div>
</div>

<hr class="hide" />



    <hr class="hide" />
    
    <div id="path">
        <div id="path-design">

            <p>            Habersham EMC Intranet
    </p>
        </div>
    </div>

        <hr class="hide" />

    <div id="columns">

        
        <hr class="hide" />

        
                    <div id="rightmenu">
                <div id="rightmenu-design">
                    <h3 class="hide">Right menu</h3>
                    <div id="toolbar-right">
                        <div class="toolbar-design">
                            
<div class="toolbar-item last">
                            <div class="toollist">
        <div class="toollist-design">

        <h2>Latest Items</h2>
        <div class="content-view-children">
                    
<div class="content-view-listitem">
    <div class="class-article">

     <h3><a 
href="/ezpublish/index.php/intranet/terms_of_use">Terms of 
Use - Habersham EMC Intranet</a></h3>

    
    <div class="attribute-short">
        


<p>
<!--enter content here->
</p>
    </div>

    
    </div>
</div>                    

<div class="content-view-listitem">
    <div class="class-link">

            <div class="attribute-link">
            <p><a 
href="[URL unfurl="true"]http://www.habershamemc.com">Habersham[/URL] EMC</a></p>

        </div>
    
    </div>
</div>                    

<div class="content-view-listitem">
    <div class="class-link">

            <div class="attribute-link">
            <p><a 
href="[URL unfurl="true"]http://www.cooperative.com">Cooperative.com</a></p>[/URL]
        </div>
    
    </div>

</div>                    

<div class="content-view-listitem">
    <div class="class-link">

            <div class="attribute-link">
            <p><a 
href="[URL unfurl="true"]https://touchstoneenergy.cooperative.com/">Touchstone[/URL] 
Energy Cooperatives</a></p>
        </div>
    
    </div>
</div>                    

<div class="content-view-listitem">
    <div class="class-link">

            <div class="attribute-link">
            <p><a href="[URL unfurl="true"]http://www.greenpoweremc.com/">[/URL]
Green Power EMC</a></p>
        </div>
    
    </div>
</div>                </div>
        </div>
    </div>

                    </div>                        </div>
                    </div>
                </div>
            </div>
        
        <hr class="hide" />

                    
                                        
            
            <div id="maincontent" 
class="maincontent-noleftmenu">
                <div id="fix">
                    <div id="maincontent-design">

            
        
                        
<div class="content-view-full">
    <div class="class-folder">

        <h1>Habersham EMC Intranet</h1>

        
        
                        
    </div>
</div>


                    </div>
                    <div class="break"></div>

                </div>
            </div>

            <div class="break"></div>
    </div>

    <hr class="hide" />

    
    <div id="footer">
        <div id="footer-design">

By using this site you Agree to the 
<a href="/ezpublish/index.php/intranet/terms_of_use">Terms 
of Use</a>
            <address>
©2006 HEMC
    </div>

    <div class="break"></div>
</div>



</body>
</html>