the css code posted below seems to work fine in internet explorer and google chrome but when in safari the a:hover effect seems to only apply when i right click the element or when I go into inspect elements and click hover from the options for that a tag in the right sidebar. I believe that this problem may be due to http headers as I can see no problem in the source code. The url in question is available here
and the css code in question is:
#swag a:hover {
color: black;
}
and the html is the following:
<p>Mouse over and click the link:
<div id="swag">
example.com
</div>
</p>
A full reboot of my macbook has solved my issue. The nature of the issue is still unknown to me.
Related
I'm new to web development and got this weird error message.
How shall I find "...an element..." as per error message? FF Dev tool doesn't show any flag as well.
"This element.." = <footer class="footer-grid"> right ?
Try adding this to your CSS - it will add a red border around every element so you can see what might be causing an issue.
* {border:1px solid red; }
I think that this might be a problem with firefox itself.
I'm using firefox + devtools and have an html document which shows a simple CSS grid.
When I expand the devtools panel up so that it hides part of the grid then the overflow badges start to appear against html elements which are now hidden by the devtools panel.
I'm running firefox 104.0(64 bit) on a Windows 10 PC.
I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.
On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.
See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.
The specific lines of code regarding this issue can be found here (HTML) and here (CSS).
Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?
The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.
One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.
<figure class="image is-3by2" tabindex="0">
Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.
.image.is-3by2:focus .overlay {
display: none;
}
I'm having some troubles using a link and an input element simultaneously, which is pretty odd!
CSS transitions are being fired upon load, even tho I'm using an hover effect and only if the input element is present on the site. All this is for Chrome, haven't tested this in other browsers.
Here is my code simplified to the issue at hand:
HTML:
<input type="text" placeholder="Test search" />
Test
CSS:
a {
background: #000;
transition: background 3s ease;
}
a:hover {
background: none;
}
Link to example: https://embed.plnkr.co/ri5FknRdbPDY7T2lNldS/ Try and refresh the live preview a couple of times to see the issue. (This will not work on JSFiddle or Codepen, simple because they use internal styles. To reproduce this problem the styling has to come from an external stylesheet which is why I created this on Plunker.)
If I inline the css code in style tags in the head, there is no problem. If I remove the input element, there is no problem either. And it seems only to be a problem on link elements.
What is going on here? :)
- Thanks!
This is a Chrome bug, and it has been reported.
A hacky way to fix this is to include a script tag somewhere on the site.
I'm having this sort of issue with the Twitter button on my webpage. In Firefox Developer Edition, the background of my webpage causes the button to render incorrectly.
example:
#container
{
background-color: #f0f1f4
}
causes the text within the button to render white.
Here's how it looks:
What's up with that?
EDIT
This is a bug in Firefox Developer Edition, and does not carry over to the official Firefox release. A bug report has already been filed: Firefox Bug #1112240
The text on Twitter button takes the color of your container, so it is #f0f1f4.
You need to specify in style sheet its own color:
a.twitter-share-button {
color: #333;
}
I hope it helps, please read more documentation there:
https://dev.twitter.com/web/overview/css
Whenever I inspect any element that's part of my navigation menu, OR inspect element and then browse to a navigation menu I get the 'Aw, Snap' error in Google Chrome. I figured there must be something wrong with the source but after reviewing the source in an editor it seems as though everything is correct in format.
What might be causing this error?
You can Click Here to view the site :)
Update:
Something in this code here is causing the error:
<li>
<a id="nav-corporate" class="accordionButton <?php if (is_page(1635) || is_page(1909)) { echo "curr-page-nav";}?>">Corporate</a>
<div class="sub-list-container">
<ul>
<li>
<span class="nav-hidden">Meetings</span>
</li>
<li>
<span class="nav-hidden">Events</span>
</li>
</ul>
</div>
</li>
I have tried on three computers by the way.
The problem appears to be an issue with your style.css file. In that file, you have:
/*::selection {
background: #666; /* Safari */
color: #FFF;
}
::-moz-selection {
background: #666; /* Firefox */
color: #FFF;
}*/
What's happening is you have a comment /* Safari */ within a broader comment around the entire snippet above, which is closing the broader comment prematurely and causing a parse error for the CSS. Google Chrome is choking on the malformed CSS file, which is causing the "Aw, snap!" error to occur when inspecting elements.
Removing the /* Safari */ comment won't fix that problem, as the /* Firefox */ below it causes the same issue.
EDIT: While that did fix a minor issue with the CSS, it wasn't the whole solution. In light of thakis' answer below, fixing the following style does prevent the crashing when inspecting elements:
#navigation-menu-container{
border-image: url(images/shadow-border.png) 10 stretch;
}
Compare this fiddle, which is a copy/paste of the site code in question (all head tags and relevant html markup), with the corrected fiddle, in which the style.css markup has been imported into the fiddle and the #navigation-menu-container rule has been changed to the above code, and you'll see that the fiddle page doesn't crash.
When chrome crashes, please file a bug at http://new.crbug.com so that the chrome developers can fix the problem. (I've filed http://crbug.com/141139 for this issue for you). Ideally, try making a copy of your site and keep removing things from the copy until you have a small test case that still reproduces the problem. Then attach that to the bug.
Edit: Looks like this bit from your style.css causes it:
#navigation-menu-container{
border-image: url(images/shadow-border.png) stretch 10;
}
border-image needs its numbers in front of stretch (see e.g. http://css-tricks.com/understanding-border-image/), and Chrome gets confused by that not being the case. Moving the 10 in front of stretch fixes the crash (but the crash is still a chrome bug of course).