While I was writing a css for a website, I found that some portions of my css did not work as intended. What happened was that within a selector with the highest specificity, when I tried to adjust the width or margins of an element, it did not change. However, within the same selector, other properties could be adjusted without problem.
e.g.:- take this selector
.get-touch {
text-decoration: none;
margin: auto;
margin-top: 35px;
color: #fff;
width: 200px;
}
This is applied to a button, and I wanted to increase its width.
Even if I change the width to 500px, the width will not change whatsoever. However. any modifications to other properties will be reflected on the browser.
Here, I have attached the file to my particular css file which brings the problem:- https://drive.google.com/open?id=0B1CjX_FVqdRjWGRkS3NLOG9tTEE
How can this occur, and what can I do to prevent such problems?
.get-touch {
display: inline-block; /* Add this */
text-decoration: none;
margin: auto;
margin-top: 35px;
color: #fff;
width: 200px;
}
As you have mentioned that the button size is not changing even after giving it width, it means you are applying your CSS on an inline element and thus the browser can't render its box-model.
Adding a display:inline-block property will make it work.
Related
I have a <label> element in my ASP.NET core MVC project, that splits to multiple lines instead of showing in a single line. I've inspected the element in google chrome to see what css is being applied. It is getting it from my custom.css class. Below is my custom.css file.
body {
padding: 1em;
font-family: Arial, Arial, Helvetica, sans-serif;
}
h1{
margin-top:0;
color: navy;
}
label{
display: inline-block;
width = 50em;
padding-right: 1em;
}
div{
margin-bottom: 0.5em;
column-width = 300px;
}
The css in the inspect element is as below.
I've tried updating the custom.css files in the code, but it still somehow picks the same values for css. Tried cleaning and rebuilding the code. Still doesn't work.
However, when I un-select the width property(as shown below) in inspect element, it shows as expected. I'm removing the width property from custom.css file but it is still coming up during run.
I'm unable to explain why this is happening and how to get the label in a single line. Tried updating the custom.css file in code and the changes simply don't reflect. Why has this been happening and how to fix it.
If you're interested in the entire code source code
your source code link is not working so only just looking at your screenshots i'm suggesting the following changes, see if it helps you.
since you are using tag instead of a class the other classes or id selectors may be applied to your label width, the CSS selector specificity applied(or decrease) on the following order,
ID
class
tags
but don't use ID for this purpose since it's hard to override them in the future, use classes instead.
for now just set the width of the label as 100% so it will take full space of available width and also add !important to make it as high-priority origin that can override any inline styles or other overriding class styles.
label {
display: inline-block;
width = 100% !important;
padding-right: 1em;
}
Is there a way of hiding an element's contents, but keep its :before content visible?
Say I have the following code:
HTML:
<span class="addbefore hidetext">You are here</span>
CSS:
.addbefore:before {
content: "Show this";
}
.hidetext {
// What do I do here to hide the content without hiding the :before content?
}
I've tried:
using display: none and setting display: inline on :before, but both are still hidden
using width: 0; overflow: hidden;, but then additional space seems to be added (?)
using color: transparent;, but then, of course, the content of the span still takes up space
using text-indent: -....px, but
this is frowned upon by search engines and
it seems not to work for span elements (?)
Any other ideas as to how I might do this?
Clean Solution
You could use visibility: hidden, but with this solution, the hidden content will still take up space. If this doesn't matter to you, this is how you would do it:
span {
visibility: hidden;
}
span:before {
visibility: visible;
}
Hackish Alternative Solution
Another solution would be to set the font-size of the span to zero* to a really small value. Advantage of this method: The hidden content won't take up any space. Drawback: You won't be able to use relative units like em or % for the font-size of the :before content.
span:before {
content: "Lorem ";
font-size: 16px;
font-size: 1rem; /* Maintain relative font-size in browsers that support it */
letter-spacing: normal;
color: #000;
}
span {
font-size: 1px;
letter-spacing: -1px;
color: transparent;
}
Example on jsfiddle.
Update (May 4, 2015): With CSS3, you can now use the rem (Root EM) unit to maintain relative font-sizes in the :before element. (Browser support.)
*A previous version of this post suggested setting the font size to zero. However, this does not work as desired in some browsers, because CSS does not define what behavior is expected when the font-size is set to zero. For cross-browser compatibility, use a small font size like mentioned above.
For better browser support:
Wrap the text that should be hidden within an additional span element, and apply classes to that span to hide the text you wish to be hidden.
HTML:
<span class="addbefore">
<span class="visuallyhidden">This text will not show.</span>
</span>
CSS:
.addbefore:before {
content: "Show this";
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The .visuallyhidden class used above is from the current version of HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
The advantages of this solution:
Semantic HTML
Complete browser support
No problems with tiny text like other small font-size solutions.
The hidden content won't take up space
See it in action here: http://jsfiddle.net/tinystride/A9SSb/
I took a similar approach as suggested here with visibility, but that still has a content box.
My solution is to simply use font-size to hide the target text.
span {
font-size: 0;
}
span:before {
font-size: 16px;
}
Building on #anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; will not mess things up:
<span abbrev-content="Intl.">International</span>
#media only screen and (max-width: 700px) { /* very narrow viewports */
span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
span[abbrev-content]::before {
content: attr(abbrev-content);
font-size: 1000em;
visibility: visible;
}
}
If your span content is a paragraph and not just a word, you may also need the negative letter-spacing.
I don't think it's possible with pure css and html. Looking at this example http://jsbin.com/efeco4 you will see that what is inside content property of css, is wrapped by the element. So any manipulation of the element will affect the css content also.
So an alternative thought could be to use jquery, to empty the html content inside tag div with class hidetext without affect the content of css. A sample code could be this:
$('.hidetext').empty();
Example: http://jsbin.com/efeco4/2
My div tag seems to be having a margin towards the top between the div and the body tag
body {
margin: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: green;
border: 2px solid black;
}
div.container {
max-width: 920px;
height: 100%;
margin: 0px auto;
padding-left: 20px;
padding-right: 20px;
background-color: #e1e1e1;
display: block;
//border: 2px dotted black;
}
Here are my two css for body and div, if I include the border code in the div tag then the color is blue all the way till the top otherwise there is margin of green inbetween the div and the body tag.
How do I remove this margin without using a border ?
Browsers may have built-in styles which can make some difference in some cases. These built-in styles may include paddings, margins, other kinds of spacings, styles for tables, etc.
Here is a project which when included, normalizes every style which may be applied by the browser. https://necolas.github.io/normalize.css/
As far as I know, every CSS framework use this technique too.
If that doesn't solve your issue, try to use Chrome Dev Tools or other debugging tool to check the actual DOM. The tool can provide you information about actual paddings, margins, and dimensions. For Chrome, right click your page and choose inspect element or something similar. You'll have a similar option in most of the modern browsers.
div contains single line texts as li elements
div width is determined by widest item width.
If mouse is over some item, its font style changes to bold.
If mouse is placed hover wide items, bold font causes width increase and this causes div width also
to increase.
This looks very ugly if mouse is moved in list.
How to disable this increase without using hard-coded width?
I tried overflow: hidden style as shown in code below but div width still increases.
html:
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product2</li>
...
css:
.site-leftpane {
background-color: #FBFBFB;
clear: left;
color: Black;
float: left;
margin: 0;
overflow: hidden;
padding-top: 1em;
}
.tree {
line-height: 1.6em;
list-style: none outside none;
margin: 0;
padding: 0;
}
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
.tree li:first-child {
font-weight: bold;
}
.tree li a:hover {
color: #E47911 !important;
font-weight: bold;
}
Update
I chaged style according to proposed answer to
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
But problem persists. Web page can used in different screen resolutions. Texts are created by customer at runtime. Right side of contains other div which automatically uses remaining space.
I do'nt knwo how to use hard-coded max-width in this case. max-width specifies maximum allowd div width. Usually in this case div width is smaller, hover causes its increase and thus max-width does not solve the issue.
I had a similar problem and found one way to fix it was by using some jQuery, simple and works:
$('.menu-item').each(function() {
$(this).css( 'width', $(this).width()+'px' );
});
Basically you have jQuery "hard-code"/set the initial width of each of your class elements that was calculated by the browser based on text length and font settings, so that when you hover over each element which say changes the font-weight of the text, then the width won't change, it will remain the same as it was initially.
Ok, this isn't a great answer, but may provide a quick fix, from which someone else could base a real answer :)
Playing around with your HTML/CSS I was able to get what you want (well, emulating a dynamic max-width) by adding duplicate entries for each <li> in the list, adding a "pad" class, which basically hides the content.
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product It's a product, yes.</li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>
And in the CSS I added this to the end:
.tree li.pad {
line-height: 0;
font-weight: bold;
visibility: hidden;
}
What it basically does it add hidden entries for each of your list items, but the pad class makes the additional entries zero-height, but bold (and hence the correct width). It kind of relies on you being able to generate the HTML side, to allow adding the duplicate entries.
However, I think that this is a terrible solution, for numerous reasons (it's adding redundant data, it would mess up any non-visual browser, ...).
Try adding padding:0px and margin:0px to your :hover, also you could add a max width to your div to keep your width at a single size. This in my opinion would fix your problem.
I don't think you can be certain of the actual pixel width when your server builds your page.
The users browser does all of those calculations, and it doesn't really expose them (though client-side scripting languages & toolsets like jQuery can see the end results).
Honestly, your best bet is to either assign a fixed-width to the items, calculated well ahead of time, and accept that long text might line break. If this doesn't work for you, the other option you have is to change the hover behavior. Perhaps instead of making the text bold you could change the text/background color? This would be an alternate way to indicate the currently hovered item and it won't change the character size or spacing.
I'm trying to have a block-level input-append, where the input bar takes up all the space other than the button.
I got this working with a <button> or <span>, but once I switched the tag to an <input>, I started having styling issues again. However, the <input> tag is required.
I've include a Fiddle - HERE
I got it to work by doing this:
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: auto !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
I removed the nested selectors as you can't do that in regular CSS. (With Sass and LESS you can though).
I added "height: auto !important" to the ".add-on" selector. Although it's generally regarded not best practice to use "!important".
I added padding-right to the well of 58px which is the width of the GO! button, 39px, plus the well padding of 19px.
Edit: As #nicefinly pointed out, the height of the GO! button was still off. In Chrome I didn't see anything wrong, but in Firefox I could definitely see the height problem.
So, with all of his changes, I would also add that when modifying the well and add-on classes for example, this would change all the places where those standard Bootstrap classes are used and this is probably not want you want.
Instead, I would create separate classes for all of these custom classes so they work in this specific case and elsewhere it works as intended. For example, "add-on-button", "well-with-button", etc.
#CoderDave pointed me in the right direction with his suggestion - JSFiddle of #CoderDave's answer
However, I then noticed that the height was somewhat off. Instead, I set the button height manually - JSFiddle of my workaround
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: 30px !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
BUT THEN...
Testing in Chrome gave me strange results (not necessarily in the fiddle, but in my local environment). Therefore, instead of padding, I used the margin-left and margin-right where
margin-left = 17px on the input .add-on
and
margin-right = -55px on the .input-bar
However... After that, I noticed that the z-index was causing the .input-bar to block out the GO! button when the bar was in focus (i.e. I clicked into it).
Therefore, I set z-index
z-index: -1 for the well
z-index: 1 for the .input-bar
z-index: 2 for the .add-on
FINAL JSFIDDLE HERE!
This seems like a pretty hacky solution. If anyone has a better solution, please share.