I'm working on a blog using Nuxt 3, Nuxt-content, and Tailwind-css. I just set the background color in my app.vue and noticed there's a 12-pixel white bar above my content. The weird thing is, looking in Chrome dev tools, the entire <body> element is shifted down by 12 pixels! The <html> element starts at y=0, and I've never seen anything like that.
I don't think I've got any strange :before CSS but since I'm using tailwindcss, it could be anywhere.
It's a whole app, so I can't paste it here, but I made a Stackblitz so you can see it:
https://stackblitz.com/edit/node-zgbqga?file=README.md
(It should do yarn install && yarn dev when you load it up.)
Can anyone help point me in the right direction?
Related
I'm building a MEAN app and want to quickly use some icons. I settled with linearicons (https://linearicons.com/free). For a quick set up, you just copy a cdn into your HTML head and then drop the desired SVG tag wherever you want. On Codepen it works without any issue, but it isn't working on localhost. I suspect it has something to do with Angular.
When I inspect the code with chrome I can see that the SVG is being added. I can even hover over the spot and see it highlight, but the actual lines aren't shown. I checked in other browsers and the same issue remains.
Edit 1: I just wrote a simple app with node and express and I had no trouble dropping in the SVGs. So it appears that Angular is blocking the SVG.
Edit 2: http://codepen.io/Perxis/pen/wazLXe
Edit 3: Out of nowhere they're working. I am fairly certain I changed nothing, but now they work. ¯_(ツ)_/¯
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'm trying your standard 3d card flip. However, the background of the backside the "card" is not showing up until I open up developer tools or flip the card again. Here's the Codepen I have for it.
http://codepen.io/Spidy88/pen/HsFjC
I've looked at this simple example and for the most part my code is identical. I tried changing the front face and back face to be absolute sizes but the issue is still occuring.
http://desandro.github.io/3dtransforms/docs/card-flip.html
After a couple hours of playing around, all it took was adding an empty to the div. I should also note that this issue was found and tested only on Google Chrome 33.0.1750.154. Not sure about previous or future versions.
I have a strange behaviour in screen layout, I do not understand the possible cause:(
I have a vertical grey line on the left and the right of the screen,
See screenshot here:
BTW, I developed using Rails 3 and using Twitter Bootstrap 2.3.2
In facts I do not foresee / I do not want these lines ... I presume it could be some CSS setting (on my one customization css code...), sorry for my ignorance there,
watching the shot here do suggest you something about why the grey vertical line on the left marging and the right margin of the screen layout ?
thanks a lot
giorgio
scss customization file used: http://solyaris4.altervista.org/custom.css.scss
Without looking at any CSS and HTML code it is pretty difficult to tell.
But since it looks like you are using the Google Chrome browser, hover over the grey stripe with your mouse, right-click and select Inspect Element. You can then review the html and css code related to what you are looking at. You can also open the Chrome dev console at any time by hitting the CTRL-SHIFT-i keys.
I have recently launched a site built on word press using a heavily edited child theme of the twenty ten theme, the problem is when viewed in google chrome or safari a small portion of the left hand border on the sidebar sat on the left is displaying the wrong colour. Its not a big issue and it goes away when you scroll to the bottom of the page, its more annoying than anything just wondering if any one else had encountered this.
I am using different colour borders to get the pressed in effect if this matters.
The site is located at www.paintedroom.co.uk
I have found what is causing this bug it is the border-radius property. when removed the bug goes away still not sure how to fix though.