I'm having a problem in Google Chrome. I'm using a simple hover state on a display:block; link to change only the background:url(); property on the hover.
Google Chrome shows the actual hover change ok, but when I mouse out of the area, the background goes transparent/disappears.
Here's my CSS:
#branding #logo a {
width: 259px;
height: 201px;
border:none;
display: block;
background:url(images/logo.png) top left;
}
#branding #logo a:hover {
background:url(images/logo_hover.png) top left;
}
The actual site is here: http://beerblestudy.org. Again this is only happening for me in Chrome. Any thoughts?
It's working for me an all browsers. Try deleting your cache because it's working normally. I recomment you to delete the lines top left since they aren't necessary
Your background is disappearing in chrome here too.
I know I shouldn't "me too" on here, but this is odd and what brought me here was the same problem I'm having on a site I built recently: http://macvillain.com - the right hand column image blocks.
I tested thoroughly on most browsers (not ie6 or 7 - I've banished them) and has been fine in chrome for the past two weeks until today. Sometimes clearing cache etc works for a little while then it comes back. I don't get it...
UPDATE:
Hi I got an answer on the Google Chrome forum which said:
"Chrome uses strictly HTML5. Validate HTML code http://validator.w3.org/"
I had forgotten to do this and there were a couple of invalid things which I fixed and now all is fine and dandy.
I suggest you do the same.
Try this technique: I saw a JQuery plugin that automatically download images specified in CSS style sheets.
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
Related
I have an ennoying bug with CSS on my new site.
This is a random bug with chrome only. It appears usually at first visit and disappears with a refresh (F5) or a window resize. To make it reappearing, you have to refresh the page (sometimes up to 10 times).
When the bug appears, two links ("Blog" and "Qui suis-je") of the menubar are some pixels too low, and outside of the chrome's computer css boxes (in developpers tools).
(source: ksxav.net)
]
Here is a gif with and without bug :
After searching on google, I tried the following things :
Fixing Varnish for avoiding the 304 bug (bug described here)
I tried to copy all the content of CSS targeted with #import url(css url) into the main CSS file (described here)
Remove all my custom css
I was able to reproduce the bug on 4 differents computers (same Chrome version)
Same results. I also see the same thing on the theme's developper's website (here. Remember, sometimes you have to refresh / close and reopen the tab to view it).
Do someone has an idea? The theme's developper says he can't reproduce the bug, but as I said, I saw it on 4 different computers...
Thank you.
Here are informations :
Chrome 44.0.2403.89, no plugins at all
Wordpress up to date (4.2.3)
Theme up to date
This looks like a vertical alignment issue, but it's probably not. There are a couple things you can do here, though, to try to force the issue:
Drop floats
The a child elements within your li are floated. That's not necessary and I'd recommend removing them.
Fake it
There's no reason you have to rely on the actual document flow to display this where you want it. I'm going to warn you in advance, this one feels icky to write but works like a charm.
On your original a elements
Copy the text of the a to a span, and plop it right next to the other
Example
Mes chiennes
<span>Mes chiennes</span>
Set the following CSS rules:
#nav li {
position: relative;
}
#nav li span {
visibility: hidden;
}
#nav li a {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is a little bit of voodoo where we make the span reserve the actual space needed for the word, and then force the element to display perfectly centered within the tab. The transform bit just drags it so the center of the element is at the top and left coordinates you provide, so feel free to play with those to get them where you want them.
Hope that helps.
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
The setup
I have a series of overlapping CSS hexagons created using pseudo elements with borders. I have hover styles to change the colour of the shapes.
The issue
This hover style is causing problems when the transparent part of the shape overlaps text in other elements, causing a visible corner cut out in the text.
As the problem is difficult to explain with words alone, here is a screenshot highlighting the glitch.
The behaviour
I believe this to be a webkit only issue as it appears in Chrome but not Firefox. It may be of note that I am testing this on a Linux Mint system.
The issue occurs when you hover over the small github hexagon and remains when you exit the hex. The issue is resolved only when the large logo hexagon is hovered over. Strangely, if you hover from the logo hex to the github hex the issue only occurs when you exit the github hex.
I have put together a simplified fiddle to demonstrate the issue: http://jsfiddle.net/chicgeek/JRAn5/
The code
I am using SASS, compass, and custom mixins. I've included a snippet of the compiled styles for the offending hex. For a fuller excerpt, see the fiddle above.
.social.github {
top:1.96875em;
left:2.0625em;
display:inline-block;
text-align:center;
width:0;
line-height:0;
}
.social.github:before, .social.github:after {
position:absolute;
left:-1em;
width:1em;
border:0 solid transparent;
border-width:0.866em 0.5em;
content:'';
z-index:-1
}
.social.github:before {
border-bottom-color:#c3c3c3;
border-top:0;
bottom:0;
}
.social.github:after {
border-top-color:#c3c3c3;
border-bottom:0;
top:0;
}
.social.github:hover:before {
border-bottom-color:#675e5e;
}
.social.github:hover:after {
border-top-color:#675e5e;
}
Note: For the fiddle I am importing from Google Fonts, though for my project I have a custom icomoon font. The bug occurs with either source.
The solution..?
Have you encountered this issue before? Do you have a few minutes to play with the fiddle code above? Do you have any suggestions for tactics I could try?
I'm happy to provide more code if it's helpful in diagnosing this problem. Thanks in advance!
Updates
A friend suggested it might be an issue with the font engine. The clipping resolves when the .woff is disabled. [source]
The issue is evident on Chrome 33 (Linux, OSX), Safari (OSX) as well as Chrome 31 (Win7). The issue does not occur on Chrome 33 (Win7).
I asked some work colleagues about my issue. One of them suggested applying -webkit-backface-visibility: hidden; on the logo elements. Voodoo, it worked.
Here is the revised fiddle showing the fix:
http://jsfiddle.net/chicgeek/JRAn5/8/
Now the thing is, this shouldn't work as -webkit-backface-visibility is a property specifically for 3D transforms. Though I don't know the specific cause of the issue, I believe my problem to be a webkit-specific bug and it is just chance that this property solves it. If anyone has better understanding of either the reason for the bug or the reason that this solution works, please comment on this answer.
I am making a stupid site in the vein of sites on theuselessweb.com. (Warning: strange audio on pages for every link henceforth.) However, I am running into an issue: I have a vignette effect on the site that serves as a background, and in this jsFiddle, where I did all my work, it looks perfect. However, when I upload it to my webserver to test for real, it doesn't behave in either Chrome or Firefox: There is an unwanted space between the background color and the vignette effect on the top and left sides of the page. What is causing this? How can I get rid of it?
Edit: Since I received an answer, this has been resolved. As such, the link to my webserver above no longer has the issue.
Each browser defines some different margins or paddings to elements by default. In your case, there is a margin to the body-element.
Change this in your css and you are fine.
body {
width: 100%;
height: 100%;
background: #666666;
margin:0;
}
try checking your css for something like this:
*{
margin:0px;
padding:0px;
}
if the problem persist, probably is because some of your lower classes in CSS are overriding the style
I just finished my portfolio site, which is my first attempt with html5 and it looks great in Chrome. But when I tested it in IE and FF, exept IE9, there are some major differences that all occur in the header. I think this is because the header has a fixed position. I did this because of the menu. I created a one pager and if I didn't set the position on fixed, the menu disappeared when you clicked on a menu item.
A second error is that with IE all the images get a blue border, which doesn't appear on Chrome.
And a third error is the font in the header is also different with IE. I used an #font-face font for it.
My HTML and CSs code validates on W3C.
You can find the website at www.nathaliedehertogh.be
Can someone please help me out with this one.
All you need to do is add clear:both to #menu, and border:0 to img.
The blue outline is default in some browsers to show that the images are links.
You need a clear in your header to allow the content to flow as wanted after.
The blue border for IE simply needs a CSS setting:
img {
border: 0;
}
As for the font, some fonts don't read correctly in IE. The error I get is:
#font-face failed OpenType embedding permission check. Permission must be Installable.
You don't have a height defined in your div 'kopregel'.. this is causing an issue since you have elements with heights defined inside it.
NOTE: I see it all broken in FF, stuff is being smooshed to the right.
The problem with your header is you need the clear function in your css.
Here is the new and edited code.
#content, hr {
clear: left;
margin-left: auto;
margin-right: auto;
width: 80%;
}
No issue with fixed positions this is just a common issue, hope this helps let me know!
Another major Difference Chrome vs IE check this out
http://technofizzle.blogspot.in/2013/04/chrome-and-ie-display-image-completely.html