Can anyone help me out. When i change the doctype it completely changes how it
looks. I have no idea why. Can anyone explain. Raw css is first.
...container {
color: #000000;
font-family:tahoma, verdana, helvetica;
font-size: 11px;
background-color: #f1f1ed;
width:170px;
height: 100%;
border-right: buttonshadow 1px solid;
border-top: #f5f5f5 1px solid;
border-left: #f5f5f5 1px solid;
border-bottom: buttonshadow 1px solid;
padding-right : 1px;
padding-top : 1px;
padding-bottom : 1px;
}
...leftMenu {
color:#006699;
text-decoration:none;
font-weight:bold;
}
...leftMenu:hover {
color:#000000;
text-decoration:none;
font-weight:bold;
}
...leftMenu:active {
color:#000000;
text-decoration:none;
font-weight:bold ;
}
...Menu {
height: 20px;
padding-top : 2px;
padding-right : 5px;
padding-bottom : 3px;
padding-left : 2px;
border-right: buttonshadow 1px solid;
border-top: #f5f5f5 1px solid;
border-left: #f5f5f5 1px solid;
border-bottom: buttonshadow 1px solid;
background-color: #D4D0C8;
cursor:pointer;
color:#000000;
}
...Option {
height: 20px;
padding-top : 2px;
padding-right : 5px;
padding-bottom : 3px;
padding-left : 16px;
background-color: #f5f5f5;
border-top : 1px solid #ffffff;
border-bottom : 1px solid #ffffff;
border-left : 1px solid #ffffff;
border-right : 1px solid #ffffff;
cursor:pointer;
}
...Options {
padding-top : 1px;
padding-right : 1px;
padding-bottom : 1px;
padding-left : 1px;
}
...imgPosition {
vertical-align: middle;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en-AU">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml;
charset=UTF-8" />
<title>Transportation Scheduler [LOGIN]</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" style="height: 100%;">
<tr>
<td valign="top">
<script src="resources/leftMenu/leftmenu.js" type=""
language="JavaScript"></script>
<link href="resources/leftMenu/leftmenu.css" rel="stylesheet"
type="text/css" />
<div class="container">
<div id="parent">
<div class="menu"
onMouseOver="this.style.background='#F9CD75'"
onMouseOut="this.style.background='#D4D0C8'" onClick="TrocaMenu('sub0')"><img
src="resources/leftMenu/icons/txtmenu.gif" width="20" height="20" alt="Text
Folders" class="imgPosition" border="0" /> Text Folders</div>
<span id="sub0" class="options">
<div class="option"
onclick="location.href('http://www.yahoo.com');"
onmouseover="this.style.background='#D8E4F8'"
onmouseout="this.style.background='#f5f5f5'">
<img
src="resources/leftMenu/icons/txtfolder.gif" width="16" height="16" alt="Text
Links" class="imgPosition" hspace="3" border="0" /> Text Links</div>
<div class="option"
onClick="location.href('master.asp?code=modulos');"
onMouseOver="this.style.background='#D8E4F8'"
onMouseOut="this.style.background='#f5f5f5'">
<img
src="resources/leftMenu/icons/txtfolder.gif" width="16" height="16" alt="Text
Links" class="imgPosition" hspace="3" border="0" /> Text Links</div>
<div class="option"
onClick="location.href('master.asp?code=sobre');"
onMouseOver="this.style.background='#D8E4F8'"
onMouseOut="this.style.background='#f5f5f5'">
<img
src="resources/leftMenu/icons/txtfolder.gif" width="16" height="16" alt="Text
Links" class="imgPosition" hspace="3" border="0" /> Text Links</div>
</span>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:231285
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
