I have a client that has an existing blog through Squarespace. I am taking over the website, and am coming across some code I have never seen before. We have an issue with fonts rendering correctly across all browsers. When I inspect the elements in question, I find some very strange CSS code. I have noticed on many elements such as h1, that there are repeated rules in the CSS. See below for example:
#topNav nav, #topNav ul, #topNav li, #topNav a
{
font-family: Georgia,serif;
font-weight: normal;
font-style: italic;
line-height: 1.6em;
font-size: 13px;
text-transform: normal;
letter-spacing: 0px;
font-family: "Helvetica Neue","Arial","sans-serif";
font-size: 30px;
line-height: 4em;
text-transform: capitalize;
text-decoration: none;
letter-spacing: -1px;
font-weight: bold;
font-style: normal;
}
As you can see, there are several repeated rules. What are the consequences of this CSS code? Could this cause the code to be styled differently on different browsers?
This is an extremely large website, so I am hoping this wasn't a habit of the last developer to code like this. Should cleaning the styles up be my top priority? Any opinions would be fantastic!
Thanks!
I would have to say that it is just poor coding. As for the impact on rendering, I would think that the last instance of the style would take precedence since the whole nature of CSS is "cascading" inheritance.
A simple experiment or two should yield the answer to your question.
Related
I've been trying to add a css font style like the one on the landing page of http://www.lecrae.com. The text that says "LECRAE", I'm trying to use the same css style, but it doesn't seem to be working for me, only "W" in the word "Welcome" shows, and it doesn't look like the font too. Here's my code below:
CSS
.header { font-family: Futura, "Trebuchet MS", Arial,sans-serif;
font-weight:700;
letter-spacing:14em;
line-height:1em;
color:#333;
font-style:normal;
font-size:120px;
}
HTML
<h1 class="header">Welcome</h1>
There are three issues here:
Only the first letter "W", of your heading "Welcome" is showing.
The font(s) you specified are not showing.
You want to use Futura, but it isn't available for free.
The first issue is solved easily. You are using a huge letter-spacing of 14em, I assume you made a typo when copying the given source and it was supposed to be .14em. This explains why you can only see the first letter: all other letters are being pushed out of the screen.
The second issue is also solved easily. You are specifying fonts that might not be available on a users computer. For example, most Linux distributions do not ship with any of the fonts you specified and would hence fall back to sans-serif. If you really want to use a specific font, #import that font from a source like Google Fonts. This way, the font will be downloaded by the user's browser.
The third issue is easy as well: you either pay for the font or you need to use a different, freely available font instead.
Putting that together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
.header {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: .14em;
line-height: 1em;
color: #333;
font-style: normal;
font-size: 120px;
text-transform: uppercase;
}
<h1 class="header">Welcome</h1>
Also note that you did not copy the text-transform: uppercase rule, which I added here.
I'm trying to style some links such that they appear bold if not visited before, and appear as normal if they have been visited before.
HTML:
Facebook<br>
A Random StackOverflow Question
CSS:
a {
font-weight: bold;
text-decoration: none;
color: #373837;
font-size: 16px;
}
a:visited {
font-weight: normal;
}
a:hover {
text-decoration :underline;
}
Fiddle.
For some reason, whether or not the links were visited before, they appear bold.
I also tried modifying the CSS:
a {
text-decoration: none;
color: #373837;
font-size: 16px;
}
a:visited {
font-weight: normal;
}
a:link {
font-weight: bold;
}
a:hover {
text-decoration :underline;
}
Fiddle. It still doesn't work.
Any idea how to fix this?
(I am using Chrome btw)
The reason is that not all attributes are allowed for the :visited pseudo selector. See MDN.
You could use other attirubtes, such as color: green.
It seems like a browsers limitation.
It seems like a browsers limitation.
"For many years the CSS :visited selector has been a vector for querying a user’s history. It’s not particularly dangerous by itself, but when it’s combined with getComputedStyle() in JavaScript it means that someone can walk through your history and figure out where you’ve been. "
read about it here
It's not font-weight: normal that don't work it's your browser.
Because if you add font-weight: normal on the hover property it will work.
Look at this answer
On the left is Chrome and on the right is IE9.
As you can see with the image above, even with the Meyer CSS Reset there are yet inconsistencies between browsers. Two examples in this image:
IE9 clearly has a darker font for just about all text.
For whatever reason, the <hr/> tags aren't lining up (but they sure are close) and that throws off the rest of the content.
Is there something more I need to do, other than applying the Meyer CSS Reset to get some more consistency between these browsers?
Additionally, with the content you see above, other than colors and font sizes, there are no margins or padding applied after the reset.
CSS
h1 {
font-family: Lato;
font-size: 26px;
font-weight: normal;
color: #154995;
}
h2 {
font-family: Lato;
font-size: 24px;
font-weight: normal;
color: #333333;
}
h3 {
font-family: Lato;
font-size: 20px;
font-weight: normal;
color: #154995;
}
h4 {
font-family: Lato;
font-size: 18px;
font-weight: bold;
color: #333333;
}
h5 {
font-family: Lato;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.small-text {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: regular;
color: #333333;
}
The differences you point out are all based on the fact that two different fonts are being used in your chrome and IE9 outputs. Once you tweak the css font-family so both browsers use the same font then it should be ok.
UPDATE:
After seeing your css, you're specifying only Lato font for your elements, it seems both chrome and IE9 can't find the font Lato so both are applying a default font, which is different from one to another, try specifying fallback fonts like:
font-family: Lato, Arial, sans-serif;
If above still give you different outputs then Lato is being picked in one browser and not other, you can check that by using:
font-family: Arial, sans-serif;
for all your elements and see the output is the same on both browsers.
UPDATE 2:
Also see instructions on how to add a Lato webfont to your website:
http://www.google.com/webfonts#UsePlace:use/Collection:Lato
According to me font-family you are using is probably not a system font, it's a web font so what's the thing here is 1 browser is taking up the web font and other is not, so the default Times New Roman font is used
I have done a lot of looking into this problem on my own and I know that this is a common problem with a lot of people, but many usually find a solution to their problem, however I cannot.
I'm currently using this font: http://fonts.googleapis.com/css?family=Questrial
And It renders perfectly on Windows 7 Firefox, Chrome, and IE. However, on Safari, the font weight is overly bold.
See comparison below:
Now this example is a major problem for the h6 tag:
h6 {
font-size: 14px;
line-height: 24px;
font-weight: normal;
font-family: Questrial;
-webkit-font-smoothing: antialiased; //This does nothing to help
margin-bottom: 10px
}
So is there even a fix?
The introduction of #font-face in CSS3 allows web designers to use fonts that look the same across all browsers. That is what I thought until trying it out with the following code in jsFiddle:
HTML:
<div>
The_Quick_Brown<br>
Fox_Jumps_Over<br>
The_Lazy_Dog
</div>
CSS:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
div {
display: block;
width: 496px;
height: 86px;
font-size: 1.3em;
font-family: 'Open Sans';
font-style: normal;
margin: 0;
border: 0;
padding: 0;
background: cyan;
letter-spacing: 1.44em;
line-height: 1.44;
overflow: hidden;
}
This is the view from Firefox 12.0. Take note of the partially obscured 'o' in 'brown', the position of 'g' in 'dog' and the underscore '_' at the bottom edge.
This is the view from Google Chrome 19.0.
Despite explicitly setting letter-spacing and line-height for the same font, why are the results still different?
Your code is correct. The problem is your browser/ Each browser (browser rendering engine to be specific) renders contents in a different manner. You may not get the exact same output from each browser all the time. The features and all other blings might be the same but it is almost always a different story in terms of rendering a web page.
we don't have nothing much to do in this issue. Its totally depends on the browser's text rendering engine. Every single browser renders text differently.