i have a div element that is appearing fine in Chrome but Firefox for some reason has decided to put a border around it. let me share the CSS here:
#cpanel {
width: 320px;
height: 75px;
position: absolute;
//left: 28%;
//top: 32%;
z-index: 9996;
//visibility: hidden;
display:none;
}
.box {
z-index:9997;
//border: 1px solid #000;
width: 75px;
height: 75px;
float:left;
margin-left: 2px;;
/*display: block;*/
background-color: #000;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.box .text{
width: 75px;
text-align: center;
color: white;
position: absolute;
//top: 40%;
z-index: 9998;
}
#cpanel.on {
visibility: visible;
}
the cpanel is the outermost div. the .box divs are small boxes inside the cpanel div. and these boxes somehow have 1px white borders that arent present in chrome. i want to remove those borders. thanks.
Use FireBug plugin to view the CSS and see where the border is coming from.
Probably you have bloated CSS file and you have lost in it :) Simplest solution is just to add border:none to .box class. Finding your bad border source of course could help, but it could be needed somewhere else and could not be removed.
I suggest also to do simple ctrl+f in css file for 'solid white'.
Related
Is there some way I can get the box not show the pink? That is have all the area within the box show the blue of the body? Ideally the solution not being something where I make four pink divs around the box but using the divs I already have. Maybe some tricky using z-index? Also I need it to show the actual body background. Changing the background color of the box to blue won't work. Thanks.
body {
background-color: azure;
}
#pink {
position: absolute;
width: 95%;
height: 100px;
background-color: pink;
z-index: -1;
}
#box {
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: none;
z-index: 1;
}
<div id='pink'></div>
<div id='box'></div>
As mentioned above, the only way to somehow achieve this is by giving it background-color: inherit.
The property z-index will never place anything behind the <body /> tag because it is above it's hierarchy in the DOM.
You want it to be see through whenever the box is placed over the pink right?
You can use background-color:inherit property since it will be inherited from the father element which has the azure background.
#box {
position: absolute;
width: 100px;
height: 100px;
left: 45%;
border: 1px dotted black;
background-color: inherit;
}
In my application I have a section header with a caption and a horizontal line. The horizontal line is a background image (which contains the line, the rest of the image is transparent) of the parent container. The caption is defined by a child element.
<div class="header">
<span>Identifier</span>
</div>
What I am trying to achieve - with CSS styling - is that the child element is displayed with the same background color as the parent, but the background image of the parent container should not be displayed underneath the caption.
.header {
background-image: url("bg_image.png");
background-color: #fff;
position: relative;
height: 25px;
}
.header > span {
position: absolute;
background-color: #fff;
padding: 0px 10px;
}
This works perfectly if I set the background color of the child element explicitly. But the background color can be configured by the user, so I don't want to set it explicitly.
So my the question is, is this possible at all using only CSS styling?
This fiddle shows the problem (I used a gradient to simulate the background image).
EDIT: An important requirement is that the solution must work across browsers (including IE8).
If you're okay with a centered headline, try the css that i used in one of my projects:
h1 {
position: relative;
white-space: nowrap;
text-align: center;
padding: .2em 0;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 2px;
vertical-align: middle;
background: #000;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
You can see the result here: http://codepen.io/DerZyklop/pen/AouDn
It is pure CSS. It adds two lines by using the css-pseudo-elements :before and :after.
With some modifications it should also work well with a left-aligned headline like in your example.
And another important thing to note here is the white-space: nowrap;. So this will only work with one line, but not with multiple lines.
can you please checkout
http://jsfiddle.net/dYr29/3/
i have update your fiddle
<div class="header">
<span>Identifier</span>
</div>
css
.header {
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background-color: #fff;
position: relative;
width: 300px;
height: 1px;
top: 10px;
}
.header > span {
position: absolute;
padding: 0px 10px;
top: -10px;
left: 10px;
background:#fff;
}
I finally identified how to solve the problem.
.header > span {
position: absolute;
background-color: inherit;
padding: 0px 10px;
}
Using background-color: inherit will solve the problem.
I also updated the fiddle.
I want to make the download button (#bluebutton) go down about 35 px into the following div to give the effect of overlapping the two divs (clickable) being in the middle(closer to the social buttons).. How can I accomplish this? I want a cleanest way possible. Thank you so much for your help. I can supply more pics if needed. a fiddle is very very appreciated =)
just put this css to your blue button div
#bluebutton {
width: 60%;
color: white;
text-align: center;
background-color: #05afcd;
border: 1.5px solid #505050;
margin: auto;
height: 70px;
font-size: 36px;
margin-bottom: -35px;
z-index: 9999;
position: relative; /*** add position relative *******/
zoom: 1; /*** add zoom:1 for ie old browsers *******/
}
here is demo fiddle of your code:
http://jsfiddle.net/jkkheni/FM99D/
Just add this
#bluebutton {
margin-bottom: -35px;
}
If you have any issues with being able to click it in the gray background area..
just add
#bluebutton {
z-index: 9999;
}
I have created a CodePen with the relevant parts from your code.
On it I have done the following modification on the styles (marked with comments):
#bluebutton
{
width: 60%;
color: white;
text-align: center;
background-color: #05afcd;
border: 1.5px solid #505050;
margin: auto;
height: 70px;
font-size: 36px;
position: relative; /*<---*/
top: 35px; /*<---*/
}
You can see it after the modification at this new CodePen.
Here's a fiddle I made for you.
http://jsfiddle.net/B9UvD/1/
Basicly, what you need to is to take the box from its natural flow. You do this by applying this to your #bluebutton:
position: relative;
top: 20px;
(btw, try to name the button to something more universal and descriptable. You don't know if you want the blue button to be red or something in the future. #download-button could be a better name)
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>
I'm trying to place a nice border around an image that's 250x250, using only html and css. The markup is this:
<div id="img-container"><img src="pic.jpg" border="0"/></div>
And the css is:
#img-container {
height: 225px;
width: 225px;
padding: 3px;
border: 1px solid black;
z-index: 10;
position: relative;
overflow: hidden;
border-radius: 10px;
}
#img-container img {
z-index: 5;
}
Basically, I want the div container to clip the picture's edges that exceed its boundaries. This will achieve the rounded edges effect using the border-radius property (-moz-border-radius, -webkit-border-radius, etc) - if it actually works or could even be done. Looking for tips and tricks on this. Thanks.
And, yes, I'm obviously not a web designer :)
Yes it's possible, but you should set the image as the div background using CSS:
#img-container {
height: 225px;
width: 225px;
padding: 3px;
border: 1px solid black;
background-image: url('pic.jpg');
border-radius: 10px;
}
This is necessary, otherwise you will get horrible white borders around the image (tested in Google Chrome).
as far as I understood your question, deleting the
#img-container img {
z-index: 5;
}
part should do the trick.
Or you could use the image as a background image:
#img-container {
...
background: url(pic.jpg) no-repeat top left;
}