View Full Version : Overridding CSS

02-22-2008, 04:32 PM
There is a "stock" CSS and our local variations. I don't have access to the stock stuff. But there is a value I want to change in it:

#TopRightDiv {
z-index: 0;
position: relative;
clear: both;
width: 100%;
min-height: 98px;
_height: 98px; /* IE hack: IE only sees it - IE doesn't have min-height */
_height /**/: 100px; /* IE hack: IE5.x only sees it */
margin: 1px 0 0 0;
padding: 1px 0;
background: #644F81 url("images/BannerBackground.jpg") no-repeat 0 0;}

#BannerDiv {
position: absolute;
top: 0;
right: 0;
height: 100px;}

I don't want that "1px" in the margin. It is applied here:

<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html" %>
<div id="TopDiv">
<div id="TopLeftDiv">
<div id="HeaderDiv">
<a href="http://www.dhs.state.il.us">
<html:img page="/theme/images/DHSLogo.gif" alt="DHS" /><br />
<span class="agency">Illinois Department of Human Services</span><br />
<span class="secretary">Carol L. Adams, Ph.D., Secretary</span></a>
<div id="TopRightDiv">
<div id="BannerDiv">
<html:img page="/theme/images/banner.jpg" alt="Helping Families. Supporting Communities. Empowering Individuals." />

I had thought to add this:

/* override the DHS CSS at http://www.dhs.state.il.us/Sites/OneWeb/Site.css */
#TopRightDiv #BannerDiv img{
margin: 0;

to my CSS, but that didn't work. Being less specific (#TopRightDiv {...} in the CSS I have access to) will remove the protected stuff, but it's not a good idea to do that.

Any better ideas?

02-22-2008, 04:49 PM
#TopRightDiv #BannerDiv img{
margin: 0;!important

would that just solidify it by adding important, or would that make a difference?

02-22-2008, 05:07 PM
Put another stylesheet or set of styles after the stock.css file

#TopRightDiv {
margin: 0;

How would #BannerDiv img be what you use when their is no margin even applied to it? I suggest you learn the reason of why CSS is what it is. Learn what CSS stands for.