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
Related
I have this code: http://jsfiddle.net/mVX93/48/
Is it possible to remove the border from the far left side and far right hand side of the table?
I want to align it to either side of the page, and you can see it doesn't align with the test text. My idea would be to use nth item to apply border-left: 0px; to the first item and border-right: 0px to the last item however this doesn't seem to work.
Can anyone show me if this is possible and how it should be implemented please?
Since you have border-spacing:10px; there will be space remaining on the right and left side to separate the td. However, you could put a div around the table and change it's margin-left and margin-right.
Try this:
body {
background-color: gray;
overflow: hidden;
}
.grid {
margin-left: -20px;
margin-right: -20px;
}
You cell 4's text is overflowing but it is because you have a lot of . or dots without a space so when you enter text it should be fine.
DEMO
If you change the border-spacing to border-spacing-left:0px it aligns with Test but reduces the space between the cells. If you also add another Test and float it right it aligns with the right side of the table.
I'm trying to remove the white spaces. I've research and finaly remove the white spaces on .side and .main but i cant remove the white space on top and below(when zoomed out).
Here's my FIDDLE. I appreciate any help.
What i want is (see image below). I'm tyring to create it like that, even when zoomed out there's no white space.
The another solution is to add this to .top and doesn't affect the other elements (That means, other elements' padding and margin will keep the same):
margin:0px;
display:inline-block;
Please notice that only add it to .top. Do not do this:
* {
margin:0px;
padding:0px;
}
Because it will also affect other elements.
Ok, take a look at this: http://jsfiddle.net/EH83H/
I've added a few things like
* {
margin: 0;
padding: 0;
}
to remove paddings and margins by default, i've added a position fixed to the container, and height: 100% to the main and left divs. Also main and left divs have a container div named bottom
I have some unexplainable image margin/Space below img when including images in my wordpress theme. You can see it here: http://www.wlanradios.net/logitech-squeezebox-radio/
See the Amazon logo image inside the content or scroll down and have a look in the "Ähnliche WLAN Radios" sidebar widget with the small thumbnails. The images seem to have a little margin-bottom / Space below it I can not get rid off. I discovered the html/css with firebug but don't get the it where this margins comes from. I in fact tried to
img {
margin:0!important;
padding:0!important;
border:0!important;
}
to overwrite every possible causes for the margin, with no success.
Where is the margin coming from and how to remove it?
Just put to those imgs :
display: block;
UPDATE:
Some explanations: img is an inline element, so it has to deal with white-space, line-height, etc., as all inline elements. I guess the space you're seeing is actually caused by the line-height. So another solution if you want to keep your img as inline elements is to set its parent line-height: 0;.
Have you tried: vertical-align: middle
I have Deeply inspected the Issue, its a bit of haystick needle kind of thing.
1) Amazon Image box - Issue is with the td tag which creates a all sides padding of 6.71667px , This is FORCEFULLY created by the td,th padding which is set to 0.5em
th, td {
border-spacing: 3px;
//Tweak this Padding of 0.5em and you should destroy Amazon Extra Space
padding: 0.5em;
border: 1px solid #CCC;
}
You should be able to find and edit from line 183 of the above css theme from wp-content/themes/ar2-2-b-2-fixed/styles.css
2) Coming to the second issue with WLAN Radios Pic , This image is pushed in due to the DIV tags Padding all set to 4px which is acting on the WLAN Radio pics.
Here are the Issue Pics:
Amazon Image Issue Solved Pic
Hope this Helps :)
Check for your line-height on the img elements, and set it to 1. You must have a line height > 1 on a parent element.
You can also change the display of those img to 'block' (to avoid line spacing).
I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }
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;