I was wondering if anyone had a solution for truncated text on short select fields.
Essentially I have a very narrow select box with a generous amount of padding. In Chrome (left) if your text does not fit inside the area before the menu button, your text is truncated.
In this instance this can be fixed by removing the right padding. However if I do this then I end up with the menu button being squished on the edge of the field in IE (I only really don't like this because it's ugly).
Does anyone have a solution that doesn't include a hack-y work around or alternate control?
It is just a vanilla select box with some padding on it.
Edit: jsfiddle: http://jsfiddle.net/jgA8K/2/
Example Html:
<select>
<option>AM</option>
</select>
Example Css:
/** Pretend there is a CSS RESET here **/
select
{
background: #fff;
border: 1px solid #444;
margin: 10px;
padding: 13px;
width: 70px;
}
Whats happening is is that you defined the select box to be exactly 70px wide. That means that the padding must obey the rule. In order for your padding to be 13px and the width to be 70px, it requires CSS to crush your actual select arrow into a smaller space to allow for both rules. I recommend changing your padding to 10px or making the box bigger.
Or what else you can do is change the font-size slightly to fit. For instance, in your select style, add font-size:12px; which should make the entire word visible and nice looking. Hope this helps!
Related
To create a rounded rectangle with a 3D-like effect, I have a div inside a div, as follows:
* {
box-sizing: border-box;
}
body {
font-size: 0.948px;
}
.outer {
font-size: inherit;
width: 20em;
height: 26em;
background: #fc6;
border: 1.4em solid #bad9d9;
border-radius: 3.98em;
line-height: 20.8em;
text-align: center;
}
.inner {
font-size: 8.64em;
height: 87%;
background: #fff;
border-radius: 2.844px;
}
<div class="outer">
<div class="inner">768</div>
</div>
In this code, I am trying to create this, but depending on the exact value of div.outer's font-size (set via JavaScript), a 1-pixel padding sometimes develops at the top and/or sides of the outer rectangle, as shown here. I believe this is caused by the browser rounding the fractional border width up for positioning elements, but rounding it down when drawing it on the screen. This effect (bug?) occurs in Chrome and Edge, but not Firefox.
Edit: I would like to clarify that almost all the styles are dynamically updated via JavaScript (this is part of a larger project). The border-width could shrink to 0em or expand to 4em, and I am looking for a workaround to this bug (I believe it is a rendering bug) that works for any border-width.
My question: is there a way to fix this without
Using JavaScript to convert from em values to rounded px values?
Using a third element to draw the border (pseudo- or otherwise)?
Gallery:
- original
- at 500% zoom
- with the border-width at 1.0em
- with the border-width at 0.8em (what I want)
- with the border removed
(all screenshots scaled up using Chrome's trackpad pinch-zoom)
This is a known and reported issue, but currently this is considered low priority by the Chromium development team, so there's not much hope this will be fixed any time soon, if ever.
Here's the change that causes this: Use floor instead of round for decimal border widths; here's an explainer for the change.
Adding your case and a reproducer to that issue might help.
I would prefer not to mix different types of Units use em everywhere.
In addition, make the inner width 100% so it always fills the outer and does not have extra space of the outer visible.
let me show the code for this webpage first and try to explain what I am asking.
h1 {
border: solid;
padding-top: 0px;
margin-top: 0px;
}
body {
padding: 0px;
margin: 0;
}
<!doctype html>
<html lang="en-US">
<head>
<title>Practice1</title>
</head>
<body>
<h1>Sample H1 Header</h1>
</body>
</html>
What I am trying to accomplish is to have the H1 header just barely touch the top and bottom borders that surround it.
Now, I am aware that the issue is line-height. Since I have a descending character (the "p" in "Sample H1 Header"), the bottom half is just right. However, the top half isn't.
I don't even understand why the default line-height has that extra space on top? I understand the bottom for descending characters like "p" and "q", but what characters require the extra space on the top? So understanding this, I guess, is my first question.
The second question is how to change the top half in my example so that the "Sample H1 Header" just barely touches the border I defined. I can change the h1 css to line-height: .7; and that will give me what I am looking for....expect then my poor "p" is sticking outside. So I want to keep the line-height on the bottom half at the default, but change it just on the top. In other words, how can I control the top and bottom half portion of line-height independent of each other?
I did find one solution. That's using the following in combination with the H1 header.
line-height: .7;
padding-bottom: 7px;
That gives me the look I am accomplishing. The problem with that solution, though, is I need to seem to adjust it manually if I decide to later change font-families and sizes. I would like something more automatic that I can simply apply whenever I need it without having to measure and modify for each case. Any ideas?
Or is there a way I can just turn "off" the top half of line height or have it adjust automatically to the tallest capital letter of the font and size I am using?
Thanks!
as we know every font has their own vertical space. So if you want only vertical space of font inside the border then you have to make line-height same as the font-size.
h1 {
line-height: 36px;
font-size: 36px;
}
Some font have more vertical space at top so you have to manage that space using padding as required.
Every font has their own vertical space which is exactly define the line height so the solution which you have is the best for the case .
I am currently working on this website: http://mdftanzania.com. I am using Wordpress and headway101. I want to have a full width green background color that applies to the begin part of the page: About Us and Services. I add a div class to the part of the page where the green background has to be. I tried to style the div class to a full width green background, this didn't work out and at the moment only a part is styled now (see the website: http://mdftanzania.com).
I understand that there is another solutions, that is creating a container or widget above the container for the content, where I place the first part of the page text in. The problem with this is that it is confusing for my client where to edit the text in the page. The simplicity of Wordpress goes basically away then. Because of that, I am looking for a solution with CSS styling, so the client is only dealing with the 's.
Does anybody has a solution for this?
Since you have predetermined a padding to the content block, it is obviously affecting all the child elements that are contained in it, including the div with green background, which means that you should either remove that padding and apply it only to specific elements, or apply this simple CSS workaround to your div:
{
margin: 0 -25px;
padding: 0 25px;
}
This makes it, in your words, "full width" and applies a padding to its content.
You have this rule set in your css:
.block-type-content {
padding-left: 25px;
padding-right: 25px;
padding-top: 120px;
}
So children of this container, even though they may have a width of 100%, have to obey this padding of their parent. That's why you don't get a full width green bar. You might try negative margin-left and right to expand your green bar:
.color {
margin: 0 -25px;
padding: 0 25px;
}
At least in Firefox/Mac, this solves your issue.
I am trying to create this ribbon effect dynamically using an h1:
I have these two images:
and my goal is to stick these on each end of my h1 tag, use the display: inline; property to add dynamic width. Is there any "right way" to do this and make it work cross browser?
For my testing purposes, the ribbon ends are 40px tall, and 18px wide. I am not sure yet what I am going to do about the shadow, but if you guys can just help me figure out how to get this working, I can make it look nice. (hopefully)
For clarification purposes, here is the (non-working) css I have so far:
h1 {
display: inline;
height: 40px;
background-image: url(images/ribbon/left.png), url(images/ribbon/right.png);
background-position: left, right;
padding: 0 18x;
background-color: #ECECEC;
}
The css above causes the #ECECEC color to bleed behind the ends of the ribbon. Any ideas?
Update:
If it helps, here is a screen shot of what my current css is bringing me. This is a little sensationalized to make the result easier to see. I have added a red background instead of the #ECECEC.
First try
overflow: hidden
It could also be a browser issue:
Border Radius = Background Bleed
EDIT:
Have you thought about not using the images all together and just using pure css
http://css-tricks.com/snippets/css/ribbon/
May not look like you wanted but messing around with the css would fix this.
I'm highlighting text in a HTML document using <span> tags around the content to be highlighted. The span class has a background-color defined, and a border-radius is also set. This works well.
I'd like the highlight to extend a bit further beyond the normal extents of the <span> content. That is, a few pixels to the left of the span-start, and a few pixels to the right of the span-end. Ideally I'd do this without spacing apart the content itself.
Any good css tricks I can use to achieve this?
You can set a padding and a negative margin. For example:
span {
margin: -5px;
padding: 5px;
}
You can see a demo here.
margin: 10px 0px; ??
if this does not solve your issue can you elaborate on the problem ?