I've been scratching my head for the last 40 minutes trying to figure out why the logo on the below site is only working in Safari.
http://www.jaygeorge.co.uk/catalyst-jrshairdressing/
The logo should be in the top left. The site is a WordPress site and the code I've used to drag in the logo is here:
<img src="<?php bloginfo('template_directory') ?>/img/logo.png" alt="JR's Hairdressing" title="JR's Hairdressing" />
If you hover over the logo and copy the image link you'll see that the link is correct.
Looks like the image file itself is the issue. Try the normal bad-image troubleshooting stuff: Open and resave it. Make sure it's RGB. Try a gif instead, etc.
Hard to tell what's actually causing the error, but I've found in situations like this simply opening the image in Paint/Photoshop/Gimp, re-saving it and re-uploading usually fixes the problem.
Related
My problem: When visiting my website on mobile, the logo does not resize, and it cuts off.
I have tried: I have tried adding some CSS code that I found online, but it did not do the trick for me unfortunately, it must have been using the wrong css selectors, but I am not very familiar with CSS/Responsive themes.
Screenshot of problem
So i recently got this CSS style for Facebook which is acting really wierd.
It's using a fixed background image and whenever i scroll it's doing this:
Click
Wierd thing is: This occurs on every style with a fixed background, if i completely remove said background the site works like a charm.
Still, I have no idea if it's just faulty code that causes the problem or if it's the browser itself.
I'm not that good at CSS but if I knew where to search or what could cause the issue, I could probs fix it myself.
Sooo... If anyone wants to take a look at the code, here it is: Click
Thanks in advance to anyone who decides to put up with my shit, heh
edit: changed link to Dropbox temporarily
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 :(
Using image sprites, not a problem, being doing it for years. But I've just noticed that they have stopped working on chrome when using an "img" tag with a "src" referencing a 1x1px transparent gif (spacer).
I use this spacer/method so that I still have alt text available for screen readers, etc. Just using a div or span tag is not really an option, I need to use the image tag.
Example CSS for the sprite:
.rec_working_backpacker{background: url("../img/recommended/working-sprite.jpg") 0 0; width:100px; height:75px;}
Example implementation of the html:
<img class="rec_working_backpacker" alt="some alt text" src="<?php echo imagePath();?>d.gif"/>
I know this is all working fine (nothing wrong with paths, etc) as it's working on all other browser, but in Chrome nothing is being displayed, it's like it is seeing the 1x1px "d.gif" and using that as the image, but taking the width/height of the sprite from the CSS (using the chrome inspector). Also using the inspector in chrome I can see that it's got the sprite image, it's loaded, it's just being superseded by the 1x1px gif.
Sample live URL: goo.gl/1c9nIF
Top of the RHS column the "print" icon is missing
Just above the google map the "Other interesting pages - what will you look at next" box is full of empty images
Footer is meant to have 4 "follow us" round social icons
etc
Driving me nuts, I've got empty css sprite slots all over my live site... not what I wanted to see on a Saturday morning :-(
Anyone know anything about this? I've checked on three different computers, cleared caches, etc, seems like chrome is broken...
The problem seems to be your image. I'm not sure why, but when I replace your image src with https://pingviin.org/images/flags/blank.gif it works as expected. Maybe whatever you used to create the gif put some strange meta tags on it?
I've been stuck with a gap at the bottom of my footer: http://pactlegacy.com/site/overview.php
I really can't figure it out since it was just right, meeting the bottom of the window. I recently changed the pages to PHP but I don't see how that would effect anything.
I'm still kind of new to CSS so I got the Firefox Web Developer tool to help me troubleshoot. But that's not showing any padding or margins that would give me the gap at the bottom.
I'm really not sure what I'm missing here. Does anyone have an idea?
you have some whitespace characters before and after TOP
, removing them fixes the problem (I've checked it on Google Chrome dev tools)
EDIT:
to be more accurate, try to remove those lines from your code:
<!--////////////////// Load JS Files -->
<!-- JavaScript at the bottom for fast page loading -->
I was able to figure it out. My footer was in an include file which was editting in a different editor. It saved the file as UTF-8 format while the main file was saved as ANSI.
Saving them both as ANSI format removed the gap.