You are trying to call the stylesheet from within the body of the document.
Validate: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.contenttohelp.com%2Futs%2Findex.php On Aug 24, 7:27 am, Natasha <[email protected]> wrote: > Hi, > > As you'll see athttp://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] -~----------~----~----~----~------~----~------~--~---
