I'm trying to achieve the underline for all parts of my button. I tried using -webkit-box-decoration-break property, it didn't work.
Both first line (New Delhi,) and last line (India) should have underline. Since it's due to break in the box, I tried the box-decoration-break property, but it didn't work out. Please guide me where I am going wrong.
The only thing you can do is use text-decoration: underline. Think of a button and the text inside it as a box. The line you are trying to draw will always be at the sides of that rectangle. When the text is wrapped (e.g., because the box is not wide enough), the rectangle just increases in height and keeps drawing the line at the bottom. Have a look at this Mozilla doc about CSS text-decoration or this Mozilla doc about CSS border.
You can add border-bottom : 1px solid #cccccc;. and if it's too close to your element (e.g. button) you can add padding-bottom : 5px to solve your issue.
Related
I am working in a summer note editor in which i had to add 2 lines with bottom border so user can type in the 2 lines.
I have added a div with the below css
.line {
line-height:10px;
height: 10px;
border-botom: 1px solid #007272;
}
In IE alone I am getting an grey outline around the div
I would like to remove the outline when user focus to type something.kindly provide some inputs.
When you say "focus", I think you mean "hover". If not, please correct me.
To remove the border on hover, just add another rule using the :hover pseudo class:
.line:hover {
border: none;
}
You may also want to make sure that all of your HTML/CSS/JS files are IE-compatible.
Hopefully this solved your problem. If not, please me.
I have fixed the issue by removing the height and line-height and adjusting with the padding on top and bottom.
The issue was when setting the height to any element inside summer note editor that outline is coming up in IE, so removed it and adjusted with padding.
This issue is little bit strange. I was unable to fix it in the local environment initially with the above-said code and fixed it while debugging in the high environment.
I'm trying to make a flat black background below the navbar but that seems to be an issue. This is particular concern because I wanted to add some JQuery functionality to the buttons on the right to cause the background color to change when they're pressed. But if something as simple as this, though fundamental, doesn't work...
Currently another issue is this thick, white strip. I honestly don't know what's causing it. I assumed that just having a white AlarmTime would mean floating white text on the page surrounded by a black background, but that's clearly not the case. It's left as the default black now simply because it's effectively invisible otherwise. For the record, it's not the flexbox nor the div causing the border because it still shows up with both of them deleted.
https://jsfiddle.net/xjrqm1k3/
body
{
background-color:black;
}
What did I do wrong?
Edit: I thought you had to have a period before the name of the selected item to select a class. I guess I might've been missing something in my code? The fiddle I posted doesn't seem to have a period Fiddle, and it's what I Copy-Pasted from my work. Do indents cause Visual Studio to count the item as a class?
Edit: Regardless, thanks for the help and information; it works.
You were doing
.body
meaning class with name body
change to body
Also you have to add !important since you're loading bootstrap after this CSS file.
See fiddle
It's probably being overriden by something else. Try this:
body
{
background-color: black!important;
}
I have a button in my application and currently its very basic:
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Which means it has the default HTML CSS effects used w/it. I was attempting to change it w/CSS but everytime I make the button bigger, there's always this dark side on the right and bottom side..I'm not sure why. If I change it back to its default, its not there.
Here is the JSFiddle:
http://jsfiddle.net/htzgak6g/1/
I'm referring to the right side and bottom side. They seem darker to me than the other sides. All I want to do is have some type of button with rounded corners and a nice shade of color.
This is because buttons come with some basic default browser styles that are still taking effect because you haven't over-ridden them.
In this case, adding border: none will remove the border and the dark colour. (http://jsfiddle.net/htzgak6g/2/)
Look at a reset css to solve these problems and give a consistent blank slate across browsers.
The problem is that the browser appends default style to the elements which are marked by <system> in Firebug. You can use the Selectors style panel to view all the styles added.
As Toni said, you will need to use reset.css to ignore such styling. But for this specific problem, set the border-color to be transparent.
button {
border-color: transparent;
}
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Just add border-style:none; like so:
<button style="height:150px;width:150px;border-radius:10px;border-style:none;">Hello,World</button>
Here is your updated JSfiddle
I have to make some text editable to form an Email. To indicate where text may be changed, I want to give a border around editable passages.
Sadly, it looks pretty ugly with:
outline: 1px solid #c9c9c9;
If the editable span contains a line break (border looks even worse!).
See fiddle: http://jsfiddle.net/Q5qdA/1/ for reference. Try to add a double line break and some text. Especially line breaks will result in very ugly vertical borders.
Another problem is (only tested on firefox), that if you add a line break at the end, you can't remove it (it creates a new break with type="_moz", which won't get removed...)
Is there some way to work around this ?
ps: I have jQuery / jQuery-UI at hand, but wouldn't like to use plugins...
its hard to get your problem, because its not easy to see, what you wish.
But maybe its better to get one outline for one span :
Here's my fiddle
http://jsfiddle.net/Q5qdA/7/
p {
width:210px
}
(for example)
with a width you can solve this.
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.