I'm trying to set certain margin between two table rows.
I'm using following code snippet in css:
background-color: #72c2dd;
margin-top: 25px;
background-color gets applied but margin-top doesn't work. (refer below screenshot)
This is the issue with whole table.All other properties are working properly but there is some issue with margin.
Any help appreciated.
Image on the left is how it should be and the image on the right is how it is getting displayed (without margin top to the second row).
Table cells do not have margins to change. You can, however, change the padding of the cells. Another trick you could try would be adding a transparent border to the upper part of the row using something such as:
border-top: 5px solid transparent;
Use border-top instead, border-top: 25px solid white original try table-layout http://www.w3schools.com/cssref/pr_tab_table-layout.asp and set custom height to that cell
If you have only one column then "cellspacing" will solve the problem;
Or else you can use a white top border for rows of width 25px;
Related
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!
I'm trying to recreate a "pixelated" version of the Space Invaders icon in HTML/CSS using individual 30px square images with a blue border of 2px between the squares.
However, I'm having incredible difficulty aligning the 2px borders since the square image is not repeated equally on each row (e.g. the first 2 rows only display the square image twice, while the 3rd row displays it 7 times, etc.).
I first imagined an 11 x 8 rectangular grid, and then I used a <div> with the same width and height as the square images and with no border as placeholders where the images are not meant to appear, while displaying each square image with a solid border of 1px where they are meant to appear.
The problem with that is that while the images on the inside correctly display a doubled-up border of 2px (1px + 1px borders), the outermost squares only display a 1px border on the outside sides that are not next to another square.
So then I tried setting 2px borders on the "outer sides" of the "outer squares", but that then changed the entire "line height" of the row of images (using vertical-align: middle;) in that entire row from 1px to 2px, creating an empty white space 1px high at the top of the inner squares.
So I've been pulling my hair for the last several hours trying to get this to look "right" with the 2px borders properly aligned in a "grid" while not appearing where no square image is meant to show, but I'm going in circles.
Surely, there is a simpler, more straightforward way of doing this. What's the magic solution?
So, since you have been pulling your hair on the problem, I guessed I might suggest a simpler solution to it, perhaps not exactly an answer to your question, which is very difficult to give without an HTML example.
I made this CSS-only space invader:
CSS-only Space Invader!
Basically what you do is have a general CSS rule for your pixels <div>s, I have it defined like so:
div{
background-color: transparent;
border: 1px solid #000;
float: left;
width: 30px;
height: 30px;
}
Of course, please, choose something less general than div, I did it just for the example purpose. In this way you have a div making up your transparent pixels. Everytime you need to fill up a pixel in your image, just add a class (I used .px) with this minimal CSS rule
.px{
background-color: lightgreen;
}
When you are starting your new line, give your div a class of .first and make it clear:left.
.first{
clear:left;
}
I think this is a pretty simple solution! Bring on the CSS pixel art!
I'm playing around with display properties trying to get the hang of them.
One question I had was how to get spacing between the table cells. Right now I have 4 images that are boxed up against each other. I want to have them tight to the left side but spacing in between. So even spacing everywhere except the left. I tried to use border-spacing: 5px; but that added spacing on the left.
I put a version in jsfiddle but its rendering with another issue. In jsfiddle its showing space between the rows. Not sure why that's happening as its working correctly in the browser.
http://jsfiddle.net/chapster11/RjGaX/
You need to add padding:5px 5px 5px 0; to #displayWrapper #grid .gridImage to get the even padding.
This rule says add 5px of padding to the top, right, and bottom and 0 padding to the left.
Add img {vertical-align:bottom;} to fix the extra space at the bottom.
http://jsfiddle.net/jasongennaro/RjGaX/3/
You need to set border-collapse:separate; so that your border-spacing is actually between the borders of the two cells.
add display: block; to the img
For some reason, when I implement the border-left: 10px solid #FF0000 css style for my left column, and the border-right: 10px solid #FF0000 for my right column, for some reason, it throws everything off...
Anyone know why?
Subtract 20px from elements width.
"throws everything off" is a little vague, but here is a stab at it. Have you specified a width for the container of your bordered content? Maybe your 10px borders cause your content to be too wide.
If this isn't the problem, please post some more specific info.
Probably because the border is added to the width of you element. For example if you have a 100px div with a 10px border that will make your element 120px total.
I have a div which has style properties as "border-top, left, right, bottom" set.
But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).
How can this be done?
I think there is a property in CSS called "border-top-width" but there is no "border-top-length".
Can it be done using CSS? Any other approaches are also welcome.
Thanks...
I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...
<div style="border:1px solid black; background-color: white;">
<div id="borderHack"></div>
Your content here
</div>
And style the "hack" element like so:
#borderHack {
float: right;
margin-right: 1px;
background-color: white; /*This would have to be the same as the background*/
height: 3px;
width: 1px;
}
You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.
I don't believe you can do this with CSS alone.
You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.
You can do that using what's explained in this link http://www.css3.info/preview/border-image/
Basically what you would do is draw a box without the top corners and assign it as border-image
Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.
You might as well try this (relative+absolute positioning) almost the same with float:
<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
some content here
<div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>