I'm have a wordpress site where I have three buttons with position:fixed in the right side. The buttons show fine in FF and IE, but disappears behind the next section when I scroll in google chrome. I am pretty sure it is a stacking context problem, but can not make the button appear no matter which value I change. HTML and css below( the theme uses visual composer, if that is any help:)
.button_fixed{
position:fixed;
right:0;
top:35%;
z-index:99999999;
}
.button_fixed a{
border:3px solid #f37121;
border-radius:8px 0 0 8px;
background:rgba(0,0,0,0.4);
display:block;
border-right:0;
color:white;
margin-bottom:25px;
padding:10px;
font-family: 'Deftone Stylus';
font-size:35px;
width:150px;
position:relative;
}
span.oswald{
font-family: Oswald;
font-size:25px;
text-transform:uppercase;
displaY:inline-block;
padding-top:5px;
}
HTML:
<div class="button_fixed">
sell <br/><span class="oswald">equipment</span>
buy <br/><span class="oswald">equipment</span>
outsource <br/><span class="oswald">my sales</span>
</div>
site url: http://tinyurl.com/q9yangh
Thanks a lot for the help.
For #top add overflow: visible
Related
I'm trying to add a floating WhatsApp button to my website by using Kevin Castro's Pen here: https://codepen.io/demoonkevin/pen/MvPEpV
* WhatsApp Button */
.whatsApp{
position:fixed;
width:60px;
height:60px;
bottom:40px;
left:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.my-whatsApp{
margin-top:16px;
}
But when I use it on my website it taking my wordpress website global color which is yellow and I want it to be white even tho I add color:#FF it is still same as you can see in screenshot Here is the colour
Hi I have a few links in my html page and I want to set up a notification badge (using css) beside my links which I already did but I am not sure how to make the notification badges disappear once the user clicks the link.
CSS:
.badge1 {
position:relative;
}
.badge1[data-badge]:after {
content:attr(data-badge);
position:absolute;
top:-10px;
right:-10px;
font-size:.7em;
background:red;
color:white;
width:30px;height:18px;
text-align:center;
line-height:18px;
border-radius:50%;
box-shadow:0 0 1px #333;
}
HTML:
</span>Upcoming Job Bidding<br>
</span>7-11 Online Store<br>
EDIT: it doesn't work
I guess you can use this:
a:visited .badge1:after{
content: none;
}
I'm new to HTML/CSS and am in the process of learning it in hopes of transferring the knowledge to running an online newspaper that I am the editor of. Currently, I am working on my own website which has an image rollover on it. I have run into the issue where the rollover works perfectly, but I cannot move it left or right or up and down. For each new rollover I add, they will just stack one underneath the other all the way down the page. How do i solve this issue and be able to position the rollover around the page as if it were a normal picture. Below it the code. Thanks in advance.
if you notice any other discrepancies that i need to fix, I would gladly appreciate it.
the body
<div id="Chasity">
<img src="http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png"onmouseover="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/Chasitytitle2_zps8b7679b9.png'" onmouseout="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png'" />
and css
body {
{block:IfNotDarkLayout}
width:100%;
height:100%;
color: #333;
color: rgba(0,0,0,.9);
{/block:IfNotDarkLayout}
{block:IfDarkLayout}
color: #fcfcfc;
color: rgba(255,255,255,.9);
{/block:IfDarkLayout}
background: {color:Content Background};
font-family: "Century Schoolbook", Century, Georgia, serif;
text-shadow: 0 0 1px {color:Content Background};
}
.Chasity{
left:300px;
top:400px;
position:fixed;
padding-top:10px;
padding-right:50px;
{CustomCSS}
simply use the div:hover selector to change the image and then you can move it wherever you want, see my example here
html:
<a href="http://google.com">
<div class="box"></div>
</a>
css:
a{
display:block;
padding:0;
width:200px;
height:500px;
margin:auto;
}
.box{
background:url('http://placekitten.com/200/500');
display:block;
height: 100%;
width:100%;
margin:auto;
}
.box:hover{
background:url('http://placekitten.com/200/501');
}
http://jsfiddle.net/KLxUy/
I have this CSS. the property FILTER In class .crumb make my background and this works perfectly and Chrome, Firefox, safari, iPad, iPhone,Android... but for an unknown reason. It just doesnt work on ie9. I see the dark bordes with a radius, but the background is just completly square.
.left-crumb {
margin-left:15px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.crumb {
margin-top:20px;
margin-bottom:10px;
background-image:0 color-stop(0.3,#798aad), color-stop(0.51,#6276a0), color-stop(0.51,#556a97), color-stop(0.75,#566c98), to(#546993));
background:linear-gradient(top,#4c4c4c0%,#59595912%,#66666625%,#47474739%,#2c2c2c50%,#00000051%,#11111160%,#2b2b2b76%,#1c1c1c91%,#131313100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',endColorstr='#131313',GradientType=0);
font-weight:bolder;
border:solid 1px #54617D;
height:30px;
padding-left:10px;
padding-right:10px;
display:inline-block;
color:#FFF;
line-height:28px;
border-color:#484E59 #aaa #4C5C7A #54617D;
}
.right-crumb {
position:relative;
margin-right:10px;
padding-right:25px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomright:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
Here's a quick HTML so you can test.
<div id="adminPanel"><a class="left-crumb crumb right-crumb" href="admin.php">Admin panel</a></div>
adminPanel is just a div to contain all
Still IE9 doesn't supports yet, but you can use SVG to achieve this, please download the source code and check the demo here
http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/
I have a couple of buttons inside a div with a specific width, and I am facing a problem where the buttons are being rendered differently in firefox vs chrome and safari.
In firefox, the buttons are bigger and are messing up my layout.
<div id="sort_by">
<button id="sort_by_price" class="sortButton" value="1">Price</button>
<button id="sort_by_bedrooms" class="sortButton" value="1">Bedrooms</button>
<button id="compareButton" class="sortButton">Compare</button>
</div>
CSS:
button {
display:inline;
float:left;
background-color:orange;
border:1px solid orange;
border-radius:5px;
-moz-border-radius:5px;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
cursor:pointer;
padding:4px 10px 3px 7px;
}
#sort_by {
width:265px;
height:35px;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#c9c9c9;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
}
Rendered in firefox:
Rendered in Chrome:
It can be seen that the buttons in firefox are bigger. How can I fix this? Thanks.
Firefox adds an extra margin/padding to button elements that cannot be changed by standard CSS, you can however add the following to make it behave
button::-moz-focus-inner {
border: 0;
padding: 0;
}