SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS body {} vs #maincontent {} vs #Nav{}

    I can't set a different font in the nav because the body{} and/or maincontent{} seems to be preventing it.

    Code:
    body 		{	background-color:  #0A1794;
    	   		background: url(images/swirl.png) fixed;
    			max-width:1200px;
    			min-width:400px;
    			font-family: Verdana, Geneva, sans-serif;
        		 	font-size:16px;
          		 	line-height:106%;
    			color: #fff;
    			margin: 0 auto;
    			margin-top:20px;
    			margin-right:.83%; /* 10 px */
    			margin-left: .83%; /* 10 px */
    }
    
    #maincontent{	float:right;
    			width:880px;
    			position:relative;
    			margin-left: 26.26%; /* 320px based on 880px maincontent*/
    }
    
    #nav 		{list-style: none;
    			padding-left:0%;
    			font-family: "resiling";
    			line-height: 100%;
    			color:#FFF;  						/* has no effect */
    			font-size:190%; margin:0 0 5px;  	/* this allows the font to be flush left */
    			src: url(/fonts/".eot");
    			src: local('☺'),
        		 url("resiling.woff") format("woff"),
        		 url("resiling.otf") format("opentype"),
        		 url("resiling.svg#grablau") format("svg");
    }
    I read SteveD's reply a few messages up regarding inheritance but I'm unable to correct it.

    Thanks . . . Rick

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    There should be no inheritance issues with the way you have written your rules.

    I don't see the @font-face rule anywhere which might be the reason you can't see the custom font.

    And for the nav anchors to have the color of #fff, you'd need to set your #nav a color to it, not just the #nav.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    There should be no inheritance issues with the way you have written your rules.

    I don't see the @font-face rule anywhere which might be the reason you can't see the custom font.

    And for the nav anchors to have the color of #fff, you'd need to set your #nav a color to it, not just the #nav.
    I remember that @fontface thing somewhere but have no ideas on where to place it and how to use it for different fonts???

    Rick

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    See the following for the issues i found and recommendations i have:

    1. When using custom web fonts you need to use the @font-face declaration as the src property is only unique to it
    2. I personally dislike using a percentage % for margins and widths as they are too inconsistent between browsers, it's easier to just manage pixel values
    3. You had your margin property in your body selector set then you overwrote the left and right margin, doing this is redundant and makes things more complex then they need to be
    4. You attempted to overwrite the color and line-height properties in your #nav selector which isn't needed as the values are inherited from the body selector

    Code CSS:
    @font-face {
        font-family: 'resiling';
        src: url('fonts/resiling.eot');
        src: url('fonts/resiling.eot?#iefix') format('embedded-opentype'),
             url('fonts/resiling.woff') format('woff'),
             url('fonts/resiling.ttf') format('truetype'),
             url('fonts/resiling.svg#resiling') format('svg');
        font-weight: normal;
        font-style: normal;
    }
     
    body {
        background: #0A1794 url('images/swirl.png') fixed;
        color: #fff;
        font-family: Verdana, Tahoma, sans-serif;
        font-size: 16px;
        line-height: 18px;
        margin: 20px 10px 0;
        max-width: 1200px;
        min-width: 400px;
    }
     
    #maincontent {
        float: right;
        margin-left: 320px;
        position: relative;
        width: 880px;
    }
     
    #nav {
        font-family: 'resiling', sans-serif;
        list-style: none;
        margin: 0 0 5px;
        padding-left: 0;
    }
     
    #nav a {
        color: #fff;
    }

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    See the following for the issues i found and recommendations i have:

    1. When using custom web fonts you need to use the @font-face declaration as the src property is only unique to it
    2. I personally dislike using a percentage % for margins and widths as they are too inconsistent between browsers, it's easier to just manage pixel values
    3. You had your margin property in your body selector set then you overwrote the left and right margin, doing this is redundant and makes things more complex then they need to be
    4. You attempted to overwrite the color and line-height properties in your #nav selector which isn't needed as the values are inherited from the body selector

    Code CSS:
    @font-face {
        font-family: 'resiling';
        src: url('fonts/resiling.eot');
        src: url('fonts/resiling.eot?#iefix') format('embedded-opentype'),
             url('fonts/resiling.woff') format('woff'),
             url('fonts/resiling.ttf') format('truetype'),
             url('fonts/resiling.svg#resiling') format('svg');
        font-weight: normal;
        font-style: normal;
    }
     
    body {
        background: #0A1794 url('images/swirl.png') fixed;
        color: #fff;
        font-family: Verdana, Tahoma, sans-serif;
        font-size: 16px;
        line-height: 18px;
        margin: 20px 10px 0;
        max-width: 1200px;
        min-width: 400px;
    }
     
    #maincontent {
        float: right;
        margin-left: 320px;
        position: relative;
        width: 880px;
    }
     
    #nav {
        font-family: 'resiling', sans-serif;
        list-style: none;
        margin: 0 0 5px;
        padding-left: 0;
    }
     
    #nav a {
        color: #fff;
    }
    ---------------------------------------------------------------------------------------------------------

    I don't understand this part . . .

    @font-face {etc, . . . I can't use @font-face for a <div class=> name.

    I was thinking

    .tang to identify the font name tangerine font
    .upe to identify the font name uppereastside font

    you have @font-face{

    I have multiple font-face types, ie. tengering, uppereastside, neoretro.

    How do I call them in the html document. . . .@font-face what?

    Shouldn't the font be identified by a class name?

    I'm hoping to set fonts and font colors for different elements in the html page, #nav, navli, navli1.

    I'm sorry but this is confusing to me.

    Thanks . . . Rick

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    ---------------------------------------------------------------------------------------------------------

    I don't understand this part . . .

    @font-face {etc, . . . I can't use @font-face for a <div class=> name.

    I was thinking

    .tang to identify the font name tangerine font
    .upe to identify the font name uppereastside font

    you have @font-face{

    I have multiple font-face types, ie. tengering, uppereastside, neoretro.

    How do I call them in the html document. . . .@font-face what?

    Shouldn't the font be identified by a class name?

    I'm hoping to set fonts and font colors for different elements in the html page, #nav, navli, navli1.

    I'm sorry but this is confusing to me.

    Thanks . . . Rick
    WAIT ONE . . . I think I get it now.

    I'll be back . . . Rick

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You just apply it as you would any other font.

    e.g.
    #nav{font-family:Arial, sans-serif}

    So for your new font you would just say:

    Code:
    #nav {
        font-family: 'resiling', sans-serif;
        list-style: none;
        margin: 0 0 5px;
        padding-left: 0;
    }
    Exactly as Chris gave to you

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    None of this is working ? ? ?

    CSS
    *#navli1 {font-family: "ues";
    src: url(/fonts/"uppereastside.eot");
    src: local('☺'),
    url("uppereastside.woff") format("woff"),
    url("uppereastside.otf") format("opentype"),
    url("uppereastside.svg#grablau") format("svg");
    line-height: 100%;
    color:#FFF;
    font-size:220%; margin:0 0 5px;
    list-style:none;
    } This Fails ?

    At times I wish want to use the @font-family with different floats, font colors, font sizes, etc.

    How many different CSS definitions do I need to accomplish this?

    I'm so frustrated I could S C R E A M !

    What am I missing?


    Here is my CSS page as of now . . .

    Code:
    @charset "utf-8";
    /* CSS Document */
    /* mapsearch.css 01/03/2012 5:55pm */
    
    @font-face	 {	font-family: "tang"; 
    			 font-size:200%;
    			 src: url(/fonts/"tangerine.eot");
    			 src: local('☺'),
        		 	 url("tangerine.woff") format("woff"),
        		 	  url("tangerine.otf") format("opentype"),
        		 	   url("tangerine.svg#grablau") format("svg");
    			font-weight: normal;
    			 font-style: normal;
    			text-align:center;
    			color: #0CF;
    			float:right;
    			width:73.33%;
    			margin-bottom:12px;
    			margin-top:12px;
    			line-height:110%;
    }
    
    @font-face {	font-family: 'ues';
    			src: url('uppereastside.eot');
    			src: local('☺'),
    			 url('uppereastside.woff') format('woff'),
    			  url('uppereastside.ttf') format('truetype'),
    			   url('uppereastside.svg#webfont') format('svg');
    			font-weight: normal;
    			font-style: normal;
    			color: #0CF;
    			float:right;
    			width:73.33%;
    			margin-top:12px;
    }
    
    html, body 	{ 	margin:0;
    			padding:0;
    }
    
    body 		{ 	background: url(images/swirl.png) fixed; /*url(images/newbkground.png) fixed;*/
    			background-color: #0A1794;
    			font-family: Verdana, Geneva, sans-serif;
    			font-size:16px;
    			line-height:18px;
        		  	max-width: 1200px;
    			min-width: 400px;
    			padding-left:10px;
    			padding-right:10px;
    			margin-top:10px;
    }
    
    #maincontent{	float: right;
    			margin-left: 320px;
    			position: relative;
    			width: 880px;
    			background-image: url(images/gray4b32.jpg);  /* background image for the iframe */
    				
    }
    
    
    .header		{	float:right;
    				display:block;
    				position:relative;
    				margin-bottom:6px;
    				
    }
    
    h1,h2,h3,h4,h5,h6
    			{	text-align:left;
    				color:#1ec2f9;
    }
    
    p 			{	width:880px;
    			 	height:auto;
    				font-size:100%;
    			 	color: #fff; 
    }
    
    .pright		 {	text-align:center;
    				color: #39C;
    				float:right;
    				width:73.33%;
    				margin-bottom:4px;
    
    }
    
    .pleft 		{	float:left;    			 
    				font-size: 86%; 		
    				position: fixed;
    				margin-top:20px;
        			        margin-left:1.2%; 		
    				padding:2px;
    }
    
    .psmaller	{	        margin-top:5%;
    				margin-right:2%;
    				margin-left:2%;
    				font-size:62.50%;
    			 	line-height: 110%; 
    			 	text-align: left;
    			 	color: #000;
    }
    
    .txtright	{	font-size: 87.50%;
    			display:block;
    			float:right;
    			width:880px;  			
    			position:relative;
    			margin-bottom:4px;
    				
    }
    
    
    
    
    .plate  	{	float:right;
    			display:block;
    			position: relative;		/* IE bug fix*/
    			margin-bottom:10px;
    }
    
    
    
    /* ---------------container for the navigation ---------------------- */
    
    #nav  	{	margin:0; padding:0;
    			font-family: 'ues' ,sans-serif;
    			line-height: 100%;
    			color:#FFF;  						
    			font-size:100%; margin:0 0 5px;  
    			float:left;
    			list-style: none;
       			font-style: none;
    			line-height: 110%;
        			position: fixed;
    }
    				
    
    * html #nav{        position:absolute;}				
    	  #navli 	{font-size: 90%; margin:0 0 5px;
    			 list-style: none;
    }
    
    *#navli1 	 	{font-family: 'ues', sans-serif;
    			 line-height: 100%;
    			 color:#FFF;  						
    			 font-size:220%; margin:0 0 5px;  
    			 list-style: none;				 
    			 margin: 0 0 5px;
    			 padding-left: 0;
    }
    
    #nav a,#nav a:link,#nav a:visited \
    		{	color: #FFF;
        			list-style: none;
    			text-decoration: none;
    			background-color: ; color: #0CF;	/* changes list text color;*/
    }
    
    #nav li a:hover{background-image:url(images/menubkrnd2.png);
    			    width:260px;
    				color: #FFF; 						/* hover text color */
    }
    /*************************************************NAVIGATION ENDS HERE***************/
    #footer		{	clear:both;
    				float:right;
    			 	font-size:62.50%;
    			 	font-style:normal;
    			 	line-height: 110%;
    			 	color: #000;
    				margin-top:1%;			 	
    				padding-right:1%;
    				padding-left:1%;
    }/* eND css*/

    There is too much junk in my CSS page as a result of me trying to find S I M P L E reliable ways to code the approximately 6 or so elements on my pages.

    It shouldn't be so confusing.

    Thanks Rick

  9. #9
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok . . . I think I've got it.

    Code:
    @font-face {	font-family: 'TangerineRegular';
    			 src: url('../css/fonts/Tangerine_Regular-webfont.eot');
    			 src: local("☺"),
     			 src: url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
    		         url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),
     		        url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
    		         url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
        			font-weight: normal;
        			font-style: normal;
    
    }
    
    @font-face {   	font-family: 'UpperEastSideRegular';
        			src: url('../css/fonts/UpperEastSideRegular-webfont.eot');
    			src: local("☺"),
        			src: url('../css/fonts/UpperEastSide-webfont.eot?#iefix') format('embedded-opentype'),
    			url('../css/fonts/UpperEastSide-webfont.woff') format('woff'),
    			url('../css/fonts/UpperEastSide-webfont.ttf') format('truetype'),
    			url('../css/fonts/UpperEastSide-webfont.svg#UpperEastSideRegular-webfont') format('svg');
        			font-weight: normal;
        			font-style: normal;
    
    }
    
    .mapname	{	font-family:'TangerineRegular', arial, san-serif;
    			width:880px;
    			float:right;
    		 	text-align: center;
    			font-size:220%;
    			color:#6CF;
             		font-weight:normal;
    		 	font-style: normal;
    		 	margin-top:1%px;
    			line-height:120%;
    			margin-bottom:1%;
    }
    In the HTML page the Class="mapname" using the TangeringRegular works fine.


    However the following fails using the UpperEastSide.wobfont . . .

    #nav { float:left;
    position:fixed;
    font-family:'UpperEastSide-webfont', arial, san-serif;
    font-size: 100%;
    width:320px;

    }

    If I can get this last piece in the #nav fixed I'm almost there.

    I also have #navli1 where I wish to apply a DIFFERENT font-face.

    In the past few days I have not been able to accomplish this.

    Thanks . . . Rick

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You likely just have the name wrong...

    Instead of this:

    Code CSS:
    #nav {    
    float:left;
    position:fixed;
    font-family:'UpperEastSide-webfont', arial, san-serif;
    font-size: 100%; 
    width:320px;
     
     
    }

    It should be this:

    Code CSS:
    #nav {    
    float:left;
    position:fixed;
    font-family:'UpperEastSideRegular', arial, san-serif;
    font-size: 100%; 
    width:320px;
     
     
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    You likely just have the name wrong...

    Instead of this:

    Code CSS:
    #nav {    
    float:left;
    position:fixed;
    font-family:'UpperEastSide-webfont', arial, san-serif;
    font-size: 100%; 
    width:320px;
     
     
    }

    It should be this:

    Code CSS:
    #nav {    
    float:left;
    position:fixed;
    font-family:'UpperEastSideRegular', arial, san-serif;
    font-size: 100%; 
    width:320px;
     
     
    }
    My Goodness. that worked!

    Thanks much. Rick

  12. #12
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stacked Menu #nav under navli1

    I'm about finished with the mapsearch css page.

    I've removed all of the code that was not being used and attempted to reduce what else I dared.

    Like in a data base - less is more.

    It's all looking pretty well except the #nav portion of the menu is under the #navli1 portion of the menu - AND - I can't get the menu to rise to the top of the visible screen. Very troublesome.

    Do I need both the #navli and #navli1 portions of the menu?

    Here is my full CSS page now.

    Code:
    @charset "utf-8";
    /* CSS Document mapsearch.css 1/3/2012 */
    
    
    html, body 	{ 	margin:0;
    				padding:0;
    }
    
    @font-face {	font-family: 'TangerineRegular';
    			    src: url('../css/fonts/Tangerine_Regular-webfont.eot');
    				src: local("☺"),
     			    src: url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
    		         	 url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),
     		        	 url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
    		         	 url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
        			font-weight: normal;
        			font-style: normal;
    
    }
    
    @font-face {   	font-family: 'gabrielle';
        			src: url('../css/fonts/gabrielle-webfont.eot');
    				src: local("☺"),
        			src: url('../css/fonts/gabrielle-webfont.eot?#iefix') format('embedded-opentype'),
    					 url('../css/fonts/gabrielle-webfont.woff') format('woff'),
    					 url('../css/fonts/gabrielle-webfont.ttf') format('truetype'),
    					 url('../css/fonts/gabrielle-webfont.svg#gabrielleRegular') format('svg');
        			font-weight: normal;
        			font-style: normal;
    
    }
    
    body 		{ 	background-color: #0A1794;
    			  	background: url(images/swirl.png) fixed; /*newbkground.png)*/								
    			  	max-width: 1200px;
    				min-width: 400px;
    			  	font-family: Verdana, Geneva, sans-serif;  
    			  	font-size:16px;							
    				color:#fff;
        		  	line-height:106%;
    				margin-top:10px; 
    }
    
    #maincontent{	float:right;
    				width:880px;
    				position:relative;
    				background-image: url(file:///D|/mydesign/css/images/gray4b32.jpg);  /* background image for the iframe */				
    				margin-left:320px;
    }
    
    .header		{	float:right;
    				display:block;
    				position:relative; 				/* IE bug fix*/
    				margin-bottom:5px;
    				
    }
    
    h1,h2,h3,h4{	font-family:'TangerineRegular', arial, san-serif;
    				text-align:left;
    				font-size:80%;
    				color: 3CF;
    }
    
    p 			{	height: auto;
    				font-size:87.50%;
    			 	color: #fff; 
    }
    
    .txtright	{	font-size: 90%;
    				color:#FFF;
    				display: block;
    				float:right;
    				width:880px;
    				position:relative;
    }
    
    .mapname	{	font-family:'TangerineRegular', arial, san-serif;
    				width:880px;
    				float:right;
    		 		text-align: center;
    				font-size:220%;
    				color:#6CF;
    				font-weight:normal;
    		 		font-style: normal;
    				line-height:160%;
    }
    /* ---------------container for the navigation ---------------------- */
    ul 			{	list-style-type: none;}				/* removes list bullets! */
    
    #nav 		{	position:fixed;
    				float:left;
    				font-family:'gabrielle', arial, san-serif;
    				font-size: 116%; 
    				width:320px;
    				line-height:110%;
    
    }
    
    html #nav	{ 	margin:0;
    				padding:0;
    				float:left;
    				position: relative ;
    				
    }					
    
    #navli 		{ 	list-style: none;
    				float:left:;
    				position:fixed;
    				
    
    }
    
    #navli1	 	{	float:left;
    				position:fixed;
    				font-family:'gabrielle', arial, san-serif;
    				font-size: 116%;
    				line-height:105%; 
    				width:320px;
    }		
    
    #nav a,#nav a:link,#nav a:visited 	
    			{	margin: 0; padding: 0; 				
    				color: #3CF;
    				list-style: none;
    				text-decoration: none;
    										
    }
    
    #nav li a:hover{	background-image: url(images/menubkrnd2.png);
    					float:left;
    					width:auto;
    					color: #FFF; 					
    					/*font-size: 100%;*/
    }
    /*************************************************NAVIGATION ENDS HERE***************/
    #footer		{	clear:both;
    				float:right;
    			 	font-size:62.50%;
    			 	font-style:normal;
    			 	line-height: 110%;
    			 	color: #000;
    				margin-top:1%;			 	
    				padding-right:1%;
    				padding-left:1%;
    }/* eND css*/
    Thanks much for all of your hell on this.

    Rick

  13. #13
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    I'm about finished with the mapsearch css page.

    I've removed all of the code that was not being used and attempted to reduce what else I dared.

    Like in a data base - less is more.

    It's all looking pretty well except the #nav portion of the menu is under the #navli1 portion of the menu - AND - I can't get the menu to rise to the top of the visible screen. Very troublesome.

    Do I need both the #navli and #navli1 portions of the menu?

    Here is my full CSS page now.

    Code:
    @charset "utf-8";
    /* CSS Document mapsearch.css 1/3/2012 */
    
    
    html, body 	{ 	margin:0;
    				padding:0;
    }
    
    @font-face {	font-family: 'TangerineRegular';
    			    src: url('../css/fonts/Tangerine_Regular-webfont.eot');
    				src: local("☺"),
     			    src: url('../css/fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
    		         	 url('../css/fonts/Tangerine_Regular-webfont.woff') format('woff'),
     		        	 url('../css/fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
    		         	 url('../css/fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
        			font-weight: normal;
        			font-style: normal;
    
    }
    
    @font-face {   	font-family: 'gabrielle';
        			src: url('../css/fonts/gabrielle-webfont.eot');
    				src: local("☺"),
        			src: url('../css/fonts/gabrielle-webfont.eot?#iefix') format('embedded-opentype'),
    					 url('../css/fonts/gabrielle-webfont.woff') format('woff'),
    					 url('../css/fonts/gabrielle-webfont.ttf') format('truetype'),
    					 url('../css/fonts/gabrielle-webfont.svg#gabrielleRegular') format('svg');
        			font-weight: normal;
        			font-style: normal;
    
    }
    
    body 		{ 	background-color: #0A1794;
    			  	background: url(images/swirl.png) fixed; /*newbkground.png)*/								
    			  	max-width: 1200px;
    				min-width: 400px;
    			  	font-family: Verdana, Geneva, sans-serif;  
    			  	font-size:16px;							
    				color:#fff;
        		  	line-height:106%;
    				margin-top:10px; 
    }
    
    #maincontent{	float:right;
    				width:880px;
    				position:relative;
    				background-image: url(file:///D|/mydesign/css/images/gray4b32.jpg);  /* background image for the iframe */				
    				margin-left:320px;
    }
    
    .header		{	float:right;
    				display:block;
    				position:relative; 				/* IE bug fix*/
    				margin-bottom:5px;
    				
    }
    
    h1,h2,h3,h4{	font-family:'TangerineRegular', arial, san-serif;
    				text-align:left;
    				font-size:80%;
    				color: 3CF;
    }
    
    p 			{	height: auto;
    				font-size:87.50%;
    			 	color: #fff; 
    }
    
    .txtright	{	font-size: 90%;
    				color:#FFF;
    				display: block;
    				float:right;
    				width:880px;
    				position:relative;
    }
    
    .mapname	{	font-family:'TangerineRegular', arial, san-serif;
    				width:880px;
    				float:right;
    		 		text-align: center;
    				font-size:220%;
    				color:#6CF;
    				font-weight:normal;
    		 		font-style: normal;
    				line-height:160%;
    }
    /* ---------------container for the navigation ---------------------- */
    ul 			{	list-style-type: none;}				/* removes list bullets! */
    
    #nav 		{	position:fixed;
    				float:left;
    				font-family:'gabrielle', arial, san-serif;
    				font-size: 116%; 
    				width:320px;
    				line-height:110%;
    
    }
    
    html #nav	{ 	margin:0;
    				padding:0;
    				float:left;
    				position: relative ;
    				
    }					
    
    #navli 		{ 	list-style: none;
    				float:left:;
    				position:fixed;
    				
    
    }
    
    #navli1	 	{	float:left;
    				position:fixed;
    				font-family:'gabrielle', arial, san-serif;
    				font-size: 116%;
    				line-height:105%; 
    				width:320px;
    }		
    
    #nav a,#nav a:link,#nav a:visited 	
    			{	margin: 0; padding: 0; 				
    				color: #3CF;
    				list-style: none;
    				text-decoration: none;
    										
    }
    
    #nav li a:hover{	background-image: url(images/menubkrnd2.png);
    					float:left;
    					width:auto;
    					color: #FFF; 					
    					/*font-size: 100%;*/
    }
    /*************************************************NAVIGATION ENDS HERE***************/
    #footer		{	clear:both;
    				float:right;
    			 	font-size:62.50%;
    			 	font-style:normal;
    			 	line-height: 110%;
    			 	color: #000;
    				margin-top:1%;			 	
    				padding-right:1%;
    				padding-left:1%;
    }/* eND css*/
    Thanks much for all of your hell on this.

    Rick
    Oops . . . see attachment
    Attached Images Attached Images

  14. #14
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Oops . . . see attachment

    Oops . . . I meant to say help!

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Do you have an updated link?

    It looks like you have corrupted the IE6 hack here:

    Code:
    html #nav	{ 	margin:0;
    				padding:0;
    				float:left;
    				position: relative ;
    				
    }
    That should most likely be "* html" - although usually you would use position:absolute for IE6 to absolutely place it in stead of fixed.


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
  •