I'm relatively new to HTML and CSS so with a bit of luck there is an easy fix to my problem.
I have a few images for my site, 1 as a background image and 2 which are just sitting in the body. In safari everything displays flawlessly however in Chrome, Firefox and Opera only 1 of the images in the body displays.
I've tried searching for answers, the only suggestion that I can find is to disable ad-block which resulted in no-change.
I've also tried disabling the stylesheet but the problem still persists.
<div class="photocontainer" id="homepage"><h4 id="phototext">A Guide to Quality Web Development</h4></div>
<div class="Body">
<h2>We're here to <Span>help.</Span></h2>
<img id="plan" src="./images/plan.jpg" alt="plan">
<img id="flowchart" src="./images/flowchart.jpg" alt="flowchart"/>
The above code contains the 3 images. The second of which is the only one that works.
I should mention that the photocontainer div has a background-image specified by the stylesheet.
Option 1:
I suggest changing you src codes.
From src="./images/plan.jpg"
To src="plan.jpg"
Option 2:
Add width and height codes to your <img> tags.
Option 3:
Try removing the id from one of the <img> tags.
I hope one of these work. Try to mix them around. Like removing the id and adding the width and height too.
Found the problem!
The images themselves had trouble opening. Opened them in photoshop and then saved for web. Not it works.
Related
I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.
On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.
See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.
The specific lines of code regarding this issue can be found here (HTML) and here (CSS).
Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?
The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.
One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.
<figure class="image is-3by2" tabindex="0">
Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.
.image.is-3by2:focus .overlay {
display: none;
}
On one of our websites, we use a font from typotheque.com by importing it as follows:
#import url( "http://fonts.typotheque.com/WF-XXXXX-XXXXX.css" );
The font is displayed correctly on Chrome and the like. In Internet Explorer 11 on Windows 7, the font is rendered, but the width of it is not correct. It seems as if the width of the text is rendered before the font is applied.
As a consequence, the text gets overlapped and the words are not wrapping accurately:
On Chrome, the font width is calculated and the words are wrapped correctly:
Other things we tried:
We followed the instructions here on typotheque.com
We made sure to link the css files prior to the javascript files, as stated here.
Any hints or pushes in the right direction to solve this issue are much appreciated. You can find the website here: http://www.claireundgeorge.ch/fr/
Edit:
Added word-break: break-all; : no change
Removed all the font-awesome-stuff: no change
When you compare what is calculated in FireFox with what is calculated in IE you can see whats the bad boy here.
In IE the padding-bottom property of the h2 is 4px.
When i uncheck this property it looks fine for me.
I cannot upload pictures here due to the stupid reputation limit thing but i hope i descriped it good enough...
I also have typotheque webfont + IE problem. My workaround for now is a bit dirty: I use jquery $(window).load to adjust element padding by 1px, and then IE redraws the font correctly.
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image
I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?
<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;">
Thanks
The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.
I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?
A few thoughts:
You should really opt for a stylesheet instead of embedding styles right into your div.
Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.
.container {
height:900px;
margin-top:0px;
background:url(images/bg-stadiuminner.jpg) no-repeat;
}
<div class="container">
</div>
This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.
you also had a double ;; which may very well confuse IE.
Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.
Don't you need quotes around that url?
style="background-image:url('paper.gif');"
You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class