I am working on a website where I would like the paragraphs and h2 tags to have the same appearance visually.
I have looked through the code so many times but cannot see why they appear (ever so slightly) different.
I am hoping a fresh pair of eyes may be able to spot it. I want the h2 tag to be styled the same as the paragraphs.
The website is here.
h2{
padding-bottom: 5px;
color: #808080;
**letter-spacing: -1px;**
line-height: 1em;
font-weight: normal;}
have letter-spacing: -1px; for p element and it will appear the same
Your header tags have a letter spacing of -1px (defined in style.css on line 56):
h1, h2, h3, h4, h5, h6 { padding-bottom: 5px; color: #808080; letter-spacing: -1px; line-height: 1em; font-weight: normal; }
I was able to determine this using Chrome's developer tools by inspecting the h2 and the p tags in the Elements panel, and looking through the computed styles in the Styles tab to see what's different about them. I noticed the h2 has letter-spacing, whereas the p does not:
It's about CSS trick.
For example:
<style>
body {
font-size:12px;
line-height:1.100;
font-family:arial;
}
h2 {
font-size:12px;
font-weight:300;
line-height:1.100;
display:inline;
font-family:arial;
}
</style>
we need <h2>our product</h2>
The focus you should take notice is the size of font, font-weight and display. Hoe this helps
Demo here
If you need the h2 tag inside the p tag
DEMO
I'm using Foundation. I've got a dropdown menu structured like so:
<div class="dropdown"><ul><li>...
I want to change the font size of all the elements in this menu. However, when I try to target them with .dropdown { font-size: 0.5em; }, I get overridden by this rule from the Foundation styles: ul, ol, dl { font-size: 1rem; }.
Is my only recourse to target the list elements specifically? i.e. .dropdown ul { font-size: 0.5em; }. This introduces a lot of unwanted specificity. To make matters worse, there's a second font-size rule for nested lists, so I would have to account for that as well with even more specific selectors. Seems like I'll trip over this a lot.
Am I missing something? How do I make this not such an annoyance?
You will need to either make your styles more specific or alter the default size for all lists.
The reason being ul, ol, dl { font-size: 1rem }. If it had been using em or % instead, then it would have happily taken its context from the ancestor element (.dropdown in this case, which is .5em).
So, you could either do this:
ul, ol, dl {
font-size: 1em; // or 100%
}
Or
.dropdown ul, .dropdown ol, .dropdown dl {
font-size: 1em; // or 100%
}
They'll both do what you're looking for without the side effects that would come along with your proposed styles when there's nesting involved (.dropdown ul { font-size: .5em }). The second option I've provided should be specific enough to override styles for nested lists.
I'm currently using CSS to change the hyperlink colors in my left navigation but there seems to be some inconsistency. Some links will take the correct properties I have declared, whereas, other links won't accept them. I have declared the same class nav to all the links. There isn't any overwriting that I know of for these links since it's isolated.
Below is the left navigation code snippet
This works:
var context='<%=request.getContextPath()%>';
<%-- var sOrg = '<%=sOrg%>'; --%>
document.write("<div id=\"leftNav\">");
document.write("<div id=\"leftNavtext\"><a href=\"home.htm?sOrg="+'<%=sOrg%>'+"\" class=\"nav\" id=\"phome\" style=\"text-decoration:none\" >Home</a></div>");
Then this doesn't work:
<% if(roles.contains("PEIMSDataCompleter")) { %>
document.write("<div id=\"leftNavtext\" >Data Submissions</div>");
Then this works:
document.write("<div style=\" padding-left: 20px;padding-top:5px;\">Monitor Data Loads</div>");
Here is my CSS:
#leftNav {
width:180px;
height:687px;
background-color:#E0F0F2;
margin-bottom:15px;
padding-left:10px;
text-decoration:none;
text-color: #0083cc;
}
#leftNavtext {
font-family: Arial, Helvetica, sans-serif; font-weight:800;
font-size:95%;
color:#0083cc;
width:auto;
padding: 20px 10px 3px 0px;
}
#noteBody{
font-family: Arial, Helvetica, sans-serif; font-weight:800;
font-size:95%;
width:960px;
margin:auto;
}
// Below is the code for getting the hyperlink text to be formatted correctly (ie link colors)
a.nav:link {color: #0083cc; text-decoration: none; }
a.nav:visited {color: #0083cc; text-decoration: none; }
a.nav:hover {color: orange; text-decoration: underline; }
a.nav:active {color: #0083cc; }
As far as I can see, there are no differences between these two links. These are just a few of the many links I have in the left navigation and this happens randomly. I'm currently using IE 9 and this browser is my requirement.
Any help would be greatly appreciated! Thanks!
Did you formated all :pseudo stated of your anchors ?
a, a:link, a:visited {some.css}
a:hover, a:visited:hover, a:active, a:focus {some-other.css}
Perhaps you are looking at a browser specific styling.
First of all,
text-color property doesn't exists ; use color instead.
If you're using ASP (it seems to), please add the appropriate tag to your question
Next, the problem isn't due to your CSS ; see this tiny JSFiddle here : http://jsfiddle.net/j8ruV/2/
The fact is you're dynamically adding objects to your page with the document.write() method, but this method adds your divs weirdly to the DOM, and so they're not considered by the CSS (except for the inline one). By simply testing with the .innerHTML property, this seems to work (see the fiddle).
I ended up having to place inline code for the links:
document.write("<div id=\"leftNavtext\" >Data Submissions</div>");
On my website I have an <H1> (the first one) with a title in it but it is all cramped. I've checked the CSS and can't see why it is all squeezed together. Can you help me find the culprit?
Its because of this:
style.css(line 115)
body{
12px/1.5em sans-serif <===
...
}
You set line-height on the body, and you're surprised that the line height is messed up? Remove that style and you're all fixed.
set your line-height to 1 (default). line-height: 1;
Most likely this line:
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { font-family: Arial, Helvetica, sans-serif; margin:0 0 0.5em; line-height:1.5em; }
Which is in swatch/styles.css.
That line-height property is probably the issue.
Specify line-height for your headings. By looking at the font, try a line-height: 1.1em. i.e.
h1{
line-height: 1.1em;
}
You need to set your line-height in your css. For example
h1
{
line-height: 30px;
}
Hope this helps
Whats messing your H1 is the font: 12px/1.5em sans-serif; in your body style in you style.css line 115.
The element enclosing the h1 element has its width set to 50%. This forces the long heading across several lines. Remove that setting and shorten the heading.
Another same answer, but necessary:
Somehow unset line-heights for h1..6 are inherited from parent elements if parent elements have set line-heights. Tested in Firefox 24, Chrome 30 and ie8.
So here is another line for the reset area of css, to reset h1..6 line-heights and to prevent inherit behaviour:
h1,h2,h3,h4,h5,h6 {
line-height:normal; /*otherwise line-height is inherited*/
}
After reading this article I'm thinking to change my css reset from eric meyer reset to global reset * {margin:0;padding:0}
or thinking to use like this only
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, textarea, p, blockquote,
th, td, a {
border: 0 none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
text-decoration: none;
vertical-align: baseline; }
table {
border-collapse: collapse;
border-spacing: 0; }
li { list-style: none; }
Global resets will screw with form input formatting. If you are not using forms, you can get away with it. Otherwise, selective resets give more manageable results.
I've actually expanded Meyer's reset to do some force block-level HTML5 elements to style properly as well: http://kingdesk.com/articles/css-reset/
A more appropriate approach to reset stylesheets is to make them part of your main CSS and amend them on a per-project basis.
For example, many reset stylesheets have this line:
body{line-height:1;background-color:white;color:black}
But it may be the case that you are going to use a different background-color on your body, so you would define this in your own project stylesheet.
body{background-color:black;color:white}
By placing your reset in your main stylesheet, and considering it as a "base" instead of "reset", you can replace the reset values with what is more appropriate to your project. You can then also chop out the bits that aren't relevant to your project, for example you may never use tables on a particular site, so why include a reset for them? Here is my "base" from a recent redesign of my work website:
NOTE: This is specific to my work site and may not be appropriate to your own project, use only with careful consideration.
/* #group Base */
html,body,div,span,h1,h2,h3,p,a,ul,li,small,footer,header,hgroup,section{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
:focus{outline:0}
html,body{background-color:#fff;color:#000}
body{line-height:1;font-size:87.5%;font-family:"ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",Georgia,Times,'Times New Roman',serif;width:890px;margin:0 auto;position:relative}
/* #group Text Formatting */
p{margin-bottom:5px;font-size:1em;line-height:1.4em}
/* #end */
/* #group Links */
a{color:#B11C2D;text-decoration:none;-webkit-transition:color 0.3s linear}
a:visited{color:#6d2831}
a:hover,a:focus{color:#000}
/* #end */
/* #group Lists */
ul{list-style:disc outside none;margin:1em 1.5em}
/* #end */
/* #end */
I trimmed out what I didn't need, and made sure I wasn't overriding the base later by replacing the reset values with what I needed as a base. This is at the top of my screen.css file and is followed by styles not part of the base (such as positioning of the <header>).
Finally, reset stylesheets are not set in stone. You can edit them as you feel appropriate to make more suitable bases for your web projects. If you want to retain 'outline' on links for keyboard navigation, then edit your reset to allow for this. Create your own base CSS and then repurpose it as appropriate on each project.
I'd disagree with the 'disadvantages' of resetting, and say that basic CSS resetting is actually good, and the so called speed hit is practically non-existent as browser engines are fast enough to do the inheritance cascading - that's why they're called cascading style sheets.
I've heard from a lot of smart people that * { margin:0;padding:0 } is processor intensive, since it has to reset every element, although I've never seen any tests done. But since yahoo and eric meyer recommend a more comprehensive stylesheet i've been going that route.
Here's a site where Paul O'brien briefly discusses what i'm talking about. He also states he's never seen a difference in load time, i just figured i'd mention it.
I use a slightly changed version of CSS Reset with no problem at all:
/* #group ntz css reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height: 1}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none}
strong, b {font-weight:700}
em, i {font-style:italic}
ins {text-decoration:none}
del {text-decoration:line-through}
table {border-collapse:collapse;border-spacing:0}
caption, th, td {text-align:left;font-weight:100}
textarea {overflow:auto}
button {cursor:pointer;padding:0}
*:first-child+html button {width:1;overflow:visible}
* html button {width:1;overflow:visible}
input[type="checkbox"], input[type="radio"], input.radio, input.checkbox {vertical-align:text-top;width:13px;height:13px;padding:0;margin:0;position:relative;overflow:hidden;top:2px}
a {text-decoration:none; color:#4f81bd}
a:hover {text-decoration:underline}
:focus {outline:0}
a:focus {outline:1px dotted #999}
/* -----------------------------------
smart and dirty
--------------------------------------*/
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
/* #end */
The * {} solution is a good one for quick projects. For bigger projects you may want to use a real reset, even if you gain few extra kb in your source code. You just need some consistency over browsers...
I agree almost 100% with that article. Globally resetting elements is messy and slow. Even using the global * selector is not necessary - you hardly ever want to set margins and padding to 0 anyway, and many elements (such as div and the inline elements) don't have margins or padding by default in any browser.
Furthermore, it may not even matter if there are some margins on an element. Look at this page's title - would it matter if the margin was 1.2em instead of 1.1em? Hardly.
Just set a nice baseline for all the elements you want to use. Something like this:
body {
font: 13px/1.3 verdana, sans-serif; /* change to desired value */
margin: 8px; /* change to desired value */
padding: 0; /* change to desired value */
}
h1 {
font-size: 1.8em; /* change to desired value */
margin: 1em 0; /* change to desired value */
}
a img {
border: 0; /* removes border on linked images */
}
table {
border-collapse: collapse; /* personal preference */
}
table th,
table td {
padding: 3px; /* change to desired value */
}
...etc etc. You get the idea.
Don't think you can move from Eric Meyer to Global after the project is done.
I have seen a lot of newbies using the Global "reset" and those kids mess everything up because they don't have a basic understanding of what browser defaults need removed for cross browser consistency.
But I think this Eric Meyer vs. Global might be a more philosophical than just CSS. There are a growing number of devices out there to present websites on. The presentation layer is not going to look the same on a Blackberry, iPhone, iPad, or digital signage. People in the Global camp say websites need to look GOOD... but not exactly the same. People in the Eric Meyer camp say they DO need to look consistent and GOOD across browsers and devices to whatever extent possible. A fine goal, but time consuming. It reminds me of the early days of the web when people were still trying to make print look exactly the same as on the web. I'm still in the Eric Meyer camp because it makes my life easy, and my code maintainable... but the days of homogeneous presentation layers are coming to an end.