I have an effect on CSS and JavaScript that makes a poster rounded in the title field of a link, in chrome looks good, but in Firefox it looks like a rectangle when should look like chrome.
What I'm trying is that the rounded edge is consistent with chrome and firefox.
Example :
http://i.imgur.com/ltQkAON.png
Source :
p#vtip {
word-wrap: break-word;
display: none;
position: absolute;
padding: 5px;
left: 5px;
font-size: 0.75em;
background-color: #666666;
border: 1px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 9999;
color:white;
}
p#vtip #vtipArrow {
word-wrap: break-word;
position: absolute;
top: -10px;
left: 5px
}
.ok {
border:1px dotted green;
color:green;
padding:10px
}
.vtip2 {
word-wrap: break-word;
display: none;
position: absolute;
padding: 5px;
left: 5px;
font-size: 0.75em;
background-color: #666666;
border: 1px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 9999;
color:white;
background:#312c2b;color:white;
}
.vtip{cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dropotron/1.4.3/jquery.dropotron.min.js"></script>
test
How I can accomplish this?
You should use border-radius instead of the browser specific variants. This would ensure browser compatibility not only with ff and chrome.
This for example works fine for your request:
<a style="border: 1px solid #000; border-radius: 5px;">Bla bla</a>
Also plain border-radius is supported by firefox and chrome since a looooong time ago (see http://www.w3schools.com/cssref/css3_pr_border-radius.asp).
Also I think -moz-border-radius was removed in newer versions of firefox (at least I can't seem to find it any more), but can't find any official post about it.
Related
I'm having trouble trying to get rid of these annoying corners. Is there any way to use border-radius without having this problem?
.buttons button{
width: 150px;
height: 65px;
border:1px solid black;
border-radius: 20px;
box-shadow: inset 0px 0px 4px 4px black;
font-size: 30px;
font-family: "Suisse Int'l";
background: #39C463;
margin-bottom: 40px;
}
How to avoid the white corner problem when using border-radius
I've got the following div structure in my html layout.
<div class='main-container'>
<h5 class='hotel-name'></h5>
<div class='hotel-price'></div>
</div>
and the css is as following for each element.
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
}
.hotel-price {
display: inline;
float: right;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I've not defined any width to any element. The content in each element is drawn dynamically. for example, the following image shows how the structure looks after all the data is loaded.
but my problem is there are some occasions where the name is long and the price just drops down.
example image of the issue.
How can I fix this issue. I'm building this layout using bootstrap 3.1 and my custom css.
Can you update your CSS?
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
word-wrap: break-word; // <- New Line
}
Here's the reference on MDN
try this, use clearfix class
<p class="clearfix"></p>
Here is a working example using Flex box.
Flexbox is the new standard of designing and aligning.
http://jsfiddle.net/maxspan/t4QuH/
#mainDiv{
display:flex;
flex-wrap: nowrap;
width: 700px;
background-color: lightgray;
}
#innerDiv{
box-shadow:box-shadow: 2px 2px 2px #888888;
width:200px;
height:200px;
border:1px;
background-color: green;
padding:12px;
}
Using float is not a good idea if you just want the price to stay in the right lower corner.
position:absolute div in a position:relative div will help you better position your price tag.
Example:
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-price {
display: inline;
// ========== Here is the change =================
position: absolute;
bottom: 0px;
right: 0px;
// ===============================================
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
You can try with display:table-cell css property
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: table-cell;
white-space: nowrap;
}
.hotel-price {
display: table-cell;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I have created box with image, title, link and few data which is here:
Fiddle Example
I want to create the replica of div box which should be little larger then actually. Actually I want to show it highlighted with little larger size on hover.
I create second copy in fiddle with item2 class by increased height but no effect.
can some one tell me how to do this?
I found this while googling
$('#theDiv').clone().css('-webkit-transform', 'scale(.125, .125)');
and
var w = $("#thediv").width();
var clone = $('#thediv').clone().css("width", w/8);
But I could not figure out with it.
You're duplicating IDs. IDs must be unique in HTML, and JavaScript will only search for the first ID it finds and no more:
var w = $("#thediv").width();
var clone = $('#thediv').clone().attr('id', 'newId').css("width", w/8);
You can use CSS hover to d this
Fiddle: Example
.item:hover h6 {
margin-top: 20px;
font-size: 14px;
}
.item:hover .moreBtn img {
margin-top: 4px;
}
.item:hover .moreBtn {
position: relative;
font-size: 16px;
margin-right: 10px;
margin-top: 40px;
color: red;
text-shadow: 0px 1px 0px;
font-family: Helvetica;
font-weight:bold;
text-style:italic;
}
.item:hover .pillBtn {
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background:#7CDD97;
padding: 21px 70px 21.0px 70px;
color: #FFF;
font-weight: bold;
font-size: 20px;
text-decoration: none;
}
.item:hover {
background:#F3F3F3;
height: 70px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.item:hover .media-object {
height: 70px;
width: 140px;
}
What is the best way to customize a radio box like this. It should be for ie10, chrome, firefox.
I cant make everything by by own with css and javascript. is there a better way ?
concept:
Hide inputs, and style labels:
input[type='checkbox']{
display: none;
}
label{
border: 1px solid #ddd;
padding: 10px;
position: relative;
padding-left: 36px;
}
label::before{
position: absolute;
left: 10px;
top: 10px;
content: '';
box-shadow: 0px 0px 2px #999;
border: 2px solid #fff;
width: 12px;
height: 12px;
}
input:checked + label::before{
background: #ccc;
}
DEMO
I recently tried something like this and the following tutorials helped me
http://css-tricks.com/snippets/css/custom-radio-buttons/
http://www.hongkiat.com/blog/css3-checkbox-radio/
In my case I used the background-image solution
I have a Firefox extension that changes a browser's tab color like this:
tabBrowser.tabContainer.childNodes[i].style.backgroundColor = "#8f8";
This code works fine in my development profile, but in the working profile I have a theme installed (Noia 2.0 eXtreme), that sets its own appearance for the tabs, so my code can not change the tab's color. Is it possible to override the theme's settings through the code?
I just do not get it. I have found the skin's CSS file, it seems pretty simple.
tab {
-moz-appearance: none;
padding: 1px 5px 2px 7px;
border-top: 1px solid;
border-right: 2px solid;
border-left: 1px solid;
-moz-border-top-colors: #FFFFFF;
-moz-border-right-colors: #808080 #404040;
-moz-border-left-colors: #FFFFFF;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
background-color: #CDCED3;
color: #606060;
min-height: 20px !important
}
tab[selected="true"] {
margin-top: 0;
padding: 1px 7px 4px 9px;
font-weight: bold;
background-image : url("chrome://browser/skin/icons/Bookmark-background.png") !important;
border-bottom: 1px solid;
-moz-border-bottom-colors: #FFFFFF;
color: #000000;
}
tab:hover {
color: #000000 !important;
}
Setting
tabBrowser.tabContainer.childNodes[i].style.setProperty("background-image", "none", "important");
according to https://developer.mozilla.org/en/DOM/CSSStyleDeclaration you could use:
tabBrowser.tabContainer.childNodes[i].style.setProperty("background-color", "#8f8", "important");