I am having some really random issues on two of my sites at the moment.
The two sites in question are http://djstephenjarmuz.co.uk/ and http://subduce.com/
I can only explain the issues as intermitent, and they seem to be CSS related. Like the sylesheet isn't loading.
THE SYMPTOMS
After a full refresh (no-Cache) CTLR+F5 job.
Menu bars are not visible until elements are inspected (http://djstephenjarmuz.co.uk/)
Some text is not visible. Present but transparent on content pages (http://subduce.com/)
Menu bars do not load the text on until hovered over, which seems to trigger the loading (http://subduce.com/)
Hopefully some bright spark will be able to show me where this is coming from.
and then others will be able to solve there own similar issues.
Thanks
Related
I recently started learning Tailwind CSS because based on some research about the job market, I felt like it would be a nice marketable skill for my area.
Anyway, I am currently making a website in which I am trying to restrict myself from writing any other CSS classes apart from the ones given to me by Tailwind (In order to familiarize myself with "Tailwind Solutions" to certain problems). However I am kind of running into a dead end with a specific "issue".
I have a couple of circle "buttons" (they are images to be precise, but they have an "onClick" action). Instead of letting the user stumble upon the existence of this button randomly, I wanted to add a hover effect to the button so that a shadow appears around the image when the pointer is hovered on top of the image.
I have only tried the straightforward hover: shadow-sm class but I kind of expected this not to work because this is labeled in the Tailwind Docs as a "box-shadow". However I couldn't find anything else that could be applied in my case.
Any help would be appreciated.
Thank you in advance.
I played around with positioning & created this shadow on hover.
Check out and keep me posted in the comments below.
I'm using angular-bootstrap-calendar and am having a difficult time getting horizontal scrolling to work properly. The plugin's demo page has the same issue I'm experiencing.
To reproduce the issue, visit the demo page, click the Day view, and add a bunch of events so that they stack in columns horizontally. Once the horizontal scrollbar appears, scroll to see the event containers cut off (notice the sudden loss of styling behind the newly created events).
Screenshot of issue in the demo:
And the issue gets worse when vertical scrolling is introduced:
I'm assuming that this has something to do with the way Bootstrap renders its columns, but I haven't been able to solve this issue yet. Does anyone know how to get around this problem?
Edit:
Here is a video of the issue
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've been tasked with an odd assignment.
We have a png image of a form that we're overlaying HTML form elements on top of. Since our users are on a variety of devices, I've had to design it so the form resizes to stay at 95% of browser width. Thus, all the form elements are positioned and sized using percentages (yes, I know this is ugly, but it works).
I've noticed what I'm perceiving as a bug and wondering if anybody else has encountered this: on Webkit browsers, on Mavericks only, and it's only sporadically, when the page loads, the fields appear blank. They have values (as can be demonstrated by firing a jQuery .val() command), but they're just not visible. Upon resizing the window or selecting a field, the value magically appears.
This is very confusing to me, and it's so odd that it's such an isolated variety of factors.
Anybody else able to duplicate, or has run into this, and any idea of how I can resolve this? I've actually been able to do a "hacky-fix" where, on page load, I do a resize of my main content div from 95% to 95.01%, and that redraw fixes everything, but I don't like such a hack.
We had the exact same issue and we've found that the root cause is a css transition we were using to show the page from alpha 0 to 100. So as soon as we removed that transition all the fields were shown correctly. I liked you hack BTW
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org