Body{} font call overwriting footer color call

The footer font color:#000 is not being being overwritten.

I believe its the body{} font settings that are more “specific” but I don’t really understand how that works.

CSS . . .

@charset "utf-8";
/* CSS Document */
/* mapsearch.css 11/23/2011 */


html, body	{	margin:0;
			padding:0;
}

body 		{      color:#0A1794;
			background:  url(images/newbkground.png) fixed;
    			font-family: Verdana, Geneva, sans-serif;
    			font-size:14px; 
			color:#FFF;
    			line-height:106%;
}

#outer 		{max-width:1200px;  /* use for outer % conversion */
			 min-width:33.33%;   /* 400px */
			 width:100%;           /* 1200px */
			 position:relative;
			 margin-top:12px;
} 

#maincontent{    float:right;         
		        width:73.33%;        /* 879.96% (880.px) */
		        margin-top:12px;
			margin-left:26.7%;   /* 320% for navigation */
			margin-right:1.67%;  /* 20px */
			padding-right:.83%;  /* 10px */
			background-image:url(images/gray4b32.jpg);
}

.header		{
			float:right;
			display:block;
			position:relative;
			margin-bottom:6px;
}

h1,h2,h3,h4,h5,h6
			{ text-align:left;
			  color:#1EC2F9;	
}

p 			{width:auto;
			 height:auto;
			 font-size:100%;
			 color: #fff; 
}

.pleft 		{float:left;    			 
			color: #fff /*#1EC2F9; */
			font-size: 86%; /* changes font sise */
			line-height: 110%;
    			position: fixed;
			top:120px;
    			width:22%;      /* width of navigation list */
			margin-left:1.2%; /* moves the menu to the right */
			padding:2px;
				
}

.psmaller	{	width:auto;
			height:auto;
			margin-top:5%;
			font-size:68%;
			line-height: 110%; 
			text-align: left;
			color: #000;
}

.txtright	{	font-size: 80%;
			display:block;
			float:right;
			width:73.33%;  /* 880px */
			position:relative;
			margin-bottom:8px;
}

.plate  	{	
			float:right;
			display:block;
			position: relative;/* IE bug fix*/
			margin-bottom:10px;
}

.imgpic		{
			float:left;
			display:block;
			position: relative;/* IE bug fix*/
			border-style: ridge;
			border-color: #9990;
			margin-right:4px;
			margin-left:4px;
			margin-top:12px;
}

/* ------container for the navigation----currently under "outer"------------------*/
#nav {
margin:0;
padding:0;

    float:left;
    list-style: none;
    color:#fff;
    font-size: 100%;   /* changes font sise */
    line-height: 115%;
    position: fixed;
    margin-left:.83%;  /* 10px */
    top:12px;
   	
}

	* html #nav{position:absolute;}  /* effect each list item */
	#navli{font-size: 90%; margin:0 0 5px;
	list-style: none;}	
	
	#nav a,#nav a:link,#nav a:visited {
	color: #FFF;
        list-style: none;
	text-decoration: none;
	font-size: 110%; display: block;   /* changes font size */
	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;
			 margin-top:12px;
                        [COLOR="#0000CD"] color:#000;[/COLOR]  this still shows as WHITE text?
			 font-size:70%;
			 line-height: 110%; 
			 padding-left:.66%px;
			 padding-right:.66%;
}
/* eND css*/

Just for fun I’ll put in the HTML . . .

I’m still trying to understand the flow with the html.

Where does <div id=“outer”> and <div id=“maincontent”> really supposed to go? And how doe one know.



&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
&lt;meta http-equiv="Content-Language" content="en"/&gt;
&lt;title&gt;Search Corona del Mar Real Estate&lt;/title&gt;
&lt;link type="text/css" rel="stylesheet" href="css/mapsearch.css" media="screen,projection,tv"/&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="outer"&gt;
  &lt;div class="header"&gt;&lt;img src="css/images/cdmsearchplate.png" width="880" height="40" alt="corona del mar name plate" /&gt;&lt;/div&gt;
   &lt;div class="txtright"&gt;&lt;p&gt;This search engine is linked to the CRMLS (California Regional Multiple Listing Service) system which is the largest MLS in the United States. We display the latest listing information before it is &lt;em&gt;&quot;pushed&quot;&lt;/em&gt; out to all of the vendors nationwide. Select a &lt;em&gt;price range, bedrooms, and property type.&lt;/em&gt; This will display house icons on the screen. At the bottom of the map you will see &quot;Expand Map.&quot; There is Map View, List View and Gallery View. You can save searches or set up eMail alerts to be notified of new listings. This particular page is a custom map search set for &lt;em&gt;Corona del Mar&lt;/em&gt; in Newport Beach.&lt;/p&gt;&lt;/div&gt;

  &lt;div id="nav"&gt;
    &lt;ul id="navli"&gt;
      &lt;li&gt;&lt;a href="http://www.propertieswithstyle.com" title="HOME PAGE"&gt;RETURN TO HOME PAGE&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!--eND of Nav--&gt;
  &lt;div id="maincontent"&gt;
  
&lt;iframe width="882" height="1200" style="border: outset; background-color:#F999" src="http://www.searchpoint.net/Search/mapSearch.aspx?_account=idd&_new=1&org_id=carets&agent_public_id=SSCHRRIC_socal&sponsor_office_id=H631_SOCAL&master_uid=DDA3E921-85C2-488C-8B79-DA50DB9D19BA&criteria=&lt;Search&gt;&lt;OrgId&gt;carets&lt;/OrgId&gt;&lt;NELat&gt;33.61304676018744&lt;/NELat&gt;&lt;NELong&gt;-117.8405570983887&lt;/NELong&gt;&lt;SWLat&gt;33.5843072580453&lt;/SWLat&gt;&lt;SWLong&gt;-117.88999557495118&lt;/SWLong&gt;&lt;LocationType&gt;zip%20code&lt;/LocationType&gt;&lt;MidLat&gt;33.5986770091164&lt;/MidLat&gt;&lt;MidLong&gt;-117.86527633667&lt;/MidLong&gt;&lt;Zoom&gt;14&lt;/Zoom&gt;&lt;SearchType&gt;1&lt;/SearchType&gt;&lt;PolygonType&gt;zip&lt;/PolygonType&gt;&lt;LocationType&gt;zip%20code&lt;/LocationType&gt;&lt;Location&gt;92625%20(Zip%20Code)&lt;/Location&gt;&lt;MinPrice&gt;500000&lt;/MinPrice&gt;&lt;MinBeds&gt;2&lt;/MinBeds&gt;&lt;MinBaths&gt;2&lt;/MinBaths&gt;&lt;MinSqFt&gt;1400&lt;/MinSqFt&gt;&lt;Status&gt;A,B&lt;/Status&gt;&lt;oper_in_misearch_features_2&gt;OR&lt;/oper_in_misearch_features_2&gt;&lt;oper_in_misearch_features_3&gt;OR&lt;/oper_in_misearch_features_3&gt;&lt;RESPropertyType&gt;SFR,CON&lt;/RESPropertyType&gt;&lt;Features&gt;&lt;/Features&gt;&lt;/Search&gt;"&gt;&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;&lt;/iframe&gt;
   
    &lt;div class="imgpic"&gt;&lt;img src="css/images/sfrlogo.png" width="80" height="70" alt="Short Sale Logo" /&gt;&lt;/div&gt;
    &lt;div class="psmaller"&gt; Only those who have passed the National Association of Realtors&reg; education requirements for their Short Sale and Foreclosure Resource course are allowed to display this logo. Properties With Style, Inc. is a member in good standing of the National Association of Realtors&reg; and is proud to have earned this achievment. &lt;/div&gt;
    
    &lt;div id="footer"&gt;
      &lt;hr /&gt;
      &lt;p&gt;Copyright, Properties With Style Inc., a Real Estate Corporation&copy;. The information being provided by CARETS&reg; is for the visitor's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties visitor may be interested in purchasing. Any information relating to a property referenced on this web site comes from the Internet Data Exchange (IDX) program of the CARETS&reg; MLS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site. Any information relating to a property, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals. The data contained herein is copyrighted by CARETS&reg; and is protected by all applicable copyright laws. Any dissemination of this information is in violation of copyright laws and is strictly prohibited. CRMLS, Inc., data content displayed on this site is deemed reliable but is not guaranteed accurate by the MLS. Information of sellers and others have not been verified. Data maintained by the Associations or their MLS may not reflect all activity in the market. DRE License: 01408382&lt;hr /&gt;&lt;/p&gt;&lt;/div&gt;&lt;!--eND Footer--&gt;
  		&lt;/div&gt; &lt;!--enDmaincontent--&gt;
	   &lt;/div&gt;&lt;!--outer--&gt;
	  &lt;/body&gt;
    &lt;/html&gt;
&lt;!--ldsearch.html 11-27/2011--&gt;
]/code]

Thanks . . .  Rick

The easiest way to track down the origin of a specific style is to inspect in developers tools like firebug or chrome. Just inspect the element and it will show you the line in your css the color is coming from.

Actually , the issue is that COLOR inheritance.

p {width:auto;
height:auto;
font-size:100%;
color: #fff;
}

With this, you have made a rule that ALL P’s will be #fff unless otherwise specified.

Do this as an experiment, if you type text DIRECTLY into the #footer DIV it WILL be #000, but if you wrap that same text in a P it will be #FFF. See?

So two ways to fix this:

p {width:auto;
height:auto;
font-size:100%;
color: inherit;
}

You will just have to remember to assign the parent element the color as needed .

OR
#footer p { color:#000}

Incidentally: you have a stray </p> in your iframe
and you CAN’T place <hr />s INSIDE P tags.

Hope that helps

Dresdin & markbrown . . .

Thanks for your suggestions.

I’ve agonized over this for 24 hours. Yikes.

I’ve learned over that time.

I did go and find the development tools in Chrome. They were not as intuitive as the F12 key I found in IE8.

The IE8 validation was very helpful and very easy to find and use.

Dresden was right about color. Most of that was inherited from the body{} and couldn’t be changed.

Also I discovered that the <divs> I had, <outer> and <maincontent>, conflicted with each other. I deleted <outer> all together and just used maincontent with a few small changes. That really cleaned things up. What I was looking for was margin settings as someone earlier suggested that I look there.

Dresden said “Incidentally: you have a stray </p> in your iframe (but I couldn’t find that and still haven’t yet.) and you CAN’T place <hr />s INSIDE P tags”

I’ve moved my <hr />s and it seems to work well enough.

Now . . . footer and other small niches.

The first three pages available on my site are using the exact same CSS page yet the rendering between IE8 and Chrome (especially the footer) are not consistent. It’s in the .html page I believe.

Thanks for all your help. Everyone has moved me along pretty well and I grateful.

Rick www.propertieswithstyle.com

You’re declaring a PX metric font on BODY – that pretty well shtups the ENTIRE reason for using %/em fonts ANYWHERE in the entire document as EVERYTHING else inherits from body.

so you’re saying 70% of 14px… Why bother using %/em at that point?!? Literally, you’ve completely broken the entire point of using %/EM fonts to build a page.

The only reason I did that now in the design phase is because I couldn’t get things to line up with percentages.

To see where the hard core alignment was I started using pixels. That helped me discover where the problems were.

HOW should I declare the font size in the body?

Are there other things that should be declared in the body that I don’t reference?

Remember, at first I had a <div outer>; 1200px and a <div maincontent> which was 880px wide float right and 320 px float left.

These two that gave me all of the alignment problems with margins etc.

Today I deleted the outer div completely, and adjusted the maincontent div, (880px) then looked at all of my margins and things are looking a bit better. I haven’t uploaded these updated pages yet.

Here was a question I kept asking myself regarding percentages.

Do I use the 880px to make the horizontal conversion to percentages? Before I was using 1200 which didn’t seem correct in an 880 content.

Once I’m finished here I will convert all horizontal measurements back to percentages.

Whew . . . every time I see a message from deathshadow it sort of makes my skin crawl. I visualize me all alone in dark places surrounded by alien droids with huge light green long glowing teeth . . . . YIKES!

Thanks deathshadow

I think that’s where your disconnect is – the px and %/em are completely unrelated sizes that have NO fixed relationship size-wise. The default 1EM at 96dpi may work out to 16px … but on my machine 1em is 20px, on my media center it’s 24px, and on one of my old handhelds it’s 12px. That’s actually WHY you use %/em for content as it automatically adjusts to the size the user wants to see the page at. You’re basically putting percentages on things that shouldn’t have percentages in the first place; or if they do it should be a mix… this goes with the attempt to make a fixed width layout that adjusts to %, which on the whole is just asking for the layout to break.

Also, not all % are the same! % width is not based on the same percent as fonts… Well, it kinda is… but % is based on the current setting for the ATTRIBUTE… so 73% width means 73% of the PARENT ELEMENT’s WIDTH.

Example:
<div style=“width:1000px;”><div style=“width:80%”></div></div>

The inner div would be 800px wide… % isn’t based on font size, it’s based on the existing attribute value of the parent element… that’s why it works for FONT, as it’s based on the EXISTING font value…

<div style=“font-size:16px;”><div style=“font-size:75%”></div></div>

the inner div’s font-size is 12px…

I think you missed that in your CSS trying to use a percentage width to equal PX… In THEORY you could be using EM for that, but again EM by default has no fixed relationship to px, the sizes of each can vary wildly in relation to each-other.

THIS:


#maincontent{    float:right;         
		        width:73.33%;        /* 879.96% (880.px) */
		        margin-top:12px;
			margin-left:26.7%;   /* 320% for navigation */
			margin-right:1.67%;  /* 20px */
			padding-right:.83%;  /* 10px */
			background-image:url(images/gray4b32.jpg);
}

Is NOT how % on width, margin or padding works…