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 8 of 8
  1. #1
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts

    IE7 and its ability to render XHTML

    I am having some troubles with IE7 and its ability to render XHTML. I am trying to produce a seperate CSS for IE7 which was working fine until i put the doctype. I need to get the third one of these working with the declaration. The idea of this menu is when a user holds down ctrl and goes up or down at wheel the menu will have the same effect on IE7 as it does on FF. You will see that the first and second snippet show this is working. As soon as i add the document type declaration it goes to pot.

    Try this in Fire Fox (rememebr to try to expand the text):
    Code:
    <?xml version="1.0"? encoding="UTF-8"?>
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Jamie's Computers</title>
    <!-- Navigation box -->
    <style>
    /* Menu CSS  */
    
    ul#nav
    {
    	list-style:none;
    	padding:0px;
    	margin:0px;
    	width:11em;
    }
    
    ul#nav li
    {
    	position:relative;
    	background-color:#036;
    	width:11em;
    }
    
    ul#nav li.cat
    {
    	height:2em;
    }
    
    ul#nav li img
    {
    	position:absolute;
    	top:0;
    	left:0;
    	height:2em;
    	width:11em;
    }
    
    ul#nav li a
    {
    	display:block;
    	text-decoration:none;
    	position:relative;
    	color:#FFF;
    	height:2em;
    	width:11em;
    	line-height:180%;
    	text-align:center;
    }
    
    ul#nav li a:link
    {
    	color:#FFF;
    }
    
    ul#nav li a:visited
    {
    	color:#FFF;
    }
    
    ul#nav li a:hover
    {
    	color:#ace;
    }
    
    ul#nav li a:active
    {
    	color:#ace;
    }
    
    /*-------------- sub menu ---------------------*/
    
    ul#nav li ul
    {
    	list-style:none;
    	padding:0px;
    	margin:0px;
    	width:11em;
    }
    
    ul#nav li ul li 
    {
    	background-color:#ace;
    	text-align:center;
    }
    
    ul#nav il ul li a
    {
    	text-decoration:none;
    	color:#036;
    	text-align:center;
    }
    
    ul#nav li ul li a:link
    {
    	border:1px solid #036;
    	margin:-1px;
    	color:#036;
    	background-color:#ace;
    }
    
    ul#nav li ul li a:visited
    {
    	border:1px solid #036;
    	margin:-1px;
    	color:#036;
    	background-color:#ace;
    }
    
    ul#nav li ul li a:active
    {
    	border:1px solid #FFF;
    	margin:-1px;
    	color:#FFF;
    	background-color:#036;
    }
    
    ul#nav li ul li a:hover
    {
    	color:#336;
    	border:1px solid #036;
    	background-color:#FFF;
    }
    </style>
    </head>
    <body>
    		<div class="leftbar" >
    		<ul id="nav">
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link1 </a></li>
    		<li>
    		<ul>
    			<li><a class="child" href="#" >sublink1</a></li>
    			<li><a class="child" href="#" >sublink2</a></li>
    			<li><a class="child" href="#" >sublink3</a></li>
    			<li><a class="child" href="#" >sublink4</a></li>
    		</ul>
    		</li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link2 </a></li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link3 </a></li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link4 </a></li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link5 </a></li>
    		</ul>
    		</div>
    		<!-- End of navigation box -->
    </body>		
    </html>

    Here is the menu working the same in IE but has no docutype (rememebr to try to expand the text)
    Code:
    <html>
    <head>
        <title>Jamie's Computers</title>
    <!-- Navigation box -->
    <style>
    	.leftbar
    	{
    	  float: left;
    	  width:150px;
    	  background-color:#036;
    	}
    	
    	ul#nav
    	{
    	  list-style:none;
    	  padding:0px;
      	  margin:0px;
     	  width:150px;
    	}
    	
    	ul#nav li
             {
    	  position:relative;
    	  background-color:#036;
     	  width:150px;
              }
    	
    	ul#nav li.cat
    	{
    	    height:22px;
    	    background:url("images/bar.jpg");
    	}
    	
    	ul#nav li img
    	{
    	   display:none;
    	}
    	
    	ul#nav li a
    	{
    	   display:block;
    	   text-decoration:none;
    	   color:#FFF;
    	   height:2em;
    	   width:11em;
    	   line-height:180%;
    	   text-align:center;
    	}
    	
    	ul#nav li a:link
    	{
    	   color:#FFF;
    	}
    	
    	ul#nav li a:visited
    	{
    	   color:#FFF;
    	}
    	
    	ul#nav li a:hover
    	{
    	   color:#ace;
    	}
    
    	ul#nav li a:active
    	{
    	   color:#ace;
    	}
    	
    	/*-------------- sub menu ---------------------*/
    	
    	ul#nav li ul
    	{
    	   list-style:none;
    	   padding:0px;
    	   margin:0px;
    	   width:150px;
    	}
    	
    	ul#nav li ul li 
    	{
    	   border:1px solid #036;
    	   background-color:#ace;
    	   text-align:center;
    	}
    
    	ul#nav il ul li a
    	{
    	   text-decoration:none;
    	   color:#036;
    	   text-align:center;
    	}
    	
    	ul#nav li ul li a:link
    	{
    	   border:1px solid #036;
    	   margin:-1px;
    	   color:#036;
    	   background-color:#ace;
    	}
    	
    	ul#nav li ul li a:visited
    	{
    	   border:1px solid #036;
    	   margin:-1px;
    	   color:#036;
    	   background-color:#ace;
    	}
    
    	ul#nav li ul li a:active
    	{
    	   border:1px solid #FFF;
    	   margin:-1px;
    	   color:#FFF;
    	   background-color:#036;
    	}
    
    	ul#nav li ul li a:hover
    	{
    	   color:#336;
    	   border:1px solid #036;
    	   background-color:#FFF;
    	}
    	
    
    </style>
    </head>
    <body>
    		<div class="leftbar" >
    		<ul id="nav">
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link1 </a></li>
    		<li>
    		<ul>
    			<li><a class="child" href="#" >sublink1</a></li>
    			<li><a class="child" href="#" >sublink2</a></li>
    			<li><a class="child" href="#" >sublink3</a></li>
    			<li><a class="child" href="#" >sublink4</a></li>
    		</ul>
    		</li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link2 </a></li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link3 </a></li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link4 </a></li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link5 </a></li>
    		</ul>
    		</div>
    		<!-- End of navigation box -->
    </body>		
    </html>
    This is the same as above but with the Doctype declaration. This is when the bug appears (rememebr to try to expand the text).

    Code:
    <?xml version="1.0"? encoding="UTF-8"?>
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Jamie's Computers</title>
    <!-- Navigation box -->
    <style>
    	.leftbar
    	{
    	  float: left;
    	  width:150px;
    	  background-color:#036;
    	}
    	
    	ul#nav
    	{
    	  list-style:none;
    	  padding:0px;
      	  margin:0px;
     	  width:150px;
    	}
    	
    	ul#nav li
             {
    	  position:relative;
    	  background-color:#036;
     	  width:150px;
              }
    	
    	ul#nav li.cat
    	{
    	    height:22px;
    	    background:url("images/bar.jpg");
    	}
    	
    	ul#nav li img
    	{
    	   display:none;
    	}
    	
    	ul#nav li a
    	{
    	   display:block;
    	   text-decoration:none;
    	   color:#FFF;
    	   height:2em;
    	   width:11em;
    	   line-height:180%;
    	   text-align:center;
    	}
    	
    	ul#nav li a:link
    	{
    	   color:#FFF;
    	}
    	
    	ul#nav li a:visited
    	{
    	   color:#FFF;
    	}
    	
    	ul#nav li a:hover
    	{
    	   color:#ace;
    	}
    
    	ul#nav li a:active
    	{
    	   color:#ace;
    	}
    	
    	/*-------------- sub menu ---------------------*/
    	
    	ul#nav li ul
    	{
    	   list-style:none;
    	   padding:0px;
    	   margin:0px;
    	   width:150px;
    	}
    	
    	ul#nav li ul li 
    	{
    	   border:1px solid #036;
    	   background-color:#ace;
    	   text-align:center;
    	}
    
    	ul#nav il ul li a
    	{
    	   text-decoration:none;
    	   color:#036;
    	   text-align:center;
    	}
    	
    	ul#nav li ul li a:link
    	{
    	   border:1px solid #036;
    	   margin:-1px;
    	   color:#036;
    	   background-color:#ace;
    	}
    	
    	ul#nav li ul li a:visited
    	{
    	   border:1px solid #036;
    	   margin:-1px;
    	   color:#036;
    	   background-color:#ace;
    	}
    
    	ul#nav li ul li a:active
    	{
    	   border:1px solid #FFF;
    	   margin:-1px;
    	   color:#FFF;
    	   background-color:#036;
    	}
    
    	ul#nav li ul li a:hover
    	{
    	   color:#336;
    	   border:1px solid #036;
    	   background-color:#FFF;
    	}
    	
    
    </style>
    </head>
    <body>
    		<div class="leftbar" >
    		<ul id="nav">
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link1 </a></li>
    		<li>
    		<ul>
    			<li><a class="child" href="#" >sublink1</a></li>
    			<li><a class="child" href="#" >sublink2</a></li>
    			<li><a class="child" href="#" >sublink3</a></li>
    			<li><a class="child" href="#" >sublink4</a></li>
    		</ul>
    		</li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link2 </a></li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link3 </a></li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link4 </a></li>
    		<li class="cat"><img src="images/bar.jpg" alt="menu item image" /><a href="#" >link5 </a></li>
    		</ul>
    		</div>
    		<!-- End of navigation box -->
    </body>		
    </html>
    You can not say you know how to do something, until you can teach it to someone else.

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    ok dince i cant edit my posts here is an extra selector that goes in the first code document.
    Code:
    .leftbar
    	{
    	  float: left;
    	  width:11em;
    	  background-color:#036;
    	}
    here is a link to the jpg if you need it - http://cybadev.co.uk/bar.jpg
    Last edited by timgolding; 01-31-2007 at 03:54 PM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    pleeeeeeeeeeeeeaaase help me. :-)
    You can not say you know how to do something, until you can teach it to someone else.

  • #4
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Are you using
    Code:
    <?xml version="1.0"? encoding="UTF-8"?>
    as the first line to deliberately try and get IE to use quirks mode to replicate the layout you had with no DOCTYPE declaration? If that's the case, you also need to insert a comment on the second line, as the XML declaration alone doesn't trigger quirks mode in IE7, like it did in IE6 (see here for the explanation)

    I may be being a bit dense here (not unknown) and missing the point, but if you add a border to the ul#nav li.cat selector:
    Code:
    ul#nav li.cat
    {
    	height:2em;
    	border:1px solid #036;
    }
    and remove all the margin:-1px from the submenu selectors then everything seems to line up fine in both FF and IE on my machine. But then I've always been a bit nervous about negative margins, so that might just be me.
    If anyone asks my boss, this counts as work, okay?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Quote Originally Posted by timgolding View Post
    [...]i cant edit my posts [...]
    Of course you can. Just press "edit" at th bottom of your post (only visible when logged in) and use the [edit][/edit] tag to denote an edit.

  • #6
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Quote Originally Posted by VIPStephan View Post
    Of course you can. Just press "edit" at th bottom of your post (only visible when logged in) and use the [edit][/edit] tag to denote an edit.
    Thanks for the advice.
    I did try that but the page just sat there refreshing for half an hour.
    You can not say you know how to do something, until you can teach it to someone else.

  • #7
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Putting it in backwards compatible mode worked thanks for the tip
    You can not say you know how to do something, until you can teach it to someone else.

  • #8
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by timgolding View Post
    Thanks for the advice.
    I did try that but the page just sat there refreshing for half an hour.
    It does that occasionally for me too. I usually find that clicking on the 'Go Advanced' button at the bottom of the form, and then simply clicking on the 'Submit reply' button (any edits you've already made in the simple edit form are carried forward) is a reliable way of hurrying things along.
    If anyone asks my boss, this counts as work, okay?


  •  

    Posting Permissions

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