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.
Related
First, I've seen the duplicates
What is #shadow-root, and why does it put display none on my font awesome classes?
and
HTML / CSS - DIV Element hidden when it shouldn't be?
however both of these suggest the issue is with adblock and I have totally disabled adblock.
I am more concerned with where the #shadow-root is coming from, since I certainly did not put it there.
I have read that there is an option in chrome to disable it (and interestingly enough I have it disabled...), but this means that anyone using my website will need to do the same, and I'd rather just do away with it entirely as it provides zero usefulness in my application.
I have also googled and read many of articles about the shadow dom and none of them give any insight on why it would appear seemingly for no reason.
From what I have seen in inspector/view page source, the entire contents of my app are being rendered into this shadow dom and thereby not receiving any of my styles.
I am using rails, react, redux, react-redux, react-router
Chrome developer tool screen
Page Source screen
Notice that the source has nothing in the div that react should be rendering to.
Additional info:
displays unstyled page on chrome in normal and incognito
does not work at all in safari
A lot of chrome plugins automatically create this shadow root in your inspector. For example, ever since I downloaded Vimium, I've had a shadowroot div at the bottom of any page I've opened in chrome. It's nothing to worry about.
I was having the same issue and found that it was Adblock Plus that was adding #shadow-root. Thanks to the resources above I was able to assertain what the issue
For me it was also an Adblocker (uBlock) and it was actually hiding part of the webpage I was making which showed imported tweets. Turning the adblocker off for my site fixed 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 an element with the class .ui-menu .ui-menu that has the style of margin-left:25px;. I have removed this, so that it is margin-left: 0px;. However, when I refresh the page, it's still displaying this style, and the 'inspect element' window tells me that according to the css file it's reading .ui-menu .ui-menu still has a rule set for margin-left: 25px;.
I have tried using F5, Shift + F5, Shift + Ctrl + F5… I've manually cleared all cache, shut the computer down and restarted it. I'm about to uninstall Firefox completely and reinstall it to see if THAT even works. I've also tried renaming the CSS file, and re-linking to it with its new name… and then Firefox stops reading the CSS file entirely, because it's not updating the headers or footers to see that it's been changed so everything goes unstyled!
I don't have this issue in GC, Opera, Safari, not even in IE. Am I doing something wrong?
As to your questions:
I'm using Firefox instead of other browsers because I can't control what browser people who visit my site are using. As far as website design goes, this is a pretty basic understanding.
I've run the site through validation here: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fthesciencefacility.icyboards.net%2Findex.php&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
Most of the issues here are just cross-browser stuff, plus some embarrassing color issues. if you can find something here I can't, please mention it!
The site is not self-hosted. It's a forum service through IcyBoards, if you're at all familiar with it.
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.
http://pastorcarepbr.com/
I HTML validated it and it looks just the way I want it to in Firefox but in Chrome and Safari the #main div doesn't have the background color showing and the break tag with css set to clear both doesn't clear the way it does in Firefox.
I can't figure out what I did wrong considering it works fine in Firefox and it also HTML validates. Can anybody take a look at it?
Also, is this a coding error or a Web Host problem? I keep getting an old and new version of the Web page depending on if I do a simple refresh or a Ctrl+Shift+R refresh.
As mrtsherman and Nicole said, it was just the cache. Private browsing shows consistently.
you need a <div style='clear:both'></div> right before the #main closing tag. I shouldn't have anything to do with your browsers cache or web hosting.
I think it is probably a caching issue. The page seems to render fine to me. Here is quick tip. To take caching out of the picture, open up an incognito/private browsing instance. Then let us know what you see. I think this will resolve it. If this is the problem then you can version your CSS files by appending .css?version=1.1 for example. If you do this server side you can append a timestamp to do this automatically.
:)
To help out a bit more 1. You should provide the code you are working with. It is a major help in trying to figure out what is going wrong. And 2. the old and new version of the web site sounds to me like you need to clear your browser cache.