Really getting some unwanted behaviour from IE7 and IE8 on header and fotter vertical menu. Did this before without problem but while using Wordpress it's just not getting it right.
Here is the test site: http://examples.iamwebsitedeveloper.com/walkinmyshoes/
And here is the code used for #headerNav:
#headerNav {
display:block;
float: left;
margin: 0 auto;
width: 940px;
position: relative;
z-index:99999;
font: Verdana, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #894ba6;
background: -moz-linear-gradient(top, #894ba6 0%, #743a8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#894ba6), color-stop(100%,#743a8f));
background: -webkit-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: -o-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: -ms-linear-gradient(top, #894ba6 0%,#743a8f 100%);
background: linear-gradient(top, #894ba6 0%,#743a8f 100%);
margin-bottom:20px;
behaviour:url(PIE.htc);
}
.ie7 #headerNav,.ie8 #headerNav{*display: block;*zoom:1;}
#headerNav ul{
font-size: 1.077em;
list-style:none;
margin:0;
padding:0px;
}
#headerNav li {
float: left;
position: relative;
border-right:1px solid #8B4DA7;
}
Moreover if you look at the footer segment the background color and block is not coming! Moreover the footer navigation is behaving the same way!
Using IE conditional classes as well as css3pie, I can't get it working properly.
Evan Vai,
Strange problem when i opening the debugger and closing it the css comes back. Its may be the execution of jQuery.
Related
Can anyone tell me what code to use to make a CSS button open into a new window? I see that the code to do this for a hyperlink on my site is: target="_blank". But, I can't figure out how to use this code in conjunction with a CSS button? The code for my CSS button is:
<p style="text-align: center;">
[button-link url="http://survey.constantcontact.com/survey/a07eaydg1tyi98r263b/a0114ieuk39a5/greeting"]
TAKE THE SURVEY HERE »
[/button-link]
</p>
Where would I insert the target="_blank" code in my CSS code to create the same "new window" effect that I'm able to create with a hyperlink?
Thank you, thank you!!!
Cassandra
You can not do what you are trying to achieve. You can only really practically make "buttons" with either HTML form input elements or HTML anchor elements. Moreover, the target=_blank declaration to open a link in a new window applies only to the HTML anchor element and will not work on other things pretending to be anchors.
What you should be doing:
<p class="paragraph">
<a href="http://survey.constantcontact.com/survey/a07eaydg1tyi98r263b/a0114ieuk39a5/greeting" target="_blank">
TAKE THE SURVEY HERE »</a>
</p>
Here the target=_blank has been inserted into the anchor element and this solves your problem entirely.
You can then also apply the css styling to the .paragraph definition and the styling for the anchor to the anchor sub-part as such:
CSS:
.paragraph{
text-align:center;
}
.paragraph a {
font-color:#dd0000;
display:inline-block;
border:1px solid #000;
}
try this.just copy,paste and run it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
a{
background-color: orange;
border:3px outset black;
border-radius: 5px;
text-decoration: none;
color: black;
font-size: 20px;
position: absolute;
}
a:focus{
background-color: white;
}
</style>
TAKE THE SURVEY HERE »
</body>
</html>
I have made you a good button here : DEMO
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
<a class="btn" href="http://survey.constantcontact.com/survey/a07eaydg1tyi98r263b/a0114ieuk39a5/greeting" target="_blank">
TAKE THE SURVEY HERE »</a>
I've got a div with border radius, background gradient, and background image working in FireFox, but not in IE8 or IE10. Gradient and background image work in IE8, but when I apply the border radius, the border disappears.
.add-to-carttest {
border: 1px solid #004f9e;
padding: 5px 5px 5px 50px;
width:100px;
height: 40px;
font-weight:bold;
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -webkit-gradient(linear, 0 0, 0 bottom, from(#e1f0ff), to(#73b9ff));
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -webkit-linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -ms-linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -o-linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, linear-gradient(#e1f0ff, #73b9ff);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url(../../Graphics/PIE/PIE.htc);
position:relative;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#e1f0ff", endColorstr="#73b9ff",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png");}
border-radius is not available in IE8
http://www.quirksmode.org/css/backgrounds-borders/
oops - just noticed your behavior entry...may want to double check your path
Ok here is what I've come up with:
CSS:
.common
{
width: 100px;
height: 40px;
border: 1px solid #004f9e;
padding: 5px 5px 5px 50px;
margin: 0px;
font-weight: bold;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
!behavior: url(../../Graphics/PIE/PIE.htc);
position: relative;
border-collapse:collapse;
}
.add-to-carttest
{
background-image: url('https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png');
background-position:20px 20px;
background-repeat:no-repeat;
background-attachment:fixed;
top:-6px;
left:-51px;
}
.gradient
{
background: -moz-linear-gradient(#e1f0ff, #73b9ff);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e1f0ff), to(#73b9ff));
background: -webkit-linear-gradient(#e1f0ff, #73b9ff);
background: -ms-linear-gradient(#e1f0ff, #73b9ff);
background: -o-linear-gradient(#e1f0ff, #73b9ff);
background: linear-gradient( #e1f0ff, #73b9ff);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0 );
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0 )";
}
HTML:
<div class="common gradient">
<div class="common add-to-carttest"></div>
</div>
It seems the gradient filter in IE8 overrides and hides or repositions the background image because it seems the gradient itself is rendered as an image. So I broke apart the css and nested the divs. Then repositioned the inner div to overlay the outer. That seems to work, not elegant, but compatible.
Also, positioning via "bottom left" syntax only seems to work in newer browsers so I positioned the background image by pixel position
Hope this helps
I wish do a rectangle in CSS with graceful degradation to work in IE8+. And work fine in Chrome, Firefox and Safari browsers.
Supposed HTML Tag:
<span class="tag tag-gray">FRETE GRÁTIS</span>
See sample:
http://imageshack.us/photo/my-images/850/roundcutcorner.png/
Thank's
Pure CSS Solution
Here's the jsFiddle example with comparison to original image and the CSS:
span.tag {
margin:4px 5px;
position:relative;
border-radius:5px;
background:red;
display:inline-block;
padding:.6em 4.5em;
text-align:center;
}
span.tag-gray {
background: #7c7d80; /* Old browsers */
background: -moz-linear-gradient(top, #7c7d80 0%, #7c7d80 50%, #66686b 51%, #66686b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c7d80), color-stop(50%,#7c7d80), color-stop(51%,#66686b), color-stop(100%,#66686b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* IE10+ */
background: linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7d80', endColorstr='#66686b',GradientType=0 ); /* IE6-9 */
color:#fff;
font-family:sans-serif;
font-size:.7em;
font-weight:bold;
}
span.tag:after {
/* right, height, and width should equal eachother */
right:-18px;
height:18px;
width:18px;
content:".";
display:block;
position:absolute;
top:0;
font-size:0;
overflow:hidden;
background:#fff;
-moz-transform-origin:0 0;
-moz-transform:rotate(-45deg) translate(-50%, -50%);
-webkit-transform-origin:0 0;
-webkit-transform:rotate(-45deg) translate(-50%, -50%);
transform-origin:0 0;
transform:rotate(-45deg) translate(-50%, -50%);
}
Assuming the HTML is:
<span class="tag tag-gray">FRETE GRÁTIS</span>
Gotchas
To get it to work with older (and other) browsers, you may want to add the prefixed versions of border-radius
To get it to work in non-webkit/moz browsers, simply add the corresponding prefixed versions of transform and transform-origin
The "cut" cannot be transparent, but you can make it appear to be by setting it to the same color(s) as the background
Due to using border-radius, you cannot set div.cut's overflow to hidden as the div's background will bleed through along the outer edge of the radius, so you have to make sure you have enough room outside of the element to avoid covering other elements/text. A workaround is to set the background to a gradient and have the outer edge be transparent (aka right side)
a funny but probably not the best solution is to cover your image with triangle div using position-absolute and z-index :). To round your corners you can use border-radius (but it will not work in IE8 unless you add js to support css3 properties)
Is this fiddle something similar to what you need?
Here is the code for it
`.tag.tag-gray {
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 300px;
-moz-border-radius: 5px;
-moz-border-radius-topright: 300px;
border-radius: 5px;
border-top-right-radius: 300px;
}`
Try this:
<div class="rounded">FRETE GRÁTIS<div class="tri"></div></div>
CSS:
.tri {
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-right:20px solid #ffffff;
position:absolute;
top:0px;
right:0px;
}
.rounded {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 6px 20px;
background: -moz-linear-gradient(
top,
#c0c0c0 0%,
#333333);
background: -webkit-gradient(
linear, left top, left bottom,
from(#c0c0c0),
to(#333333));
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 0px solid #000000;
width:120px;
position:relative;
}
And for IE8, I'd use CSS3 PIE
If you're okay with using one image, you could make a simple white triangle image with a transparent background (PNG 24), then do something like this:
.tag-grey {
background: grey url(triangle.png) no-repeat right top;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
It's not pure css, but it uses a standard CSS method. The upshot is that this will work in IE7 and up, just without the other rounded corners.
I'm having trouble with the show()/hide() function of jQueryUI. They basically deactivate my CSS for the duration of the animation.
jsFiddle link: http://jsfiddle.net/UBATE/1/
According to the API:
http://docs.jquery.com/UI/Effects/Drop,
I've built the following function:
updateTeamLists = function(args) {
// fade out -> rebuild the content -> fade in
$("#team1, #team2").hide("drop", {"direction": "right"}, 600, function() {
rebuildTeamLists(args);
$(this).show("drop", {"direction": "right"}, 600);
});
};
The child DOM nodes appear to lose all their CSS attributes in the beginning of the animation, i.e. they stop floating (or lose their inline-block display) and their backgrounds vanish instantly. However, the animation and the fading out of the text work fine.
HTML DOM structure:
<div id="teams">
<div id="team1">
<ul>
<li>Player 1</li>
<li>Player 2</li>
<li>Player 3</li>
<li>Player 4</li>
<li>0 Pts</li>
</ul>
</div>
<div id="team2">
<ul>
<li>Player 5</li>
<li>Player 6</li>
<li>Player 7</li>
<li>Player 8</li>
<li>0 Pts</li>
</ul>
</div>
</div>
CSS:
#content > #teams {
margin-top: 10px;
padding: 5px 5px 5px 22px;
width: 650px;
border: 2px solid #bfbfbf;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
#content > #teams > div {
margin-top: 5px;
display: block;
height: 28px;
}
#content > #teams > div:first-child {
opacity: 1.0;
}
#content > #teams > div:last-child {
opacity: 0.6;
}
#content > #teams > div > ul > li {
height: 25px;
width: 125px;
border-width: 1px;
border-style: solid;
margin-left: 5px;
display: inline-block;
}
#content > #teams > div > ul > li:first-child {
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#content > #teams > div > ul > li:last-child {
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
width: 50px !important;
}
#content > #teams > #team1 > ul > li {
background: rgb(229,130,130); /* Old browsers */
background: -moz-linear-gradient(top, rgb(229,130,130) 0%, rgb(216,43,43) 51%, rgb(232,153,153) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(229,130,130)), color-stop(51%,rgb(216,43,43)), color-stop(100%,rgb(232,153,153))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* IE10+ */
background: linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* W3C */
border-color: rgb(229,130,130);
text-align: center;
padding-top:3px;
}
#content > #teams > #team2 > ul > li {
background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
border-color: rgb(179,220,237);
text-align: center;
padding-top:3px;
}
Unfortunately I can't host the code online for a demo so I've posted up anything I got. I'm using Google Chrome 17.0.963.56 and Firefox 10.0.2.
I'm quite often having trouble with adding jQueryUI effects to my scripts, ending up not adding them. Though there might be some tricks/bugs preventing it from working (e.g. if your DOM node didn't have a class attribute, toggleClass animations wouldn't work).
Did I miss something? How would a workaround look like, would I have to iterate through all the child nodes?
Thanks in advance!
Harti
Jquery UI will add an extra div under the effected element. Example:
<div id="team1">
<ul>
...
<ul>
</div>
When the effect is applying, the structure will be:
<div id="team1">
<div class="jquery-ui something-else">
<ul>
...
</ul>
</div>
</div>
The solution is not to use the direct-child selector ">". See example here. You can compare it with your version :)
I've been trying to solve this for the past two hours and couldn't do it.
I have created a horizontal css navigation menu using an UL and 'display' as table and tested it locally on all browsers: IE7, IE8, IE9, FF 9.0.1, Chrome and it displays perfectly.
However, when putting the code on my server I get a vertical white space between the <LI> elements only in IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Document</title>
<style type="text/css">
* {margin:0;padding:0;}
#navigation {
border: 0px solid #000000;
padding: 0;
width: 560px;
position: relative;
height:100%;
display:table;
}
#navigation li {
display: table-cell;
*width: 16.5%;
max-width:115px;
vertical-align: middle;
word-wrap: break-word;
text-align:left;
background: #008dde; /* Old browsers */
background: -moz-linear-gradient(top, #30a9ff 0% , #008dde 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#30a9ff), color-stop(100%,#008dde)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #30a9ff 0%,#008dde 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #30a9ff 0%,#008dde 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #30a9ff 0%,#008dde 100%); /* IE10+ */
background: linear-gradient(top, #30a9ff 0%,#008dde 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30a9ff', endColorstr='#008dde',GradientType=0 ); /* IE6-9 */
*float: left;
list-style-type:none;
height:100%;
*border:0;
*height:50px;
position: relative;
}
#navigation li, {display:inline;zoom:1;vertical-align:middle;
display: inline-block;float: left;
}
#navigation li.middle
{
border-left:1px solid #52b4f9;
border-right:1px solid #005e9c;
}
#navigation li.first
{
border-right:1px solid #005e9c;
}
#navigation li.last
{
border-left:1px solid #52b4f9;
}
#navigation li a{
color: #FFFFFF;
display: block;
font-family: arial,verdana,sans-serif;
font-size: 11px;
font-weight: bold;
*padding-right:10px;
text-decoration: none;
height:100%;
}
#navigation a span
{
display: block;
padding: 5px 2px 5px 6px;
*padding-right:10px;
}
#navigation li:hover,#navigation li.selected
{
color:#fff;
background: #008dde; /* Old browsers */
background: -moz-linear-gradient(top, #818181 0% , #2d2d2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#818181), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #818181 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #818181 0%,#2d2d2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #818181 0%,#2d2d2d 100%); /* IE10+ */
background: linear-gradient(top, #818181 0%,#2d2d2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<ul id="navigation">
<li class="first"><span>Home</span></li>
<li class="middle"><span>Channel Programs</span></li>
<li class="middle"><span>Partner Contract</span></li>
<li class="selected"><span>Operational Information</span></li>
<li class="middle"><span>Product & Pricing Information</span></li>
<li class="last"><span>Channel Marketing</span></li>
</ul>
</body>
</html>`
Unfortunately I couldn't fix this with existing solutions like float or changing the 'display' type because I really need this kind of approach for my menu which needs to be able to expand in height as the content in it is dynamic and for multiple languages and also to be vertically centered.
Thank you very much for the help.
I'd say that it's because of the default inline-block behavior. The browser will render inline-block elements just like a text and any white-space in your html will display as a non-breaking space in your website.
More info here
I was unable to open the first link. In case you can't as well, here is another.
Even though, floats with inline-blocks and etc is just too messed up, and will just cause more trouble down the road. I think you should choose one and stick with it.
While trying some other things, i've solved the issue by putting border-spacing:0 .