I am doing some final testing of my site before it goes live. I have built it in Chrome and I am finding all the things that done work in IE!
I have a sprite that I built that is not showing in IE...
HTML
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social plus1" alt="Join our Circles on Google+" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social facebook" alt="Like Primoris Financial on Facebook" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social linkedin" alt="Benjamin Irons on LinkedIn" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social blogger" alt="Primoris Financial on Blogger" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social twitter" alt="Follow Primoris Financial on Twitter" />
<img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social youtube" alt="Primoris Financial on YouTube" />
with the following CSS
.sprite {background:url(http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/Social-CSS-Sprite-Test.png);}
.social {height:32px;}
/* Social Buttons */
.plus1 {width:32px; background-position:0px 0px;}
.facebook {width:32px; background-position:-33px 0px;}
.linkedin {width:32px; background-position:-66px 0px;}
.blogger {width:32px; background-position:-99px 0px;}
.twitter {width:32px; background-position:-132px 0px;}
.youtube {width:32px; background-position:-165px 0px
;}
One of the main problems as far as I can see is that you are linking to the image in your CSS without using quotation/speech marks. And as dystroy said, don't hard link to the image, it's best to do it relatively like this:
{background:url('../wp-content/uploads/2012/06/Social-CSS-Sprite-Test.png');}
This should fix your problem.
Remove the src from your images (better use span than img).
Fix the URL in your css to be relative and not point to 127.0.0.1 (localhost).
Check that you have the correct HTML headers :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Related
I am setting up a Pop-up Window in a Wordpress 4.1 website located here:
http://ajourneyofepiphanies.com/dev/
You can see two options in the footer. The Get the Book link works correctly but the CSS is hardcoded inline and I can't change it for smaller screens by using a #media query.
Here the code I am using:
<div style="width: 48%; margin-right: 3.5%; float: left;">
<h3><span style="color: #fb6d03;"><strong>A practical guide to leadership virtually anyone can use.</strong></span></h3>
<span style="color: #000000;">A Journey of Epiphanies: Learning Leadership lays out the path –showing how our progress toward leadership affects us, the people around us, and our future. Then it applies these insights to help identify people that could become great leaders and helps them on their journey.</span>
<img class="alignnone wp-image-68 size-medium" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/a-journey-of-epiphanies-cover-207x300.png" alt="a-journey-of-epiphanies-cover" width="207" height="300" />
</div>
<div style="width: 48%; margin-right: 0; float: left;">
<img class="alignnone size-full wp-image-70" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/amazon.png" alt="amazon" width="227" height="46" /><a class="buy-book-btn" title="Buy it on Amazon.com">Buy the book! ►</a>
<img class="alignnone size-full wp-image-72" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/button-itunes.png" alt="button-itunes" width="227" height="84" /><a class="buy-book-btn" title="Buy it on iTunens">Buy the book! ►</a>
<img class="alignnone size-full wp-image-71" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/bnlogo.png" alt="bnlogo" width="227" height="63" /><a class="buy-book-btn" title="Buy it on Barnes & Noble.com">Buy the book! ►</a>
<img class="alignnone size-full wp-image-69" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/lulu.png" alt="lulu" width="227" height="80" /><a class="buy-book-btn" title="Buy it on Lulu.com">Buy the book! ►</a>
</div>
Basically I want to dynamically split the popup window in half by using CSS to apply a #media query to it but the CSS rules I set up don't seem to affect it.
You can see a live example in the "Download the First Chapter" link in the footer of the site.
Here is my HTML code using CSS classes:
<div class="one-half">
<h3><span style="color: #fb6d03;"><strong>A practical guide to leadership virtually anyone can use.</strong></span></h3>
<span style="color: #000000;">A Journey of Epiphanies: Learning Leadership lays out the path –showing how our progress toward leadership affects us, the people around us, and our future. Then it applies these insights to help identify people that could become great leaders and helps them on their journey.</span>
<img class="alignnone wp-image-68 size-medium" src="http://ajourneyofepiphanies.com/dev/wp-content/uploads/2015/03/a-journey-of-epiphanies-cover-207x300.png" alt="a-journey-of-epiphanies-cover" width="207" height="300" />
</div>
<div class="one-half last">
Form and Download link will go here but this needs to be the right hand column.
</div>
Here is the CSS code:
.one-half {width 48.5%; margin-right:3.5%; float:left;}
.last {margin:0 !important;}
#media all and (max-width: 400px) {
.one-half {width:100%;}
}
I have tried using plugins for responsive columns and more but nothing seems to affect the popup window.
Any suggestions? Does CSS not work in the popup window? I am using the Popup Maker plugin.
You could add an ID to the body element, then target that ID specifically ahead of the popu pop up in your CSS to apply to the contents of the popup. Then you would end up with something like this:
HTML
<body class="bunch of classes" id="body-wrap">
Other markup...
<div class="popmake" id="popmake"></div>
</body>
CSS
#body-wrap .popmake .one-half {
width 48.5%;
margin-right:3.5%;
float:left;
}
#body-wrap .popmake .last {
margin:0 !important;
}
#media all and (max-width: 400px) {
#body-wrap .popmake .one-half {
width:100%;
}
}
This was just a simple missing colon. I had
#body-wrap .popmake .one-half {
width 48.5%; }
and needed
#body-wrap .popmake .one-half {
width: 48.5%; }
The following image demonstrates what I'm trying to accomplish.
The A) it's on webbrowser of computer, which displays cool. The B) it's on mobile devices or small screens. I would like to make the images appear on mobile devices like the A).
I'm attempting this on Wordpress in the header.php. I've been searching and I've got this:
<a href="http://url">
<img src="http://urlIMAGE" width="100px" height="95px" style="max-width: 100%; height: auto;"/></a>
<a href="url" target="_blank">
<img src="http://urlIMAGE" width="100px" height="95px" style="max-width: auto; height: auto;"/></a>
But it's not working.
a img{width:100%; float:left;}
You could use some thing like:
float: left;
or
float: right;
inside your style attribute. See if that works.
Ok, I want to display some text next to my pricetables. This text has a background that must be repeated across the entire page, thus outside the container. Atm, the text is behind it's background (thus not visible), and the background gets cutted at the edge of the container.
How can I edit this code so that I can see my text, and that the background overflows the edge of the container?
This is how it looks like right now:
preview http://piclair.com/data/1t2ri.jpg
My CSS:
.overflow {
margin:0 -400px;/* now equals 1600px wide */
min-height:213px;
background: url('/images/pakkettenbg.png') repeat-x;
position:relative;
z-index: 0;
overflow: visible;
}
#onside {position: relative; z-index: 1; margin-top: 124px; color: #8C8C8B;}
#logopakketten {position: relative; z-index: 1; margin-left: 158px; margin-top: -332px; min-width: 782px; overflow: visible;}
#orderbuttons {position: relative; z-index: 1; float: left; margin-left: 158px;}
And my HTML:
<div class="overflow">
<div id="onside">
<p>Unieke logo ontwerpen:</p>
<p>Levertijd:</p>
<p>Revisies:</p>
<p>Briefpapier ontwerpen:</p>
<p>Enveloppe ontwerpen:</p>
<p>Visitekaartje ontwerpen:</p>
<p>Bestandsformaten:</p>
</div>
</div>
<div id="logopakketten">
<img src="/images/logopakketten/Prijskolom%20S.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20M.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20L.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
<div id="orderbuttons">
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernowlastcolumn.png" alt="" />
</div>
Why are you using positioning? That's a rhetorical question, you're not supposed to (use positioning). It's the jQuery of CSS, everyone uses it and it's the worst thing you can use.
If the child elements are floating than the parent needs to have overflow: auto; set. Also do not start relative URLs with a slash. You should get used to using the base element...
http://www.jabcreations.com/blog/streamlining-local-and-live-development-with-the-base-element
The main element with the repeating grey background-image should contain those vertical banners. You want text to the left of those banners? Then put text to the left of those banners.
You did not post enough to warrant a full working demo (reply with more info and I might be able to refine this for you) though this will get you moving and grooving in the right direction. Make sure you adjust the base element accordingly (it will be different for your local/live environments, use a scripting language like PHP to determine your domain (e.g. localhost or example.com) and then serve the correct value for the base element).
<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
if (stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
header('Content-Type: application/xhtml+xml');
}
else {header('Content-Type: text/html');}
}
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<base href="http://localhost/version-3.0/" />
<style type="text/css">
.overflow {overflow: auto;}
.left {float: left;}
.width_10 {width: 10%;}
.width_20 {width: 20%;}
.width_30 {width: 30%;}
</style>
</head>
<body>
<div class="overflow">
<div class="left">
<p>text here</p>
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20S.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20M.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20L.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
</div>
</body>
</html>
Save this as an .xhtml extension if you're not using scripting (e.g. PHP) (XHTML will not work in IE8 or lower but it's at 5% market share right now, at this stage of your understanding concentrate on competent browsers) and XHTML is great because it's strict the moment you encounter an error you'll know you need to fix it, unless you want to blow three days trying to figure out you're missing a quote on an attribute. Strict code means you'll get in to the groove of doing it right the first time once you're used to it and it'll save you immense amounts of time.
You could also probably stand to learn how to correctly utilize CSS level 1, not a joke, most people don't correctly use the float property and end up spamming tons of position properties all over the place turning a page in to suck.
http://www.jabcreations.com/web/css/nested-divisible-elements
Yeah, you'll eventually utilize position for certain main-level elements for sites with advanced layouts (hint: 99% of sites do NOT have advanced layouts) but without a good foundation everything laying on top of that will be even less sturdy to relay on.
I have an image of a logo which has a slogan underneath it. I want the logo as a hyperlink for the home page but I want it to be only clickable from the actual logo and not the slogan underneath it. But I cant manage to achieve this because the logo and slogan are part as one image.
Is there anyway around this other than having 2 separate images?
HTML:
<a href="http://www.dalewoods.com" id="logo_link">
<img src="images/logo.png" alt="Dale Woods" class="logo"/></a>
CSS:
img.logo {
margin-top: 20px;
}
You could use <map> and <area> to create an image map on the image. The area can then be used to link only parts of the image.
Here is a simple example that you could modify to fit your needs:
<map name="a">
<area shape="rect" coords="25,25,75,75" href="http://www.dalewoods.com">
</map>
<img src="images/logo.png" alt="Dale Woods" class="logo" usemap="#a" />
In this example, only the part of the logo covered by the rectangle area will be linked.
Yes, there is. :)
<div id="logo">
Dale Woods
</div>
And CSS:
#logo {
width:200px;height:200px;position:relative;
background:url(images/logo.png) no-repeat;overflow:hidden;
}
#logo_link {
display:block;position:absolute;top:0;left:0;
width:200px;height:150px;text-indent:-2000px;
}
The positions and dimensions have to be changed, but structurally this should solve your problem.
Here is an example: http://codepen.io/anon/pen/KEdrc
HTML:
<div class="logo">
<img src="image.png" alt="Logo">
</div>
CSS:
.logo {
display: inline-block;
position: relative;
}
a {
position: absolute;
left: 0; top: 0;
height: 50%; width: 100%;
}
img { display: block; }
I tried to explain here on how to do this.. Check the fiddle and you could get an idea of how to do that...
Example
<img src="example.gif" width="145" height="126" alt="Example" usemap="#Example">
<map name="Example">
<area shape="rect" coords="0,0,82,126" alt="Firsthalf" href="#">
</map>
Here think that the image and the first half is clickable and the second is not clickable. Try to do that as the same or provide your image in the fiddle..
Having a 286x176 pixels image, this is how I achieved it so that the left half is a link to Android and the right half links to Apple:
<map name="logos">
<area shape="rect" coords="0,0,143,176" href="http://www.android.com" title="Link to Android" alt="Link to Android">
<area shape="rect" coords="143,0,286,176" href="http://www.ios.com" title="Link to Apple" alt="Link to Apple">
</map>
<img src="myimage.png" usemap="#logos">
Shows in all browsers except IE. The image is a tranparent png.
music.thebc.co
Thanks for the help.
IE does not appreciate width:auto
Put a conditional if around the image to give IE 1 without the width
http://www.quirksmode.org/css/condcom.html
Just to be clear:
<!--[if IE]>
<img height="100" id="logo" alt="The Brilliantly Creative Company Logo" src="http://www.music.thebc.co/images/bcco_logo.png"/>
-->
<!--[if !IE]> -->
<img width="auto" height="100" id="logo" alt="The Brilliantly Creative Company Logo" src="http://www.music.thebc.co/images/bcco_logo.png"/>
<!-- <![endif]-->
Try using AlphaImageLoader as suggested here:
http://support.microsoft.com/kb/294714
<div style="position:absolute; left:140px; height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.png', sizingMethod='scale');" >
</div>
In IE9 it looks like the image is placed correctly, but it just needs a higher z-index; try this CSS:
#logo {
z-index: 10000;
}