Forum Moderators: not2easy
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
At the top of my page. However I created an extra div tag at the bottom of the page where I am placing some footer links. It looks like...
<div id="footerLinks"><a href="Privacy.htm"> Privacy Policy</a> ¦ <a href="Contact.htm">Contact Us</a> ¦ <a href="Site_Map.htm">Sitemap</a></div>
I tried unsuccessfully altering the way the links and text are treated in here...
#outerWrapper #footerLinks {
background-color: #447E89;
border-top: solid 1px #666; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
height: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000;
}
Unfortunately since my footer was created with a div tag it is picking up the CSS style that is defined farther up the page for all div tags. Does anyone know of an easy way of overriding this footer div I created to have a different treatment for links and text?
Unfortunately since my footer was created with a div tag it is picking up the CSS style that is defined farther up the page for all div tags.
NO, there is nothing that is set on your "div tag" that is not its default anyway.. and "further up" gets ruled out by the specificty of your ID selector anyway.
"divs" have zero margins/padding/border by default, if you want it to be different in the footer div, then you need to tell it to be so, and that would apply even if you'd included the "div tag" in your reset (your code above) or not
if you want it to be different in the footer div, then you need to tell it to be so, and that would apply even if you'd included the "div tag" in your reset (your code above) or not
As you can probably tell I know enough CSS to be dangerous, but based on this comment isn't this what I did here...
#outerWrapper #footerLinks {
background-color: #447E89;
border-top: solid 1px #666; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
height: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000;
}
Now if I am reading swa66's comment correctly I think I need to remove...
#outerWrapper from the footer tag and assign it to something else, say #outerWrapper2 for example?
I have a very loose idea of how to handle this, I just don't know enough CSS to know for sure.
it's not that you have to apply a second ID'd div, you have to figure out why the first isn't working
it's good to get dangerous ;)
Suzy
Thanks, after screwing around with this for a while I finally figured it out. I think I rebuilt the page about 4 times before it worked exactly like I thought it should, but it looks fantastic now. Thank you to everyone for your help on this.
