I'm getting a really strange issue when using svg's on my site, see http://i.imgur.com/o4cCF8u.png. The svg that I want displayed is just the arrow icon, but the rest of the characters in the svg set (along with a box for some reason) are also showing up very tiny to the left. Check out the lists on http://camilleblock.com/critter/features/typography/
Has anyone else run into this issue, if so how did you fix it?
Related
I'm making a website on WP, and I'm using Visual Composer. No blog, just pages. For some reason any images I put on the page skew left. When I load the page, initially the image is in the right place. But then immediately as the page loads they are pushed left. Even if they're inside of a row, as seen here:
The image is inside the same row as the text, yet the text is correctly aligned, and the image is skewed. I put a border around the picture and you can see it even skews from the border.
I'm using the page inspector to try and figure out what in the stylesheet could be causing this, but I've already disabled/changed max-width. The margin-left for some reason says -150 and I can't change it, the inspector keeps saying that even though I've changed to 0 it both on the Stylesheet Editor and in Customize -> Additional CSS.
Any idea what could be causing this?
I have no idea why, but it turns out that the solution was to get rid of the Jetpack plugin. It was causing issues with images and sliders. Everything's back to normal.
There is a gray border showing around the dropdown image, as seen above. That shouldn't be there. I've seen several other questions which state that this is the case because the src of the image cannot be found or loaded. However, that's not the case here. The element contains a src tag which is set to a 16x16 blank GIF.
The file '/images/system/blank.gif' exists, and can be loaded by Safari. Also shows up fine in the Network panel, as 200 - OK.
However, and here is the reason of the bug I guess... In the elements panel the image shows up as:
I can load this image fine in Safari, opening it in a new tab shows as 16x16 GIF... No idea what's going on here.
Just FYI, this is Safari only. Chrome does not show the gray border around the image.
Note: Changing to a transparent PNG image solves the issue, but I'd like to know the underlying cause.
Tracked down the issue to... uBlock!
uBlock decided that an image in the form of /images/system/blank.gif?v=12345 was an ad and decided to cancel the request. The joy.
I'm trying to get a centered image that spans the entire page, with a small text box overlay. You can see my attempt at www.cloudtute.com.
Unfortunately this doesn't work in all browsers and the form elements look weird in some browsers. E.g. trying it in internet explorer 9 it comes up tiled and the text box is black!
I was trying to go for a similar effect to the image on www.airbnb.com which works in all browsers - can anyone tell me where I'm going wrong please?
From what you've explained it shouldnt be too difficult. However www.cloudtute.com isnt opening for me, it comes up with not found, so I cant see your code. If you can add your current code or get the website working again I can help out.
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
In my office everyone is using IE9. On most of the computers the CSS renders correctly. I have text floating to the left and right. On others, the text does not float or acts odd being positioned below other text. The resolution is the same along with the browser version. Ontop of this, the border color doesnt apply correctly too. On one its white, on the rest it has the grey I was expecting to see. Is there a security setting I'm missing that could stop most of the CSS from working and let the rest work?
Use CTRL-F5 to do a cache clear refresh. You might still be seeing some users previous downloads of reference files.