I'm a web designer and I have a doubt.When I create a site, for styling it I use CSS, but the problem is that the browser understand the CSS n different methods. I mean, if I put a rule in css like mydiv { margin-left: 20px; } in firefox I will see it with 5% distant from left. But if I open the site in Chrome I will see it more than 5% distance from left. And I can understand, because there's not the same graphic engine to use. My question is: Is there any method in CSS to maintain the same disntace, width, height and other, in firefox and chrome ( because there are the most used browser) ? I've heard about a -moz-document-url, that say that all rules aplies there will be applied only for Firefox. It is right ?
You can use this reset :
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
padding: 0;
margin: 0
}
NOTE
mydiv { margin-left: 20px; } doesn't exist in css mybe you mean #mydiv
{ margin-left: 20px; } or .mydiv { margin-left: 20px; }
I suggest that you use the Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Related
I currently am styling my social sharing buttons using groupings (all Facebook buttons have a set style, all Twitter buttons do, etc.). Currently, I achieve this using a massive grouping of YUI's for each button type - this makes creating new sharing buttons extremely tedious, as I have to inspect each button to find its ID. Below is the code that stylizes my Facebook share buttons. The format is identical for my other button types, just with different YUIs - woefully lengthy. However, my code is functional as is:
#block-yui_3_17_2_1_1486492076694_136568, #block-yui_3_17_2_1_1486492076694_229456, #block-yui_3_17_2_1_1486492076694_301518, #block-yui_3_17_2_1_1486492076694_346464, #block-yui_3_17_2_1_1486492076694_390386, #block-yui_3_17_2_1_1486497764071_38998, #block-yui_3_17_2_1_1486497764071_84939, #block-yui_3_17_2_1_1486497764071_127888, #block-yui_3_17_2_1_1486497764071_167750, #block-yui_3_17_2_1_1486497764071_210706, #block-yui_3_17_2_1_1486762828716_16671, #block-yui_3_17_2_1_1487613145787_165402, #block-yui_3_17_2_1_1488578082993_168899, #block-yui_3_17_2_1_1489175439402_256947, #block-yui_3_17_2_1_1489873739917_158023, #block-yui_3_17_2_1_1490053051323_201623, #block-yui_3_17_2_1_1490837162453_152647, #block-yui_3_17_2_1_1491429139219_249912, #block-yui_3_17_2_1_1491948942477_176351 {
display: inline-block;
padding-bottom: 0;
padding-top: 0;
}
Ideally, I'd like to target each button type using their respective classes to REALLY consolidate the amount of code I have written (and make future additions much more efficient). I've tried everything I could think of, but nothing seems to work.
I'm currently working on the Squarespace platform.
Your problem might be because of Squarespace's default styles. When targeting elements, CSS prefers the more precise selector:
.social-icon {
background-color: red;
/* Less preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* More preferred */
}
You can override this by using !important:
.social-icon {
background-color: red !important;
/* More preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* Less preferred */
}
so when you style your social icons, use !important to override Squarespace's default styles.
.social-icon {
display: inline-block !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
Hope this helps!
This question already has answers here:
How to override !important?
(12 answers)
Closed 7 years ago.
i have a plugin in js from external services. This script has built its own css, but its rules doesn't fit in my layout. So i need to change 540 with 700px:
#chat-container.bbhorizontal .main .booking {
margin-top: 0;
min-width: 540px !important;
}
Path from Bugzilla:
<div class="main">
<form name="chat">
<div class="booking">
I have tried:
#div main.chat.booking {
display: block;
visibility: visible;
min-width: 800px !important important;
margin-top: 0;
}
No success...
How i can achieve this? Thank you.
I prefer programming in C that css. UPDATE see the picture please:
Add more specificity to the selector:
#chat-container.bbhorizontal .main form[name="chat"] .booking {
min-width: 700px !important;
}
That should do the trick...
You just need a more specific selector than the one that you wish to override and to also use !important.
For example:
html #chat-container.bbhorizontal .main .booking {
min-width: 800px !important;
}
The html in the selector is the important bit. That makes this selector more specific than the one your script is generating.
NB: You don't have to use html, I just knew that it would work because everything is always beneath an html element.
.main form .booking[style]{
display: block;
visibility: visible;
min-width: 700px !important;
margin-top: 0;
}
jquery
$("#chat-container.bbhorizontal .main .booking").css("min-width","700px !important");
I've built a page using Wordpress, and am now trying to modify is using CSS. I want to remove the top padding from a particular element on my page. After inspecting the culprit element (using Chrome-->Inspect Element), I see that it has a class of .content-area and a top-padding of 72px. Here is the relevant CSS info yielded by inspect element:
.content-area, .content-sidebar {
padding-top: 72px;
}
However, when I insert the following into my style.css:
.content-area{
padding-top: 0px;
}
the padding remains. Any thoughts on what I'm doing wrong, or how to resolve?
sometime time this property can be inherited by parent class so you can try to this code
.content-area, .content-sidebar {
padding-top: 72px !important;
}
Thanks all. I changed the CSS to:
#media screen and (min-width: 846px) {
.content-area {
padding-top: 5px;
}
}
and the padding disappeared. Other media queries in CSS aren't as intuitive, but at least this works for now.
I have a div on a page, the buttons on other browsers are neatly placed but on chrome, they are falling down.
I am aware of explicit hacks for IE 7 which is like *Margin, but not aware about chrome.Is there a way to define in css.
i dont want conditional statements to deal with this.I need to explicitly mention margin in negative pixels for chrome to pull the buttons up.
This jQuery should add class="chrome" to the html element of your document.
$(document).ready(function(){
if (navigator.userAgent.indexOf('Mac OS X') != -1) {
if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome'); }
} else {
if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome'); }
}
});
You can then target the div like so:
.div {
margin-bottom: 10px;
}
html.chrome .div {
margin-bottom: 20px;
}
this worked like a charm
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.act .now {
margin: -14% auto 0px;
}
/* Safari only override */
::i-block-chrome,.act .now {
margin: 5% auto 0px;
}}
Usually in order to get the style the same for every browser you see some sites have something like this:
html, body, div, span, object, ... {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Is there a reason why they don't simply use:
*, html { ... }
The more broad a set of CSS rules is, the more processing it'll take to load them. The best ruleset is also the most specific.
You can use something along the lines of
* {
margin: 0;
padding: 0;
...
}
to reset everything, the big drawback is, it does exactly that. Then paragraphs don't have any spacing, etc. I'd rather have universal style than having no style and starting from scratch.
This article does a good job explaining the benefits as well, starting at the section titled "A reset to where it all started…"