I have four boxes in a row and they all have the same class. They all should be the same width but one is 1 pixel wider than the rest and it's throwing the row out. As far as I can see, the content is not pushing it, and there is nothing in the box to make it 1 pixel wider. It's the second last box to the right with the contact form in it on this site: http://www.guitarworldcityarcade.com.au/
If it's not content, how can I tell what's making this particular div 1 pixel wider than the rest?
I had compensated for the border in the widths of each box: layout is 1120px wide. 1120/4 = 280. Each box has a padding of 5px, so thats 5 on the left and right. 280-10=270. Then the border, which is 1px on each side, so thats 270-2 = 268. I have set my class for the boxes to be 268px wide and yet one is one pixel wider. I don't really want to sacrifice the border (yet).
You are using border: 1px solid #111111; on line 247 of global.css.
So if you are aware of CSS Box Model
The border is counted outside of the element and not inside hence it offsets your element by 2px and not 1px because it takes 1px on the left, 1px on the right as well as top and bottom too.
So two solutions here, either you can use border: 0; or you need to use box-sizing: border-box; on that element, which will count the border inside instead of outside.
That extra space is coming because of border. So you need to set it to zero.
Declare border: none; for the last box and it will work.
Add this code in your class
border: none;
outline: none;
width:0;
Remove the css border property to that div
border:0px;
Related
Consider the following:
I am writing a debug class to show the position of elements on a page. I want to show the margin edge above (outside dashed line), but realise I can not use the border as this is the inside margin edge. How can I do this?
You’re probably best off setting an outline in combination with an outline-offset. outline is like border, but doesn’t take up any space in the layout and has a slightly different set of rules. Given a div with a 1px border and 10px margin, you’d add an outline like this:
div {
border: 1px solid black;
margin: 10px;
outline: 1px solid red;
outline-offset: 10px;
}
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset
Unfortunately outline-offset isn’t supported in IE. If you need to support that then you’ll have to go down the psuedoelement route as per the other answers.
The box model prevents this.
As you in your original post the margin of a box is not included in it's content size. Without changing your margin to padding this could only be done with pseudo elements.
http://jsfiddle.net/Fcwkw/1/
Since you mentioned it's a class you can simply get a div's margin with some Javascript and set the pseudo padding to the margin.
That's not how border's work, and your image is a perfect example of that. You could create a border with a second element or with the use of :after for example...
You can use :before/:after with position:absolute, border-left/right and height:100%
I have a form surrounded by a border. When the window is resized the border sometimes overlaps the form. This should not happen.
See the fiddle output:
http://jsfiddle.net/sdSdW/embedded/result/
Can someone tell me what I have to change in my source to make the border surrounding my form, keeping a distance between the form and the border even if the window is resized.
I do not want to make the border fixed width (if not really necessary)
See the fiddle source:
http://jsfiddle.net/sdSdW/
You don't need many parents for the border. You can add the border to fieldset itself
try -
fieldset {
border: 1px solid #DDDDDD;
margin: 0;
padding: 40px;
}
JSFiddle
I have 2 columns, floated one to each side, and I'd like to use a 1px width line separator, that goes from top to bottom of the longest column.
Id rather stay away of TABLE layouts, and I dont know which one will be the longest column, or how long will it be.
How could I do this with just css?
http://jsfiddle.net/AhfXc/2/
Something like this
.colright{
float: right;
border-left: 1px solid gray;
left: -1px;
position:relative;
}
http://jsfiddle.net/AhfXc/18/
You could fake it by putting a parent div around both and giving the parent a background image which would be a 200px wide, 1px high image with the a 1px black/gray dot in the middle.
This is possible with CSS. Here's my version of your example: http://jsfiddle.net/AhfXc/15/
Basically, just make the separator be absolutely positioned within the parent container (make the parent position relative so this works). Then attach the child to the top and bottom with top: 0 and bottom: 0. You could set the separator background to be the colour you want, but I've used a border style since you could easily apply dashed/dotted style if you want to.
This does only works if the columns have a known absolute or relative width because the separator's horizontal position is not directly affected by them, but if this is the case, it's a fairly simple solution.
I'm coming across an issue that I feel like I've found (and solved) before. But can't remember what or how.
I'm using jQuery Mobile and re-skinning it majorly. Part of this is putting a solid thick line at the bottom of the nav items. So I've overridden the borders so I have a left and right 1px border, then a 10px bottom border. But the bottom border is jagged, it looks like the left and right are trying to come over half of the bottom border but not all of it.
I've attached a screenshot of the problem (I've increased bottom-border to 25px to make it more obvious).
#id
{
border: #231F20 1px solid;
border-top: none;
border-bottom: #EE1E5C 25px solid;
}
Any ideas where this problem is coming form and how to solve?
It's because the border edges don't meet in straight horizontal or vertical lines, but in diagonals starting at the corner of the inner box and finishing at the corner of the box including the borders (in this case that means the border finishes one pixel to the left and right of where it starts). If you changed your side borders to be wider it'd be clearer what's happening.
Here's a quick image to illustrate:
The borders join along the red lines.
As to a solution - you may need an extra element to wrap to provide that bottom border, or get rid of your 1px side borders. Neither are ideal solutions I'm afraid.
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