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. #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. #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. #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. #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. #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
  •