Hi guys I am having some cross browser issues with my style sheets namely ie 8.
The css below works fine in my chrome/ff style sheet but it does not work at all for my ie stylesheet.
#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
a#threetwoBTN:hover {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG02.png');
}
In IE, below is as far as I can get.
#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
I can apply my background image and thats about it, the hover effect I want that works above does not work at all IE8. Below is the structure of my tags:
<div class="ContentBody">
<div class="LeftContentBody">
<br/>
<!-- another div but ignored for example! -->
<br />
<a id="threetwoBTN">Download 32-Bit</a>
<p>
* ...
</p>
The id set to each 'a' tag allows me target and style each anchor the way want it to look as each tag has different backgrounds and effects and etc. Can someone please help me explain this IE related issue?
UPDATE:
The text is indented off the page, so the user doesn't see the text between the anchor tags. This means the button is made up of a background image that's all. For clarity I have pasted in below the css I am using to style the anchor tag.
.LeftContentBody a {
font-size: 10px;
text-indent: -1500px;
width: 124px;
height: 62px;
border: 2px solid #000000;
margin-left: 32px;
margin-bottom: 32px;
float: left;
clear: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
You should add the attribute href to your tag , try with #, it should work with that, at least it does for me.
Hope it helps.
#threetwoBTN
{
background: #CCC;
}
#threetwoBTN:hover {
background: #AAA;
}
<div class="ContentBody">
<div class="LeftContentBody">
<br/>
<!-- another div but ignored for example! -->
<br />
Download 32-Bit
<p>* ...</p>
</div>
</div>
Is this an image positioned next to the text, or is it to replace the text?
If it is meant to replace the text, have you given this a width/height and display block?
Related
I have code that makes popups (I recommended to do this by an accessibility consultant) based on focus using only CSS and tag attributes. It works great until the focused element is too near the right side or bottom of the window, and then I need specific markup to flip the tooltip to the other side of (or above) the focused element.
I'd like to have generic CSS that "just works" without knowing the placement of the focused element ahead of time (this is for a responsive layout that reflows for different window sizes)
I know I can solve this with Javascript, and there is already a question talking about that (Display a div on mouse enter, cannot be seen if mouse position is in the right-most) but I'd really like to do it using only CSS.
Fiddle: https://jsfiddle.net/e6g39Lvb/
HTML:
<div id="wrapper">
<p>
<input type="text" /> Place cursor here and hit "tab" key to move focus
</p>
example link 1
<div class="rightside">
example link 2
<br />
<a class="corrected" href="#" title="this only works if I already know it's on the right edge of the screen">example link 3</a>
</div>
</div>
CSS
#wrapper{
margin: 1em;
}
.rightside{
text-align: right;
}
*:not(:hover):focus{
position:relative;
border: 1px solid red;
}
*[title]:not(:hover):focus:after { /* show tooltip on focus but user default for hover */
text-align: left;
border: 1px solid #fc0;
padding: 3px 6px;
color: black;
background: #fffea1;
content: attr(title) !important;
position: absolute;
width: auto;
min-width: 5em;
max-width: 15em;
transform: translate(0.5em,-30%);
}
.corrected[title]:not(:hover):focus:after {
transform: translate(-100%,-30%);
left: -0.5em;
}
Just to be clear: I know to achieve this with JS, I'm looking for a CSS only answer (if it's possible)
I have a set of css bullets that come along with the Orbit javascript slider by Zurb Foundation. The bullets have a float:left that is necessary so that they line up horizontally when new slides are introduced. Removing the float stacks them vertically....
I need to position the bullets "to the pixel" vertically on my page sadly, and I've had trouble with various browsers, having to use browser-specific css. I turned to jqueryUI to position my bullets based on the Div above it, but there are a couple issues.
The bullets need to be positioned in the center below the slider...and the slider fluidly resizes with the page. JqueryUI can position the bullets on page load, but on resize the positioning gets screwed up due to the float on the bullets...
Just wondering if anybody can think of a solution off the top of their head...I've been stumped for a while lol. Thanks for any help in advance!
I created a basic jsfiddle with 2 divs that should demonstrate the situation. http://jsfiddle.net/KRTYd/2/
<div id="slider">
<img src="http://www.hdwallpaperspot.com/wp-content/uploads/2013/02/nature-background-wallpaper.jpg" style="width:100%;"></img>
</div>
<div id="bullets"></div>
Specifically the html is this:
<ul data-orbit>
<li>
<img src="../img/demos/demo1.jpg" />
<div class="orbit-caption">...</div>
</li>
<li>
<img src="../img/demos/demo2.jpg" />
<div class="orbit-caption">...</div>
</li>
<li>
<img src="../img/demos/demo3.jpg" />
<div class="orbit-caption">...</div>
</li>
</ul>
and the bullet css looks like this:
.orbit-bullets {
overflow: hidden;
position: absolute;
}
.orbit-bullets li {
display: block;
width: 18px;
height: 18px;
background: #ffffff;
float: left;
margin-right: 6px;
border: solid 3px #666666;
-webkit-border-radius: 1000px;
border-radius: 1000px; }
And due to multiple slides indicated in the html, multiple css bullets are generated by javascript.
.orbit_bullets{
text-align:center;
list-style:none;
width:100%;
display:block;
}
.orbit_bullets li {
width: 18px;
height: 18px;
background: #ffffff;
display:inline-block;
margin-right: 6px;
border: solid 3px #666666;
-webkit-border-radius: 1000px;
border-radius: 1000px;
}
Looks familiar to me, i think i already answered this question.
Anyway, #bullet {margin:auto;} instead flotting will do it.
http://jsfiddle.net/yAgdT/
But i do not believe that will do it for the slider once you have many img to slide.
#bullets should become parents of bullets
http://jsfiddle.net/yAgdT/1/
These are supposition, since we have no idea what's gonna be sliding and what you wanna do with the bullets :) .
maybe something more usefull, on the way to become a slider maybe : http://jsfiddle.net/yAgdT/2/
Else, here's a slider i played with where i produce bullets with box-shadow. it runs without javascript. http://dabblet.com/gist/4323453 it's not an anser, but html structure might interest you . if you wish to relay on CSS selectors.
I am trying to apply a background-image into a div, it works but i am not able to put it correctly:
I have a space between the top of my div and the top of my background image, it has been reduce a lot by adding a background-position: 0; but it still have a space of many pixels.
I appy a background-repeat: x; (which is apparently the default state), but i have an important space between my images.
How could i solved these issues ?
Here is the html code using bootstrap:
<div class="row-fluid" id="header">
<div id="bar" class="row-fluid">
<div class="span12">
</div>
</div>
</div>
Here is the CSS code:
#bar > .span12{
position: relative;
border-top: 3px solid black;
border-bottom: 3px solid black;
margin-bottom: 10%;
height: 8%;
background-image:url('../img/ban.png');
background-repeat:repeat-x;
background-position:0;
}
Here is the result i get:
Thanks !
Did you tried with background-position:0 !important;? Maybe the property it's getting overwritten.
This image was kind of corrupted, i tried with another one just because i didn't see any solution and it worked, maybe transparant background, i don't know but it came from the image...
I'm trying to make a header's background color look like a rectangular speech bubble by adding a text element ◥. Below you can see the spanned text for the background shape and the style for ◥. But this creates a blank space between the bottom of the border and the ◥, and I would like the two to line up in order to look like a speech bubble.
Image of fail in action.
http://i.imgur.com/1T09F.png
{block:Link}
<h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞</a></span>
<div class="triangle">◥</div>
</h1>
{block:Description}{Description}{/block:Description}
{/block:Link}
.triangle{
margin-left: 10px;
font-size: 35px;
color: #123033;
}
span.Headers{
display: block;
background-color: #123033;
padding: 8px
}
I tried the trick with adding a parent group in which the font size is 0, and that didn't work. Nor did setting the margin on the header to 0. Putting the ◥ div on the same line hasn't done anything either. I spent about an hour looking through other questions to see what I could do, and I couldn't find a solution, but I am nub so forgive me if I missed something obvious.
It is unreliable to use text to create the effect. Different devices will render it differently, which is not what you want.
In your case, it would be best to use an image with the same colour, placing it in a <div/> below the heading, ensuring that they touch each other. Then, add some padding on the left, as you did with the .triangle style.
I have created an image for you to use: Grab it here
All in all, your markup would look like this:
HTML:
{block:Link}
<div class="header">
<h1><a href="{URL}" {Target}>{Name} ☞</a></h1>
<div class="triangle"></div>
</div>
{block:Description}{Description}{/block:Description}
{/block:Link}
CSS:
div.header > h1 {
background-color: #123033;
padding: 8px
}
div.header > div.triangle {
background: url('Arrow.png') top left no-repeat;
height: 50px;
padding-left: 10px
}
Do let me know if this works for you.
If you're able to use generated content (which, I suppose, depends on your site's users), then I'd suggest (with the slightly amended HTML for demo purposes):
<h1><span class="Headers">a name</span></h1>
The following CSS:
h1 {
display: block;
position: relative;
background-color: #ffa;
padding: 0.5em;
}
h1::after {
content: '';
border: 1em solid #ffa;
position: absolute;
top: 100%;
left: 2em;
border-bottom-color: transparent;
border-left-color: transparent;
}
JS Fiddle demo.
In terms of compatibility caniuse suggests that generated content is supported in IE from version 8 onwards.
References:
CSS generated content compatibility, from caniuse.com.
I have a problem with simple Images in DIV containers in IE7.
I have it a few times on my homepage, here is an example:
<div id="divSearchBottomLinks" class="divSearchBottomLinks">
Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
<div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect">
<img src="Images/Design/DefaultPage/searchButtonEffect.png" alt=""
style="border: 1px red solid;" />
</div>
</div>
CSS is:
.divSearchButtomLinksEffect
{
float:right;
padding-right:8px;
}
.divSearchBottomLinks
{
border: 1px solid red;
width: 99%;
height: 15px;
text-align: left;
font-size: 10px;
word-spacing: 8px;
color: Gray;
}
Here is how it looks like:
http://s3.imgimg.de/uploads/2204cc79eJPG.jpg
As you can see: No reason, why the image should be more in Bottom then the other, you see left FF4 (same in IE8/IE9/Opera9/Opera10) and right only IE7 who seems to have a problem with this.
I can't see how to fix it, I can only see from where it somes... any ideas?
For some reason the element floating to the right will float beneath the text on the line in IE7, The text takes up the full width of the container, just as a div elements does by default, and pushes the floating element down.
Put the text before the image in a div element also, and float that to the left, that way the element floating to the right will not be pushed down.
Browsers have different default CSS for various HTML elements. The first thing I would do is add a good reset so that all elements start out with the same basic settings. This will take some of the guess work out of the debugging process. Add this BEFORE the rest of your CSS -
http://meyerweb.com/eric/tools/css/reset/
Next, you should always specify the width in a floated container. IE in particular has issues if you don't specify widths properly.
I would try go with something like this instead:
<div id="bottomLinks">
<p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
</p>
<img src=".." />
</div>
<style>
div#bottomLinks {
overflow: hidden;
}
div#bottomLinks p {
float: left;
}
div#bottomLinks img {
float: right;
}
</style>
You're problem right now is probably because of the width of 99% and that the first element doesn't float.