Hi,
As you'll see at http://www.contenttohelp.com/uts/index.php, the
navigation links keep jumping between different font sizes. I've tried
to the correct the problem from a variety of angles - adding a font-
size tag the parent element (div) and even going as far as specifying
the size on almost every style in the menu stylesheet.
There are two different stylesheets - one common and especially for
the menu styles. I'm including both below - followed by the HTML code.
Fyi, I've saved the navigation bar code as PHP include so I only have
to edit one file when there's a change.
menustyles.css
#menu {
background-color:fff;
float: left;
}/* common styling */
.menu {
font-family: georgia, "Times New Roman," Times, serif;
width:390px;
height:40px;
position:relative;
font-size:15px;
z-index:100;
float: left;
margin-left: 80px;
margin-top: 5px;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:115px;
height:45px;
text-align:left;
color:#000;
border:1px solid #fff;
background:#fff;
font-size:15px !important;
overflow:hidden;
float: left;
}
.menu ul li a:hover, .menu ul li a:active {
display:block;
text-decoration:underline;
color:#000;
width:115px;
height:45px;
text-align:left;
color:#000;
border:1px solid #fff;
background:#fff;
font-size:15px !important;
overflow:hidden;
float: left;
}
.menu ul {padding:2; margin:0; list-style: none; font-size:15px;}
.menu ul li {float:left; position:relative;font-size:15px !important;}
.menu ul li ul {display: none; font-size:15px;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#303030; text-
decoration:none; font-size:15px !important;}
.menu ul li:hover ul {display:block; position:absolute; top:30px; left:
0; width:115px; font-size:15px !important;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff; font-size:
15px;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;
font-size:15px;}
.menu ul li:hover ul li ul {display: none; font-size:15px;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;
font-size:15px;}
.menu ul li:hover ul li a:hover {background:#303030; color:#fff; text-
decoration:underline; font-size:15px;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute;
left:105px; top:0; font-size:15px;}
.menu ul li:hover ul li:hover ul.left {left:-105px; font-size:15px;}
common.css
@charset "UTF-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
#wrapper {
width: 750px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
width: 675px;
height: 90px;
background-image: url(../images/header.jpg);
padding-top: 22px;
padding-left: 75px;
}
.headerImg {
border:none;
}
#navBar {
width: 750;
height: 62px;
background-image: url(../images/nav.jpg);
background-repeat: no-repeat;
font-size: 15px;
}
#contentWrapper {
width: 750px;
height: 446px;
}
#mainContent {
width: 465px;
height: 431px;
background-image: url(../images/main.jpg);
float: left;
padding-top: 15px;
padding-left: 85px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
background-repeat: no-repeat;
padding-right: 5px;
}
#mainContent a, a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #980000;
text-decoration:none;
}
#maincontent a:hover, a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color:#333;
text-decoration:underline;
}
#sideContent {
height: 446px;
width: 195px;
float: right;
background-image: url(../images/pink_note.jpg);
background-repeat: no-repeat;
}
#expand {
background-image: url(../images/expand.jpg);
min-height: 150px;
padding-left: 85px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
width: 575px;
padding-right: 90px;
}
#expand a, a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #980000;
text-decoration:none;
}
#expand a:hover, a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color:#333;
text-decoration:underline;
}
#footer {
width: 690px;
height: 225px;
background-image: url(../images/footer.jpg);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
color: #FFF;
text-align: center;
padding-top: 15px;
background-repeat: no-repeat;
padding-left: 15px;
}
#footer a, a:visited {
font-family: Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-size: 15px;
color: #ccc;
}
#footer a:hover, a:active {
font-family: Georgia, "Times New Roman", Times, serif;
text-decoration: underline;
font-size: 15px;
color: #fff;
}
/* Styles for Includes: navigation bar */
#nav {
width: 650px;
height: 81px;
background-image: url(../images/nav.jpg);
padding-top: 18px;
padding-left: 50px;
background-repeat: no-repeat;
}
/* Styles for Includes: notes */
#note {
height: 342px;
width: 218px;
background-image: url(../uts_images/notes.jpg);
background-repeat: no-repeat;
}
#pinkNote {
width: 135px;
height:100px;
margin-top: 0px;
margin-left: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
}
#yellowNote {
width: 140px;
height:100px;
margin-top: 85px;
margin-left: 40px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
HTML Code:
<link href="../css/menuStyles.css" rel="stylesheet" type="text/css">
<div class="menu">
<ul>
<li><a class="hide" href="index.php">About</a>
<!--[if lte IE 6]>
<a href="../menu/index.php">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="directions.php" title="directions and parking">Directions
& Parking</a></li>
<li><a href="staff.php" title="staff">Staff</a></li>
<li><a href="faq.php" title="faq">FAQ</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Students & Customers</a>
<!--[if lte IE 6]>
<a href="index.php">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="examDetail.php" title="exam details">Exam Details</a></
li>
<li><a href="prometricTesting.php" title="prometric testing">Prometric
Testing</a></li>
<li><a href="saturdayTesting.php" title="saturday national
testing">Saturday Nat'l Testing</a></li>
<li><a href="resources.php" title="resources">Resources</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Faculty & Staff</a>
<!--[if lte IE 6]>
<a href="../layouts/index.php">LAYOUTS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="evaluations.php" title="evaluations">Evaluations</a></li>
<li><a href="scoring.php" title="scoring and evaluation">Scoring</a></
li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
I sincerely appreciate any help anyone is able to give me on this
matter.
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
