...

View Full Version : IE7 and its ability to render XHTML



timgolding
01-31-2007, 03:39 PM
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):


<?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)


<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).



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

timgolding
01-31-2007, 03:46 PM
ok dince i cant edit my posts here is an extra selector that goes in the first code document.

.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

timgolding
02-01-2007, 10:29 AM
pleeeeeeeeeeeeeaaase help me. :-)

butlins
02-01-2007, 11:29 AM
Are you using

<?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 (http://www.satzansatz.de/cssd/quirksmode.html) 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:

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.

VIPStephan
02-01-2007, 11:33 AM
[...]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 tag to denote an edit.

timgolding
02-01-2007, 12:03 PM
Of course you can. Just press "edit" at th bottom of your post (only visible when logged in) and use the tag to denote an edit.

Thanks for the advice.
I did try that but the page just sat there refreshing for half an hour.

timgolding
02-01-2007, 02:46 PM
Putting it in backwards compatible mode worked thanks for the tip :)

butlins
02-02-2007, 10:07 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum