Disclaimer: I know that I should be using a sprite for my nav, I just couldn't get it to work with my images. Yes I know what I have now is a bad substitute. Please don't judge the current state of my site as it is in a very early stage and I am quite new to coding.
Please look at my code and tell me why
there is a white border around my header
the font is not showing up as it's supposed to.
Thank you so much!
Website: http://www.philecialabounty.com/KVS2/index.html
Roboto-Thin Font is supposed to look like: http://www.fontsquirrel.com/fonts/roboto
In regards to the border, your body is using the browser's default margin + padding for the body. Look into a CSS reset file. Or take a look at boilerplate or just assign body a margin/padding of 0.
In regards to the font not showing up properly, can you only use web-safe fonts in the font family declaritive for css. If you want to use better fonts look up Google fonts or cufon (which I usually use)
As #hendr1x suggests, the reason for the padding/margin is that every browser has it's own default stylesheet which it uses for some very basic base properties. If you were to check out the stylesheets used by various websites, you'd often bump into something named reset.css, which is just a simple stylesheet to ensure that basic styling is consistent across browsers, due to the issue above. Therefore, if you're only styling issue is the padding/margin on the body set by many browsers, just add:
body {
margin:0;
padding:0;
}
At the top of your stylesheet.css. Alternatively, you could Google for a reset.css file, which would also do the job and more.
It's a little unclear what you mean as to "the font is not showing up properly" - I'll take that to mean that it's rendering poorly (i.e. it looks uncrisp/jaggedy/poor). If you're a Windows Chrome user, then, like many, you've just bumped into how poor it's font rendering can be. Bearing in mind that Chrome's market share is so high, perhaps you should reconsider your choice of font, and find one that's Chrome friendly. As a Firefox user, I find few/no issues with font rendering in Gecko, but I do often find problems with Legacy IE and Chrome. Google Web-Fonts is a great resource for web-safe fonts, though even then I'd note that Chrome issues are still rife.
Also: Why do you have a <center> tag? It doesn't seem to be doing anything and it's not in the HTML5 spec - I'd advise you remove it.
Related
Ok off the bat I appreciate this is a weird one but just throwing it out there as I'm out of clues.
Almost got sign off from a client when they brought it to my attention the navigation on the site was messing up when resizing in the browser.
It only occurred to me after they sent me a screen shot what was happening, take a look:
My browser (Firefox v29)
His browser (Firefox v29)
For some reason he is seeing something rendering with font-varient:small-caps; which is not even set in my css. I've even tried setting font-varient: normal; just in case.
Has anyone else come across this? It's really bugging me out because I can't possibly recreate the problem in order to fix it.
Thanks
Ask your client to clear the browser's cache and history and reload the page with Ctrl + R key combination.
It seems to be an CSS style cache problem, the rule for the font in his case is
text-transform:capitalize and in your case is font-variant:normal.
Also make sure that your client do not use custom CSS style in Firefox, which overrides the page's one. Some browser plug-ins allow such custom CSS style overwrite, for better accessibility.
Maybe it's related to default browser settings - he might change it manually in Firefox settings or maybe some accessibillity software did it.
I've got a font for a website that I'm loading via #font-face. However, in Safari, it shows up at different weights on different pages, even though inspector shows all styles to be identical.
I've tried setting the font-weights (and anything else I can think of) explicitly, but nothing seems to affect it.
You can see for yourself the variation below:
Has anyone seen this before? or know how to fix it?
Try using -webkit-font-smoothing:antialiased;. This will force safari rendering method then safari will render the font using this method only, instead of automatically switching it.
I had this problem one time, when I implemented a CSS-only slideshow, and the site title rendered bolder when a specific image was shown.
Be aware of that some texts will look bad with this.
I have a few headings which use the Vollkorn google font. I noticed that only in Firefox and Chrome that with the default bold weight and normal font style, the actual text gets pushed beyond the bottom boundary of the element. When I switch it to italic, it goes back up to normal. This doesn't happen when the font has a normal weight.
I've made a very bare HTML file which shows this behavior but the problem only exists for me, I sent the file to someone else and it was just fine with those two browsers.
I have tried to reproduce this on jsFiddle with no luck.
http://jsfiddle.net/5WDJU/1/
a
Here is the code on Pastebin, I pasted jQuery into it for simplicity.
http://pastebin.com/yXzHqKrD
Here is a screenshot to show the issue on my computer.
I also tried to reproduce this by going to the google font website and toggling the styles with Firebug but it was working fine.
Am I missing certain styles that would correct this like on jsFiddle and on the font website? Even so I don't understand why it wouldn't occur on the computer of the person I sent the file to. Is this a potential pitfall of google fonts?
Maybe this is a lineheight or padding problem. Try "inspect element" in chrome or safari (right-click) and view which styles are active on the input form.
Did you try adding reset css? http://meyerweb.com/eric/tools/css/reset/
After some more searching, I have managed to find two instances of the same problem occurring to other people. I don't believe this is an issue with the CSS anymore but I'm not sure whether the issue is due to Google's actual font or how Firefox and Chrome decides to render this particular font.
Here are the two links.
http://code.google.com/p/googlefontdirectory/issues/detail?id=37
http://productforums.google.com/forum/#!topic/chrome/QofmpbyZ7sQ
My solution which was taken from the first link was to download the bold non-italic font from FontSquirrel and embed it into my site.
In chrome the font appears to be 1px smaller than FF and IE and I cannot see why. The font used is "Georgia" and there are no specific browser commands in the CSS or HTML so I cannot figure out why chrome is displaying it different.
Has anyone come across this before?
Thanks.
This could be based on various factors. Chrome and Firefox use different font rendering engines, and they also differ in how they interpret ClearType font settings within Windows. As well, different browsers apply different default CSS styles to unmarked documents which can cause discrepancies in font-size, among other things. You could try using something like a CSS Reset stylesheet to possibly quell some of the problems, http://www.cssreset.com/ but there's no guarantee that will fix it.
if you want to achieve the same style for every browser, you should try this:
sitewizard
it helped me a lot when i came across the issue. Maybe there is a more elegant solution for the problem but this works definetly.
Text will always differ somewhat between different browsers, and between different systems. Even the same browser on the same operating system may give different results, as there are text rendering settings in the system that may affect the apperance
Also, font sizes aren't really measured in pixels, but in points, so there might be a difference in how browsers translate pixel sizes to points.
I have a problem with headings in Firefox.
Website is at http://toto-bongo.heroku.com/blog
Firefox Screenshot
Chrome Screenshot
What can I do to fix this?
Your problem will be fixed if you simply define the sizes of the elements in your CSS. If you're worried about the size of all of your elements, your best bet is to use a reset stylesheet, which will really help you if you're worried about cross-browser compatibility. Using a reset stylesheet forces you to define specific atributes to each tag that you use, thus eliminating any ambiguity between browsers.
In my experience, the most likely cause of this is mismatched open and close tags, which the browsers interpret differently. Unless, of course, you are specifying styles for these tags.
Since there's no link we can look at, it seems unlikely you'll get a definitive answer here. But I would be surprised if FireFox really shows <H1> tags that small out of the box.
This could be caused by custom styles in your userContent.css file. This file is in your Firefox profile folder, in the chrome directory.