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.
Related
My site is www.elansz.com. It looks good in Google Chrome but in Safari a lot of the elements are positioned to the right too far. How can I fix this issue? Thanks!
you need this on your site
https://necolas.github.io/normalize.css/
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
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.
Is it at all possible to assign css styles to only display in sepcific browsers? I know IE can be but Im meaning safari and google chrome? The problem is I have currently set some CSS styles to my site which looks great in firefox but seems to look totally ugly in safari and chrome and I'd really like to change that if possible
I agree that you probably should fix your CSS and HTML. Chrome and FF should render the same generally.
Make sure your HTML validates.
However, if you are in a pinch -- this script works great: http://rafael.adm.br/css_browser_selector/
Some CSS3 properties are with the prefix -moz, -webkit, -ms. Other than that it's only possible to detect the user browser version, type and then serve the different css sheet accordingly. Remember, a stylesheet does not necessarily have to have a .css extension, so you could write a PHP script that prints out different CSS for different browsers when included.
Wouldn't recommend it, though. You should simply fix your CSS, before relying on browser detection.
If you look on the right, http://forensicon.net/blog/ - the width for the sidebar names renders differently in IE9 and FF. I'm not sure why it fills all the way to the right in IE9 even when I explicitly give it a width. I'd like to understand what is causing this behavior so I can avoid it in the future.
The problem is you have a comment before the doctype. This puts IE into quirks mode and it won't attempt to perform like all the other far more modern browsers. Remove everything before the doctype.
Yes, this is an age-old problem. Different browsers have different defaults for things like header and list tags.
Use a CSS reset and explicitly style them the way you want.
There may be different CSS base styles defined by the browser that are causing it to render inconsistently. You might want to consider using a base reset CSS that resets all the styles to a common foundation across browsers, and then lay your custom CSS on top of it.
A very popular one out there is YUI Reset CSS
http://developer.yahoo.com/yui/3/cssreset/
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html