I had a problem with my <h1> tag running through an object that was floated to the right in the same container and this particular <h1> had a border. No matter what I did to the float, certain objects never physically recognised it and ran through it or dropped down.
The solution I have found for this problem is simply add overflow: auto to the offending tag.
For example: <h1 style=”overflow:auto;”>Header</h1>
As ID and Class can both be used for CSS, there has been a little bit of confusion as to which one is the best to use.
In terms of simplicity, put above all; neither are ‘best’. However, they both have their appropriate places and uses. This is where we can categorize which is ‘best’ for what.
ID’s are used when a style only occurs once on a page. This is because ID’s are used for unique identification purposes as well. For example:
<div id=”top”></div>
Will take you to wherever the code is placed in the page whenever someone goes to (for example) thispage.html#top.
It isn’t impossible to use duplicate ID entries, but one good pointer is that if you use duplicate ID’s then your won’t be valid according to the W3C XHTML Validator (and their set standards) and you will confuse browsers if you use the ID in the URL to take users to a specific part of the page (refer to the paragraph or two above).
Now a class is more diverse and should be used when you use a style more than once on a page. Example:
<div class=”commonstyle”><strong>Umm random title</strong></div>
<div class=”commonstyle”>Hmmm hmmm I never was good with example text.</div>
Here’s a summary of what I have said for anyone who doesn’t read too deep when they search for what they want (hehe):
- Use an ID when a style will occur once on (and more effectively, on multiple pages).
- Use a class when a style will occur more than once.
- Define the IDs and classes in an external style sheet so the browser can cache the file, and that style information doesn’t have to be downloaded with each page.
- Use inline style definitions, i.e. <div style=”ding: dong;”>, when a style is unique to one tag on one page.
Also worth noting; IDs take precedence over classes in stylesheets. Inline styles take precedence over any CSS declaration in any external or embedded stylesheet document.