Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changes to IE6 css file not affecting the layout

    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/servi...r-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!!!

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Last edited by effpeetee; 05-25-2010 at 08:17 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks! I'll take a look at that.

    Were you able to see the site from original post?

    Here is the css:

    Code:
    .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;
    }

  • #6
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is the xsl code that builds the menu dynamically in Umbraco:

    Code:
    <?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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •