I don't even know where to start.
On one page of my project, when you enter the page for the first time, some parts of the site disappear and some don't get styled (e.g. border-radius doesn't work).
First off, some parts of the header shows up again when you hover over links, or select some text (that is actually invisible before selecting). Everything looks as it should when you refresh the page.
Before I found out that hovering or selecting fixes some parts, I thought that styles don't get applied or something like that. I've even tried to remove all the #imports and check if that works.
This happens only in Safari, styles get applied to proper elements but those are not rendered properly and are not visible.
I don't even know which parts of my code should I post here since it's just basic CSS and it works perfectly everywhere except Safari.
Any ideas?
#edit:
Here's an example of an issue (link your profile is shown, cause I hovered over it)
And when you select some parts of the invisible text and than deselect, it shows up:
This is Bootstrap based site, and here's the code for this alert:
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>You are not connected to Stripe yet.</strong>
<p>Other people will not be able to find or participate in your experiences until you connect to Stripe. Go to your profile to connect to Stripe now.</p>
</div>
Regarding the styles, it's basically just some padding and, obviously orange gradient. On the screenshot, you can see the border radius but sometimes it's not there.
An advice by a friend of mine: put empty style tag in your document worked! Just placed line <style></style> in the header and everything works.
Check out safari developer tools : https://developer.apple.com/technologies/safari/developer-tools.html
Posting screenshots of individual problems along with html snippets would help us narrow down the issues.
Related
I am playing with CSS and found one bug which appears in Chrome(Version 104.0.5112.81). In Firefox(103.0) code works well. I have prepared test application https://codesandbox.io/s/card-click-ru5gbu. In the test app you may see, that "FRONT btn" does not react on user actions. The card behaves like there is no a button. I am interesting, is there possible solution for such bug?
Disclaimer, I am not entirely sure why they behave differently in different browser, but I did get down to what I think is the problem, and here are my findings.
The issue is the way you position your doms, I can see you are using position absolute, although you are transforming the position, and hiding the backface (I am guessing different browsers deal with this property in a different ways, which is why the behavior is different), but that doesn't mean the dom doesn't exist, basically every click you think you are clicking on the front button is actually a click on face back div, hence the flip. If I was to fix this, I would add pointer-events none to the back div when it is flipped, just to ensure that events are behaving as you would expect.
so here
the html
<div class="face back" [class.flipped]="flippedState === 'flipped'"(click)="cardClicked(); $event.stopPropagation();">
the css
.flipped{
pointer-events: none;
}
I am trying to replicate my Fiddle I have here on the website I am working on, but seems with the WidgetKit for Joomla the coding or CSS is effecting it. Fiddle is here: [http://jsfiddle.net/vZNj7/44/]
<div class="brand-wrap-bg">
<div class="image-cropper-brand" style="background-image: url('http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/images/untitled-1_03.jpg');"> </div>
<div class="brand-text">This is where the overview text is going to be</div>
</div>
This is my template so far: http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/index.php/k2-users/k2-extra-fields/k2-extra-field-groups/k2-media-manager/k2-information/brand-story
You wont be able to see the DIV, but its under the top menu DIV at the moment (purposely as I want the background under the header)).
I also want to make it so that the browser window will crop the bottom if the window is resized or for people who have different window sizes.
I have been trying to work out why I cannot get it to work. Close to 5am and nesrly given up :(. Thanks a lot for any help.
I have worked it out after getting onto a Win8.1 machine and using the devtools on IE11 since the previous versions are such a piece of crap and next to not usable.
I was using the 'initial' for position but seems that IE does not like 'initial' and doesnt recognise it? So I used 'Static' instead and seems to get it to work.
The reason I needed to revert back to it as Widgetkit was using inline styles that couldnt be removed (well they probably could but I couldnt see it in the template) so the inline styles needed to be basically reverted back to a default value.
Hopefully this helps someone even though no one helped me :(
I am currently working on a online resume website, and I am experiencing an odd issue with meteor.
CSS styling for certain elements on the page will work, and not work at the same time. What I mean is say you load the site and land on skillset you will see a white background behind the text and grey words. Now if you navigate to another page and come back all you will see are the stars and H2 tags the background has become transparent. However if you open your Developer console the background will magically come back.
Now example 2, with the Developer console already open repeat the process above. Open Skillset, navigate away, and go back to skillset. Now you will see the CSS styling is there, mess with the background for the class '.skillset' and you will see that the background is back. Isnt this odd?
My site is http://patrickml.com/
For some reason I needed to add "position: relative" to my main container. I do not understand why, but it did fix my issue.
I have a bit of a IE8 problem (sound familiar?)
I have a button. when you hover over the button the hover state produces a larger box that has html inside. in this particular case, it's a small music player.
so it goes like this, when you hover over the button it produces a small music player with clickable links and some text. you can move your mouse anywhere inside this box, but as soon as you leave the box/music player, the hover state goes away again.
sorry but I don't know how else to explain it.
this all works a treat except for IE8.
in IE8, the hover state disappears as soon as the mouse leaves the original small button. so navigating around the music player becomes impossible.
now I have noticed that when there is no html in the hover box, it works fine, but when there is html (in this case an iframe) it loses the hover as soon as I touch any html inside the hovering box. so it looks like the problem is not the hover box, but the code inside the box that makes it lose focus
what I would like to know is, is this a known issue in IE8, or could it just be bad coding from my side. in which case i can post the css.
I've had problems with :HOVER states in IE8 too and I noticed that the same CSS (even pointing to the same external CSS file) worked on some pages but not others. The solution for me was to consistently add a DOCTYPE to the top of all pages (above the starting HTML tag).
It seems obvious now, but sometimes (especially when editing old sites) the DOCTYPE is not always specified.
I hope this helps!
Your problem doesn't seem to lie in hover itself. Firstly you assume some window height and your project just look weird if the height is different. Assuming you did some very exact calculations on such assumptions your problem is probably the box model problem. box-sizing:border-box might help, but you would have to recalculate everything.
Also you can use timeout before the elements gets hidden/drop down so that micro mouse movements don't shake elements and maybe allow to "catch" them.
Having both things in mind all hovering problems should be fixable.
EDIT: For iframe hover have a look at: Iframe hover not working in IE (all versions).
I am fairly proficient in CSS but now I am running into a very strange rendering issue in Google Chrome 9. I am trying to create some fancy looking link buttons (basically heavily styled anchors). Here is some example markup:
<a href="" class="button">
<figure class="sprite icon icon_back"></figure>
Link button with icon</a>
This markup may look a litte strange to you, there's a few things you should know:
I am using HTML5's figure class to include an icon as part of the button. I have the proper reset CSS applied and Chrome can render this tag for sure.
Instead of actually pointing to an image I am applying CSS classes to the figure element. Within the CSS I am using the spriting technique to show the correct portion of a single large sprite image.
All of this is working fine in Firefox, and actually also in Chrome. The correct rendering can be seen in the following image:
It renders like that in both Firefox and Chrome. Here comes the problem, if I place such a button within paragraph tags > <p></p> this is what happens in Chrome only:
Notice how the button is ripped apart? Only in Chrome and only when placed inside a paragraph. It gets even stranger: this only happens for the first button inside the paragraph, if I would place three buttons inside a paragraph, only the 1st one is screwed up.
Your first question would probably be about the CSS. It is rather verbose so hereby a temporary link to the page in question:
Edit: link to live page removed, was only temporary for problem inspection.
I believe that Chrome is automatically closing your <p> tag, because of the way chrome interprets the <figure> tag. If you look at the definition of the figure tag, you'll see it's supposed to be outside the flow of the content, and thus should not be contained within a paragraph. Try using a different item than figure, and I bet it will work.
You can read more about flow content here
As of Chrome 10, your site may be even more messed up.
In Chrome 9 (and Firefox 3.6 and Opera 11), <figure> has no margin.
In Chrome 10, it has margin:1em 40px;
In Firefox 4 RC1, the margin looks similar, but I'm not sure if it's the same - Firebug Lite doesn't list the margin.