I have a page which contains a table.
The <tr>'s have a border-bottom: 1px dotted black;, but as you can see from the image below, they are rendering quite strangely. Does anyone know why this might be?
Relevant CSS
.basket-item{
border-bottom: 1px dotted black;
border-top: 1px dotted black;
padding: 10px 0;
}
.basket-item td:nth-of-type(2){ //included this as it seems to be the second td in every row
padding: 25px;
vertical-align: top;
text-align: left;
}
HTML structure is a standard table, <tr>'s have a class of .basket-item
Thanks in advance for any help
Extending from comment:
This problem seems to only/mainly affects Chrome (or WebKit), and after some unsuccessful trial, I finally come up with this:
add
h4 {
margin-bottom: 1.5em; /* or whatever length that ends in an integer pixel */
}
The reason for this, is that you have specified
font-size: 14px;
And Chrome has an internal CSS that looks like:
h4 {
-webkit-margin-before: 1.33em; /* works like margin-top */
-webkit-margin-after: 1.33em; /* works like margin-bottom */
}
That makes a floating point number pixel (14 * 1.33 = 18.62), and (probably with other elements below, especially float: left elements), Chrome seems to have the need to "calculate" the remaining space height for "placeholder", and finally ends up with a floating point number that is "very close to 200px".
Observation:
In my Chrome, the <td> should be 250px height (including padding). That <td> has padding: 25px, so the "inner height" should be 200px, but with default style, in developer tool, Chrome shows that the <td> is actually 199.609375px height. Overwriting the margin-bottom of h4 to an integer "normalized" the inner height back to 200px.
It's obviously the table display ; if you change your td or your tr to another display (like inline-block), it disappear, but your layout is broken.
It also seems to depend on the zoom level of the viewport : if you scale up, you can make the weird border disappear (both top and bottom border) : the height of tr and td switch from 250px to 251px sometimes.
With so few information, I can't deduce another parameter to change.
Without any actual solution, consider changing your display type, for either tror td, and adapt your layout to fit you requirement.
Related
I'm using CSS box-shadow to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.
Take this HTML:
<div class="wrapper">
<div class="widget">Test</div>
</div>
And this CSS:
.wrapper {
background:red;
padding:20px 0;
}
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}
In most browsers, the widget DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the widget DIV.
Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)
Things I've tried to remove the transparent space:
Changing the box-shadow from using em's to using px's
Adding or subtracting 1px from the other box-shadow attributes
Adding a border around the widget DIV
Adjusting the padding, display, position and other CSS elements for the widget
So many things I can't even remember right now
Any ideas how to remove the 1px transparent space in IE11?
Now that we know it's a bug, here's one acceptable workaround:
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
position:relative;
z-index:2;
}
.widget:before, .widget:after {
position:absolute;
content: " ";
width:1em;
left:-1em;
top:0;
height:100%;
background:white;
z-index:1;
}
.widget:after {
left:auto;
right:-1em;
}
Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.
Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.
Checkout the fiddle here: http://jsfiddle.net/TVNZ2/
THE PROBLEM:
This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.
As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.
That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!
WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):
In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:
div {box-shadow: 10px 0px 0px 0px red,
4px 0px 0px 0px red,
3px 0px 0px 0px red,
1px 0px 0px 0px red;}
Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?
Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.
THE "PRETTY MUCH" PART (FOR ME):
In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.
The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.
Not ideal, but far more preferable than having a whole line transparent.
I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.
Good luck, and let's all thank good ol' IE for its "challenges"!! ;)
You can fill the space with outline:1px solid color; It worked for me.
.container{
display:block;
position: relative;
width:450px;
height:450px;
margin: 0 auto;
background-color: #654d7f;
}
.header-emphasis{
position: absolute;
bottom:5px;
max-width: 420px
}
span{
position: relative;
left:8px;
background-color: white;
padding:4px 4px 4px 0px;
color: #666666;
box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
outline: 1px solid white;
}
<div class="container">
<h3 class="header-emphasis">
<span class="highlight">
If there are no dogs in heaven then when i die i want to go where they went.
</span>
</h3>
</div>
I thought I would share my answer to this issue. I cannot be sure that I have had the same exact problem as everyone else, but what I have observed is this: The problem occurs in EI11 (and EI10 according to other which I have not tested) when an element with a set width of pixels is centered using margin: auto; (my case was a left/right issue). I noticed that on resize, the div would shift over to the right 1px on every other pixel width of the screen.
I used a transparent background to observe that instead of just a gap appearing on the left, the div did in fact shift 1px to the right.
Changing the width of the div 1px does work on the current screen width. However, change the screen width will bring back the problem on every other pixel.
To solve the issue, we need to identify the screen width as even or odd. In my case, on even I added a css rule to my culprit div. The new rule changes the left positioning by 0.5px.
Furthermore, the function needs to be executed on the screen resize.
Below is the script I used to fix the issue:
(function (window, document) {
function isEven() {
var windowWidth = window.innerWidth;
// Find out if size is even or odd
if (windowWidth % 2 === 0) {
document.querySelector("#container").classList.add("container_left_1px");
} else {
document.querySelector("#container").classList.remove("container_left_1px");
}
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);
And the css rule
.container_left_1px {left: .5px;}
Executing the script only on EI10 and 11 would be optimum. Please forgive my scripting as this is the first js I have made. Please feel free to correct any issues. This solved my problem; I hope someone finds it helpful!
DaveE gave a nice solution. I played with this myself as well. I had an issue with the top and bottom blur of a box-shadow, instead of left and right. I eventually solved it by just adding a border on top and use important next to it.
.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}
Perhaps not as well tought out as the previous solution, but it worked for me.
Found this solution(Small space between box shadow and div when alpha set) and it works for me: div width must be an odd number.
width: 800px; => not working, but width:799px; => works and white gap disappeared!
In my case, I had a white line between the div bottom and the shadow and I resolved the issue adding a height to the div with decimals:
height:30px; -> height:30.1px;
I have a paragraph on a web page with 20 pixel margins on all 4 sides. I want to alter just the top and bottom paddings with a single property (so padding-top:0;padding-bottom:0; will not do).
What I have tried is demonstrated here.
http://jsfiddle.net/nFCru/1/
In this Fiddle, I tried to use padding: 30px inherit; to alter just the top and bottom paddings of a paragraph. However, this property-value pair sets the left and right paddings to 0 in addition to altering the top and bottom paddings.
p {
border: 1px solid #000;
padding: 20px;
}
/*
* Here's my failed attempt at only altering the top
* and bottom padding values. The left and right padding
* values are changing even if I use inherit.
*/
p {
padding: 30px inherit;
}
Can I alter only the top and bottom paddings with one property?
No, you can't. inherit means the element inherits the padding from its parent. That is, the body (or whatever element the p sits in), not the "original" p in the stylesheet. To leave the left and right padding intact, all you can do is use the two properties as you described.
In short, no.
The only allowable attributes for padding are width (fixed) or percentage, or inherit (from the parent element). There is no way to inherit values already set.
To set the individual padding values you must use the individual properties.
See http://www.w3.org/TR/CSS2/box.html#padding-properties
Until now you couldn't. But even though this is a very old question I thought I'd update it with a new answer.
With the CSS Logical Properties and Values draft you will be able to do this in the future.
It allows you to specify the start and end of a block or inline padding which is dependent on writing mode and direction instead of simple left-to-right based on the screen in front of you.
If you wanted to specify a 10px padding on the top and bottom of an element you could achieve this with the following for example:
.element {
padding-block: 10px;
}
Although not yet supported by any browsers you could already use this in your projects by using PostCSS with the PostCss Preset-Env plugin.
If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom.
Inherit basically inherits only the parent element's style but in your case you can't use inherit but you can do the following for two "p" elements using class.
p{
border: 1px solid #000;
padding: 20px;
}
p.another{
padding: 30px 20px;
}
<p>A Paragraph with 20px top, right, bottom, left</p>
<p class="another">Another Paragraph with 30px top, 20px right, 30px bottom, 20px left</p>
My application should look good on small screens. When it is normal size, everything looks good. But when the screen is too small my buttons starting to mess up.
Red square represents an image, yellow represents some text and blue represents buttons.
Normally, the top version is displayed (the correct one)
When the screen is small, the second situation happens, when the bottom button jump to a new line.
Ideally, both buttons should stay one above the other. This is my css code:
{
background-color: #6b89ac;
border: 1px solid #89a9d0;
border-bottom-color: #1d4474;
color: white;
font-weight: bold;
text-decoration: none;
padding: 2px 5px 2px 5px;
margin-bottom: 3px;
text-align: center;
display: inline-block;
width: 100px;
}
It happens on small screens because the button is being pushed far enough down to slide under the picture. Try wrapping the text and buttons together in a div. The buttons would then be bound by the left edge of that new div.
Depending on your code that new div might also need overflow: hidden.
In the 1st situation, the 2nd blue box being held to the right only because the red box is tall enough to prevent it from clearing.
To ensure the blue boxes stay to the right right, float them right {float:right}
You should then wrap each set in a div so that the 2nd red box doesn't run up into the middle of the 1st group. And you'd probably need to apply a cleafix solution to that div to ensure its height grows approprirately with the addition of floats.
clearfix references:
1. What methods of ‘clearfix’ can I use?
2. The New Clearfix Method
(I prefer #2)
You can give the body a fixed width. Then, your layout doesn't change when the window width is reduced. You can use the overflow-x property to control the scrollbar behaviour
I'm having a strange issue with some #font-face text where there is some strange padding (or at least vertical space) included with the text. It is causing problems because I want to text to be positioned a certain way but can't have it overlapping other things. Here is a picture of what is occurring:
As you can see when the text is selected, the text overlaps some of the navigation bar above it. I have tried adjusting the line height and padding, margins, anything I can think of. Here is the relevant CSS, does anybody have a suggestion as to how I can get the height of the line to be around the height of the actual text.
*{ margin: 0; padding: 0; }
h1#logo { font: 350px/.95 'Bebas Neue'; color: #DDD; text-align: center; margin: 1px 0; }
EDIT: Here is a live example of the problem: http://codezroz.com/stuff/hello.html
never seen the /.95 syntax before, but after a few tests now i belive it works like:
line-height = 0.95 * font-size = 332.5
so i think that's your problem, the font is taller than the line
adding overflow: hidden; on the H1 should be enough
Well, applying overflow: hidden to h1#logo stopped the selection highlight from bleeding into areas that were outside the element.
Also remember that you can use the :selection pseudo-element to change the color of the selected text.
I'd like to display a YUI button next to some text, but the baseline of the YUI button text does not line up with the baseline of the text next to it. The font family and size is identical for both the button text and the text next to it.
If I use a plain HTML button the text baselines correctly line up.
Here's a live example of the problem.
How can I get the text baselines to line up?
Enclose the adjacent text in a span tag with the following styles:
<span style="vertical-align: middle; display: inline-block; margin-top: -1.1em;">
YUI Button:
</span>
Since the .yui-button has the property display: inline-block, it will behave like a block but stay inline.
By behaving inline, the box model of this element will be attached to the line while the contents of the button will behave like a block. Thus, you'll have to do some sort of vertical adjustment as Phase suggested.
Since the button has a min-height: 2em, you'll have to do some manual adjustment. This:
.yui-skin-sam .yui-button {
margin-bottom: -0.5em; /* adjust for 2em min-height */
vertical-align: baseline; /* use consistent baseline */
}
gave me good results in IE7, FF3, and Chrome, but there is still slight inconsistency among them. You may have explore what other properties are applied at the first span, the first child span, and button that are causing the slight inconsistencies. Of course, you could also adjust the selector to apply to only one instance of the button rather than all yui buttons.
You could also set the min-height to inherit, but then you'll see how the other properties come into play (e.g. the first child (the span in the span before the button) has a block layout).
Alternatively, you could start adding multiple wrappers around the rest of the text so they behave just like the button by building the appropriate spans within spans, but you seem to want to avoid that. If you do, check a couple different browsers.
On line 7 in button.css there is
.yui-button {
display:-moz-inline-box;
vertical-align:text-bottom;
}
If you remove the vertical-align statement the adjacent text will line up with the button text.
Interesting. From the link you provided, numbering from top to bottom, a = aligned, n = not aligned, the different browsers show:
ie6 1 n, 2 n, 3 n
ie7 1 a, 2 n, 3 n
ie8 1 a, 2 n, 3 a
ff2 1 a, 2 n, 3 a
ff3 1 a, 2 n, 3 n
saf 1 a, 2 a, 3 a
chr 1 a, 2 a, 3 a
Removing the vertical align fixes it in ff2 but not ff3.
IE does not support inline-block. That may be causing some of the browser differences.
I don't know why there is such a big difference between safari/chrome, ff2 and ff3.
I had a go at styling the button from scratch. The following CSS is what I came up with. It has the advantage that the adjacent text to the button does not need to be wrapped in any additional elements. It works fine in the latest version of Internet Explorer, Firefox, and Safari. Firefox 2 doesn't correctly size the button height, and IE 6 and 7 each butcher it in their own special ways.
Here's a live example of this code.
.yui-button {
display: inline-block;
background: transparent url(http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/sprite.png) repeat-x scroll 0 0;
border-color: #808080;
border-style: solid;
border-width: 1px 0;
margin: auto 0.25em;
}
.yui-skin-sam .yui-button .first-child {
display: inline-block;
border-color: #808080;
border-style: solid;
border-width: 0 1px;
margin: 0 -1px;
}
.yui-skin-sam .yui-button button {
background-color: transparent;
border: medium none;
margin: 0;
min-height: 2em;
padding: 0 10px;
}
You could try using a negative margin-bottom to pull the button down vertically; if you use the same value as the padding that's on the text within the button, or on the button itself, it might be positioned properly.
I'm at work, and writing this on IE6 (I know, I know...), so I'm not really able to look too closely (no Firebug, etc -not an IT professional), but if you used vertical-align: baseline; or something similar it positions the element, not the text within it, to the baseline of the surrounding text.
You could, alternately, try using line-height: $height; where $height is equal to the vertical height of the button; which forces the surrounding text to be vertically centered within that height. No guarantees, but it might/should work.
To have the button aligned with the text next to it:
Make sure the button (a div in this case) is inline-block. This is really the hard part, so I did a little write-up on how to get IE6+ and other browsers to honor the inline-block.
Add a vertical-align: middle on the button and the text.