SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation not presenting correctly in Firefox

    My navigation looks fine in Internet Explorer 6 but not in Firefox. I haven't looked at the site in Netscape yet. In Firefox it moves to the right and overlaps the content. I am trying to use CSS and am still a beginner, so I am wondering if this isn't actually a bug with Internet Explorer and not Firefox...maybe I coded it wrong where it looks good in IE but not in Firefox?

    www.ukiahseniorcenter.org

    Code:
    body {
      margin: 0;
      padding: 0;
      background-color: #70A6C8;
      color: white;
      font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #wrapper {
    	background-color: #6FA9CE;
    	color: black;
    }
    
    #header {
    	background-color: #6FA9CE;
    	margin: 0px;
    	padding: 0px;
    	height: 80px;
    }
    h1 {
    	font-weight: bold;
    	color: #2D6588;
    	font-style: italic;
    	font-size: 14pt;
    	border-bottom-width: 1px;
    	border-bottom-style: dotted;
    	border-bottom-color: #666666;
    	margin-bottom: 15px;
    	padding-top: 10px;
    }
    #main {
    	width: 100%;
    	background-color: #FFFFFF;
    	margin: 0px;
    	padding: 0px;
    }
    #content {
    	background-color: white;
    	color: black;
    	line-height: 2em;
    	font-size: 10pt;
    	margin-left: 160px;
    	margin-right: 300px;
    }
    #mainfeature {
    	background-color: #70A6C8;
    	padding-right: 10px;
    	padding-left: 10px;
    	border: 0;
    }
    #mainfeature h2 {
      margin: 0;
      font-weight: normal;
      font-size: 140%;
    }
    #mainfeature p {
      font-size: 110%;
    }
    #mainfeature p.more {
      margin-top: 0;
      text-align: right;
    }
    #mainfeature p.more a:link, #mainfeature p.more a:visited {
      color: white;
      background-repeat: no-repeat;
      background-position: center left;
      padding-left: 14px;
    }
    #content .inner {
    	padding-right: 45px;
    	margin-top: 10px;
    	margin-bottom: 10px;
    	margin-left: 10px;
    }
    #content .inner h2 {
    	color: #009900;
    	padding-bottom: 0.2em;
    	border-bottom: 1px dotted #CCCCCC;
    	font-size: 12pt;
    	text-align: left;
    }
    #content .inner ul.features {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #content .inner h3 {
      font-size: 130%;
    }
    #content .inner h3 a:link, #content .inner h3 a:visited {
      color: #245185;
    }
    #content .inner p {
      color: #000000;
      font-size: 90%;
    }
    #content .inner .features li img {
      float: left;
      margin: 0 5px 5px 0;
    }
    #content .inner p.author {
      font-weight:  bold;
    }
    #content .inner p.more{
      margin-top: 0;
      text-align: right;
    }
    #content .inner p.more a:link, #content .inner p.more a:visited {
      color: black;
      background-image: url(file:///C|/Documents and Settings/Nichole Monique/My Documents/Client Files/Ukiah Senior Center/css2-code/Chapter 9/3 - Full Height Columns/img/more-bullet.gif);
      background-repeat: no-repeat;
      background-position: center left;
      padding-left: 14px;
      font-size: 90%;
      color: #1e4c82;
    }
    #sidebar {
    	background-color: #FFFFFF;
    	color: black;
    	padding: 0 0 10px;
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 0;
    	font-size: 10pt;
    	float: right;
    }
    #sidebar h3 {
      font-size: 110%;
      margin: 0;
      padding: 0.2em 0 0.2em 10px;
      font-weight: normal;
    }
    #sidebar .inner {
    	background-color: #FFFFFF;
    	width: 275px;
    }
    #sidebar .box {
    	background-color:#FFFFFF;
    	border: 1px solid #CCCCCC;
    	margin: 0px;
    	padding: 0px;
    	text-align: left;
    }
    #sidebar .text {
    	padding-right: 0px;
    	padding-left: 10px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    }
    #sidebar ul {
    	padding-right: 4px;
    	list-style-type: none;
    	margin-left: 0;
    	padding-left: 15px;
    }
    #sidebar p, #sidebar li {
    	font-size: 10pt;
    	line-height: 1.5em;
    	list-style-type: none;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #34A616;
    }
    #sidebar ul a:link, #sidebar ul a:visited {
      color: black;
    }
    #sidebar .date {
    	font-weight: bold;
    	color: #34A616;
    }
    #searchform .text {
      width: 196px;
      border: 1px solid #45bac0;
    }
    #searchform .searchbutton {
      text-align: right;
      margin-top: 4px;
    }
    #searchform .btn {
      border: 1px solid #45bac0;
      background-color: #FFFFFF;
      color: black;
    }
    #sidebar .motm-image {
      float: right;
      margin: 0 30px 0 20px;
    }
    #sidebar p.more {
      clear: right;
      margin: 0 30px 0 0;
      text-align: right;
    }
    #sidebar p.more a:link, #sidebar p.more a:visited {
      color: black;
      background-repeat: no-repeat;
      background-position: center left;
      padding-left: 14px;
    }
    #sidebar2 {
    	float: left;
    	border-top: none;
    	background-color: white;
    	color: black;
    	margin: 0;
    	width: 150px;
    }
    #sidebar2 .inner {
    }
    #sidebar2 .box {
    	background-color:#FFFFFF;
    	padding: 0px;
    	width: 150px;
    }
    #sidebar2 p {
      font-size: 90%;
      color: #666666;
    }
    #sidebar2 .text {
    	padding-right: 0px;
    	padding-left: 10px;
    	width: 138px;
    	color: #000000;
    	padding-bottom: 5px;
    	font-size: 10pt;
    	line-height: 1.5em;
    }
    #sidebar2 .contact {
    	padding-right: 0px;
    	width: 161px;
    	color: #000000;
    	padding-bottom: 5px;
    	font-size: 10pt;
    	line-height: normal;
    	text-align: center;
    }
    #sidebar2 .img {
    	padding: 20px 5px 0px;
    	}
    #sidebar2 a:link, #sidebar2 a:visited {
      color: #245185;
      font-weight: normal;
    }
    #sidebar2 h3 {
      color: #245185;
      padding-bottom: 0.2em;
      border-bottom: 1px solid #b9d2e3;
      font-size:  110%;
    }
    #nav {
    	list-style: none;
    	margin: 0;
    }
    #nav li a:link, #nav li a:visited {
    	display: block;
    	height: 7px;
    	width: 150px;
    	padding: 5px;
    	margin: 0px;
    	background-image:url(images/bg_nav.png);
    	background-color: #FFFF66;
    	color: #0000CC;
    	font-size: 10pt;
    	border-top: 1px solid #FFFF66;
    	border-right: 1px solid #FFFF66;
    	border-bottom: 0px none #FFFF66;
    	border-left: 1px solid #FFFF66;
    }
    #nav ul ul {
    	margin-left: 0px;
    }
    #nav ul ul li {
    	margin: 0;
    	}
    #nav ul ul a:link, #nav ul ul a:visited {
    	height: 7px;
    	padding: 5px 5px 5px 0.5px;
    	margin: 0px;
    	background-image: url(images/bg_nav_green.jpg);
    	border-left: 8px solid #336633;
    	}
    #footer {
    	width: 100%;
    	border-top: 1px solid #b9d2e3;
    	border-bottom: 1px solid #b9d2e3;
    	clear: both;
    	background-color: #CCCCCC;
    	font-size: 10pt;
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    #footer p {
      font-size: 90%;
      color: #000066;
      margin: 0;
      padding: 5px 0 5px 0;
      text-align: center;
    }
    #credit {
    	width: 100%;
    	border-top: 1px solid #b9d2e3;
    	border-bottom: 1px solid #b9d2e3;
    	clear: both;
    	background-color: #6FA9CE;
    	text-align: center;
    	font-weight: normal;
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    #credit p {
      font-size: 8pt;
      color: #000066;
      margin: 0;
      padding: 5px;
    }
    #credit a:link {
    	font-size: 8pt;
    }
    #credit h5 {
    	font-size: 8pt;
    	display: inline;
    	font-weight: normal;
    }
    #clearone {
    	clear: both;
    	height: 1px;
    	background-color: #FFFFFF;
    }
    #main2 {
    	margin: 0px;
    	padding: 0px;
    }
    #footernav {
    	background-image: url(images/bg_nav.png);
    	background-repeat: repeat-x;
    	text-align: center;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10pt;
    	height: 17px;
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    #footernav ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    #footernav li {
    	display: inline;
    	padding: 5px;
    }
    #footernav a:link, ul#footer li a:visted {
    	color: #34A616;
    	font-size: 10pt;
    }
    .adobe {
    	text-align: center;
    }

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have 12 XHTML validation errors, and 3 CSS validation errors.

    <embed> is not a valid tag in (X)HTML Strict, please use a Flash satay instead.

    I have to head to bed, so I can't check your code in further detail, but I strongly suggest correcting your validation errors before proceeding any further. I don't mean to sound rude, and I sincerely apologize if I did come off that way (long and horrible day at work), but validating your XHTML and CSS first will help relieve any further problems you may encounter as you work on correcting your menu problem.

    Here's a copy of the c.swf file that is mentioned in the ALA article for you to use. I'd upload it here, but the forum won't let me (because I already uploaded it in another thread). Here's the link:

    http://www.sitepoint.com/forums/show...87&postcount=2

    I'll be more than happy to help you further later on today before I head to work though.

    And please allow me to be the first to say "Welcome to the SitePoint forums!"

  3. #3
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To be honest, I wouldn't worry too much about the object/embed validation errors. They're unlikely to be the cause of your woes - i'd strongly reccomend that you transition to a solution like http://blog.deconcept.com/swfobject/ in the future, because it allows for fallback content for users that don't have Flash installed. Get the other validation issues fixed, though.

    First thing you might want to try is setting padding: 0; on your navigation ul elements - IIRC Firefox treats them slightly differently to IE.

    The other thing that leaps out is that you've set your font size in pt (which is really meant for print), and the height of your nav elements in px (which is suited to the screen). Keeping font-size consistent across browsers can be a pain in the backside, especially if you use points. IME you'd be better off not setting a pixel height on the elements - they'll cope better with the user scaling up the font size that way. You're also better off using EMs for font-size.
    Olly Hodgson
    thinkdrastic.net

  4. #4
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks to both of you.......

    I still am having a problem with the navigation moving to the right for some reason.

    I did take both of your suggestions (thanks so much) any suggestions help!

    I tried changing my code for the the flash movie to the Satay method but now the pictures won't show up so I am not sure what I did wrong there. I put the c.swf file in the same directory that I have my flash file in. I changed the code in the html file accordingly.

    Code:
    <object type="application/x-shockwave-flash" data="/photogallery/c.swf?path=/photogallery/photogallery.swf" width="401" height="224">
         	<param name="movie" value="/photogallery/c.swf?path=/photogallery/photogallery.swf" />
         </object>
    I did take out the pixel hieghts on my navigation which did help it look somewhat better in Firefox but it still going to the right. I tried playing with several different things in the css file but nothing makes it move over to the left.

    I also fixed the validation errors I was receiving and so now it says it is valid.

    Any other suggestions on the navigation moving to the right?

    Thanks again for both of your suggestions I really appreciate it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •