...

View Full Version : Changes to IE6 css file not affecting the layout



ballr
05-25-2010, 08:07 PM
I am using a virtual machine to test in IE6. I have a CSS menu that utilizes a fly out for the submenu. It isn't displaying the same as in IE7 & 8. I have the <!--[if IE6] blah blah in the head of the document template (I'll explain the template aspect soon) but when I make changes to the styles in the IE6 css file, nothing changes???

I am using the Umbraco CMS to build the site in. The menu is built with a combination of CSS, XSLT and the normal HTML. All of the "if" statements are embeded in a master template that each page uses. I'm not sure if the general public can see the site, but if you can here is the link to the page - http://beta.testamericainc.com/services/specialty-services/source-air-testing.aspx.

The menu is in the box labeled Specialty Offerings.

First thing is figuring out why I can't modify the menu in my IE6 css file and the Second thing is actually fixing the menu so it displays correctly and the fly outs work.

Thanks for your help!!!

effpeetee
05-25-2010, 08:11 PM
You may find this useful. (http://www.my-debugbar.com/wiki/IETester/HomePage)


Also there is much help here. (http://www.exitfegs.co.uk/Sources.html)

Frank

ballr
05-25-2010, 08:21 PM
Thanks Frank!

However I can't see alot of these things because of the security settings on my work network.

Any thoughts on my issue?

effpeetee
05-25-2010, 08:26 PM
Generall speaking, use ems or percentages for your dimensions. Set Body and HTML to have

width:100%
height:100%

also it is a good idea to start the CSS with

*{padding:0;
margin:0;}

to reset the browsers to zero before they start.

Other than that, We would need to see your code or have a link to the site.

Frank

ballr
05-25-2010, 08:48 PM
Thanks! I'll take a look at that.

Were you able to see the site from original post?

Here is the css:


.menu2{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:325px;
height:160px;
position:absolute;
font-size:12px;
margin:0 0;
}
.menu2 ul {
padding:0;
margin:0 0 0 -10px;
list-style-type: none;
background:#eee;
width:325px;
height:160px;
border:1px solid #2356B6;
}
.menu2 ul li ul {
visibility:hidden;
position:absolute;
height:0;
overflow:hidden;
top:0;
left:200px;
}
.menu2 ul li {
float:left;
}
.menu2 ul li a, .menu2 ul li a:visited {
display:block;
float:left;
text-decoration:none;
color:#000;
width:190px;
height:auto;
line-height:25px;
font-size:12px;
background:transparent;
padding-left:10px;
}
* html .menu2 ul li a, * html .menu2 ul li a:visited {
width:100px;
w\idth:90px;}

.menu2 table {
border-collapse:collapse;
border:0;
margin:0;
padding:0px;
font-size:1em;
position:absolute;
left:0;
top:0;
}

/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */

.menu2 ul li:hover a,
.menu2 ul li a:hover{
background:#2356B6;
color:#fff;
}

.menu2 ul li:hover {position:relative; z-index:100;}
* html .menu2 ul li a:hover {position:relative; z-index:100;}

.menu2 ul li:hover ul,
.menu2 ul li a:hover ul {
visibility:visible;
position:absolute;
height:auto;
border:1px solid #2356B6;
background:#7a7a7a;
padding: 0 15px 0 0;
overflow:visible;
width:250px;
}
.menu2 ul li:hover ul li a,
.menu2 ul li a:hover ul li a{
display:block;
background:transparent;
color:#fff;
line-height:15px;
padding:5px 0 5px 10px;
height:auto;
text-decoration:underline;
width:250px;
}

.menu2 ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover {
background:#2356B6;
color:#fff;
width:250px;
}
.menu2 ul li:hover ul li ul,
.menu2 ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
overflow:hidden;
top:0;
left:105px;
}
.menu2 ul li:hover ul li:hover ul,
.menu2 ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
height:auto;
color:#000;
padding:0;
border:1px solid #2356B6;
list-style-type:none;
background:#7a7a7a;
}
.menu2 ul li:hover ul li:hover ul li a,
.menu2 ul li a:hover ul li a:hover ul li a {
display:block;
background:transparent;
color:#fff;
}

.menu2 ul li:hover ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover ul li a:hover {
background:#2356B6;
color:#fff;
}

ballr
05-25-2010, 08:52 PM
Here is the xsl code that builds the menu dynamically in Umbraco:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib ">
<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">
<div class="menu2">
<ul>
<!-- For Each child node of the currentpage -->
<xsl:for-each select="$currentPage/node">
<li>
<!-- Group Name -->
<a class="fly" href="#"><xsl:value-of select="@nodeName" /></a>

<!-- we're under the item -->
<xsl:if test="(count(current()/node) > 0)">
<ul>
<xsl:for-each select="current()/node">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="data [@alias = 'SpecialtyServiceDetailName']"/>
</a>
</li>
</xsl:for-each>
</ul>
</xsl:if>
</li>
</xsl:for-each>
</ul>
</div>
</xsl:template>

</xsl:stylesheet>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum