by Tyler Dockery of Dockery Design.
While creating a new website for ASPE’s IT Division for nationwide training, I ran into a problem with my formatting. In my CSS stylesheet, I began by outlining an over-arching style to command the entire site. I noted it thus:
* {
margin-left: 0px;
margin-top: 0px;
font-family: Arial, Helvetica;
border: 0px;
}
This CSS text would take every item in the entire website, and give it a 0 pixel border, remove any margins on the left and top, and prepare it for a serif font. This worked gloriously, allowing me to overcome many standard problems that body {} doesn’t always get to.
However, I first ran into a problem with Ordered lists , and Unordered lists. Different Browsers have different margins for such lists, and setting the margin-left to 0px effectively hid the bullet or numbers of these lists. After laying in a few pages (there are close to 160 in the first phase of this project) I started to notice an issue. To show these items I had to manually set the margin on these items to show. I solved the issue by including:
ul, ol {
margin: 0em 1em 0em 0em;
padding-left: 30px;
}
This gave them a slight margin, and a strong padding to shove such items back into the page and set them apart.
The second problem came up when my horizontal rules also failed to show up. After investigating the problem, I noted that the element would automatically disappear when given a border attribute.
The border element was given in the * portion of the CSS, and was subject to a border on every page, in every instance. The only solution was to completely override the master stylesheet.
I whipped out my old teaching materials, and found a seldom used element:
! important
and brought it into play. ! important overrides any element on anypage, at any time. This will override the master stylesheet, as well as inline styles. The final solution:
hr {
height:1px ! important;
border: none ! important;
background-color:#000000 ! important;
}
every time the tag was used, the which is invisible, is given a height (1 pixel tall), given “none” as a border condition, and given a background color of black- just in case something should go wrong.
An elegant solution to a problem which cannot be adjusted without tearing out huge portions of the website.
[...] This post was Twitted by tyler_dockery [...]
I thought I was the only obsessive saver…
Kudos for the excellent information.
Thank you for the much needed info.
Great information! Thanks!
hey, your post… Just how important is illustrator anyway? And designer that doesn’t use photoshop for their logo creation, or their magazine layouts is simply lazy! I didn’t earn my associates degree in art just to be bossed around by so called “smart” designers.
If simply we could find more interesting blogs like this. thank you for this. Can’t wait to include ! important with my css knowledge.
[you gave this same reply in another post, so I'll just repeat my reply]
um… Ok.
First of all, Associates Degree holders are just as smart and savvy as lots of designers out there, so please understand that I give them the utmost level of respect.
Second, Photoshop is a fine tool, and yes, it may just be versatile enough to create a full magazine
Third, I’m not sure what prompts you to note that there are “smart” designers out there. I’m sure that there may be plenty who try to flaunt their smarts, but please don’t take issue with them here.
Photoshop is not the end-all be-all of the design world. I would highly recommend you look into other programs in Adobe’s fine stable to see what you are missing. I don’t mean to come down on your comment like a ton of bricks, but being ignorant of the other tools doesn’t make you in the position to slam other designers. Very few professional designers actually use photoshop for final designs due to the many issues with scalability. Look into these programs, and I feel you will be pleasantly surprised.
Hey this blog is great. I’m looking forward to reading more. My photoshop skills are off the charts. Why don’t you ask me to do a guest blog entry? Am I not hot?
So… Can I use css overrides with ! important to make your blog follow my links? [ link removed for obvious spammery ]
CSS overrides using ! important can be used in lots of places, but I see that the gentleman below failed. Can I use this elsewhere though? I’ll have to give this a try.
will ! important help me with my blog? I’ll stuff this in edgewise on my own site.
Right on. It’s more informative and easy to understand. Thanks a lot such a nice guideline.