No replies
gibecrake
Offline
newbie
Last seen: 12 years 19 weeks ago
Joined: 2009-09-16
Posts: 1
Points: 0

I'm hoping someone has run into this issue before or has a better understanding of inherited elements. I'm having a Safari weirdness issue. The issue doesn't appear in firefox and i havent had a chance to check any of the versions of IE. I am actually afraid to.

The layout of the page and the menus are mostly working as expected, except in Safari, the CSS menus that contain drop down nav seem to shift down 1-3 pixels on hover? I've looked like a million times now and i cant see what it might be inheriting, and it doesnt shift in firefox? Can any CSS Moguls give it a once over and see if there is anything obvious to them? Any help would be appreciated, I wanted to make this my first 100% CSS-based site since its going to be relatively small and easy. (knocking on wood)

I know there is probably a lot of redundant CSS, and it could probably be streamlined a lot but i'm loath to start slicing away without some sort of mentoring.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>page title</title>
 
<style type="text/css">
 
/** zero out default browser margins, padding and borders for all site elements below**/
body,table,tr,td,th,h1,h2,h3,h4,h5,p,ol,ul,li,form,input {
	margin:0;
	padding:0;
	border:0;
	line-height:1
}
 
/**For non-IE browsers**/
html,body {
	font-size:90%;
	height:100%;
	margin-bottom:1px; /**adds scrollbar in Mozilla**/
	text-align: left;
}
 
/**For IE only**/
*body {font-size:76%; zoom: 1;}
 
body {
	background:#babcbf;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: left;
}
 
#Wrapper {
	width: 924px;
	margin:0 auto; /**centers page**/
	padding-right: 12px;
	padding-right: 12px;
	background-image: url(images/mainshadow.png);
	background-repeat: repeat-y;
	background-position: left top;
}
 
 
#Header {
	text-align: left;
	height: 163px; /**same height as image or omit this property**/
	width: 900px;
	background-image: url(images/header.gif);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 12px;
}
 
#Header p {
	padding-top: 55px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 40px;
}
/*** Nav bar styles ***/
 
 
ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
 
ul.nav{
display: table;
width: 100%;
table-layout: fixed;
}
 
ul.block{
width: 100%;
table-layout: fixed;
}
 
ul.nav>li{
display: table-cell;
position: relative;
padding: 4px 3px;
}
 
 
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 5px;
}
 
ul.nav li:hover>ul{
display : block;
}
 
.nav ul li a{
	display: block;
	padding: 5px;
	margin-top: 5px;
}
 
/*Menu styles*/
 
ul.nav,
.nav ul,
.nav ul li a{
	background-color: #fff;
	color: #5E6168;
}
 
ul.nav li:hover,
.nav ul li a:hover{
	background-color: #FFF;
	color: #B5D32E;
}
 
ul.nav li:active,
.nav ul li a:active{
	background-color: #FFF;
	color: #FC0;
}
 
 
 
ul.nav li:visited,
.nav ul li a:visited {
	text-decoration:none
}
/**
ul.nav,
.nav ul{
border: 1px solid #369;
}
**/
.nav a{
text-decoration: none;
}
-->
/**end nav styles**/
 
 
#MainContent {
	text-align:left;
	color:#000;
	margin-left: 12px;
	width: 900px;
	background-color: #FFF;
}
 
#MainContent ul, #MainContent li, #MainContent p, #MainContent h1, #MainContent h2, #MainContent h3{ margin-left: 20px;}
 
#MainContent li {
	margin-left:40px;
	padding-bottom: 5px;
	list-style-type: square;
}
#MainContent p {line-height:1.5}
 
/**Regular Links**/
a{
	color:#5E6168;
	font-weight: lighter;
	text-decoration: none;
	text-transform: lowercase;
	letter-spacing: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
}
a:visited {
	color:#999;
	text-decoration:none
}
a:hover,a:active,a:focus{color: #B5D32E;}
 
 
/**Text styles**/
h1,h2,h3,h4,h5 {font-size:1.2em; line-height:1.8em; color:#666;}
p {
	font-size: 1em;
	line-height:1;
 
}
 
/**Misc classes**/
.left {text-align: left}
.center {text-align: center}
.right {text-align: right}
 
/**Floats**/
.floatRight {float:right; width:40%; height:auto; margin:0;
}
.floatLeft { float: left; width: 40%; height:auto; margin:0}
.clearfloat {clear:both; height: 1px; width: 100%}
#navcontainer {
	margin-left: 12px;
	width: 900px;
}
 
#Footer {
	width: 900px;
	text-align: left;
	color: #666666;
	background: #D0E8FF;
	margin-left: 12px;
	}
 
 
</style>
 
 
 
</head>
 
<body>
 
<div id="Wrapper">
 
 
<div id="Header">
<p><img src="images/madamslogo.png" width="299" height="69" alt="MAlogo" /></p>
</div> 
<!--end header -->
 
<!--menu navbar-->
<div id="navcontainer">
  <ul class="nav">
        <li><a href="#MainContent">biography</a></li>
        <li><a href="#">illustration</a>
            <ul>
                <li><a href="#">children's books</a></li>
                <li><a href="#">drawings & line art</a></li>
                <li><a href="#">illustration</a></li>
                <li><a href="#">inspiration</a></li>
            </ul>	
        </li>    
        <li><a href="#">collectibles</a>
            <ul>
                <li><a href="#">carousels</a></li>
                <li><a href="#">figurines</a></li>
                <li><a href="#">waterglobes</a></li>
            </ul>	
        </li>    
        <li><a href="#">fine art</a>
            <ul>
                <li><a href="#">landscapes</a></li>
                <li><a href="#">sculptures</a></li>
                <li><a href="#">wildlife</a></li>
            </ul>
        </li>    	
        <li><a href="#">large format</a>
			<ul>
                <li><a href="#">Murals</a></li>
                <li><a href="#">Set Design</a></li>
            </ul>
        </li>    
        <li><a href="#">clients</a></li>   
        <li><a href="#">contact</a></li>     
    </ul> <!--end navlist -->
</div> 
<!--end navcontainer -->
<!--end menu -->
 
 
<div id="MainContent">
<p>&nbsp;</p>
<h3>Header text</h3>
<h1>Heading 1 </h1>
<p>Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima.</p>
<p>&nbsp;</p>
<div class="floatRight">
float right content
</div> <!--end floatRight -->
 
 
<p>&nbsp;</p>
</div>  
<!--end MainContent -->
 
<div id="Footer">
<p>Footer Content</p>
</div> <!--end Footer -->
 
 
</div> <!--end footertext -->
 
</div> <!--end Page #Wrapper -->
 
</body> <!--end body -->
</html> <!--end document -->