I designed a form like the below.
<fieldset>
<legend>Search</legend>
<table>
<tr>
<td style="width:100px">
Application
</td>
</tr>
</table>
</fieldset>
I am seeing the some space between fieldset and table .how to reduce the spaces between them.
like that my page having 4 div's in between div havig more space .please let me know i wrote the css as padding :0px like that but not reducign the space between the div's.
Please let me know.
I wrote this down in jsfiddle and played around.
This is your example:
http://jsfiddle.net/c4d68/1/
And watching what CSS the element has, i wrote a new one without those spaces.
Is maybe this what u are searching for?
http://jsfiddle.net/gqzr6/1/
Regards
I added some borders to the table, to make the examples more clear and the difference of space.
Related
I've got a problem with div spacing in responsive design if you go to this url: http://www.false-idolz.com/mobile.html you'll se how when you decrease to the maximum de window width the div spacing gets bigger instead of smaller... why does it happen? how do i fix it? Thanks!
<table>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
</table>
This is the example of the code I am using everything works but spacing
Transferred from comments as this proved to be the answer
Inspecting the source code reveals that you have got tables within tables - not only is this bad practice, but it will also cause many problems and I suspect that this is one of them. Honestly, I think there is far too much for us to change in order to get your code working as intended. Please redesign your layout, without using tables within tables, then we if you still have difficulty come back to us.
I'm trying to troubleshoot a fairly simple page which has a nested table in it and gives me an unwanted horizontal space for some reason. I removed most of the code until all I'm left with are the tables and the space still exists.
<table>
<tr>
<td>
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</td>
</tr>
</table>
I can get around this using divs but I'm wondering if someone could explain this to me, I feel like I'm missing something very basic here.
jsfiddle - http://jsfiddle.net/jeo3ya9n/
Inspecting the DOM in IE shows me an empty line between the first TD and the table, inspecting in Chrome shows me:
"
"
at the same spot. Deleting those removes the unwanted space but I'm not seeing what causes them in the code.
This is one of many of IE's layout bugs, which are irritating to fix.Few suggestions:
1) Set the containing cell's padding-top to 0em
2) Set the nested table's margin-top to 0em
A simple question but large impact on appearance.
I want text indented from cell border and have tried style=text-indent: 4px (not formatted so it displays properly here) but while the first line is indented, the lines after the <br> tags are not indenting. Please help. I need to use div because of some Javascript. Here is flawed code:
<td>
<div id="navbar" style="text-indent:4px"><b>View by:</b><br>
Popular<br>
Trending<br>
</div>
</td>
text-indent is only supposed to touch the first line. Use margin (or margin-left or padding or etc) if you want to adjust the entire block.
Try adding paddding to element, that holds your text you want to indent.
<td style="padding:5px;">text</td>
I have been using the page-break-after command to break an html report after each "grouping". My problem is it is now leaving my table floating in the middle of the page. Each page is different where it puts the table, sometimes at the top of the page, sometimes in the middle and sometimes at the bottom. There is quite a bit of complexity in the HTML so I decided to take an image instead:
I will try to sum up the html
<body>
<table>
<thead>
{this is top bold box on each page}
</thead>
<tr>
<td>
<table> {this is the results table}
<thead>
{this is the headers of the "floating" results table}
</thead>
{tr's of data here}
</table>
</td>
</tr>
</table>
</body>
we are using display:table-header-group to get the table headers to show up on each page. Can you help me figure out what I need to do to get those tables to be at the top of the page? (this is in IE8)
Impossible to tell from the information provided. Obviously, a CSS issue but can't tell where to begin. Common problems are the display CSS not completely accounted for in the print CSS and, using display:none; on an child element inside of a div tag that has height defined (removes the content but the space is still there.) The latter is what I suspect. I've found adding background colors to various elements very helpful in debugging CSS problems such as yours.
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
How do i replicate this kind of a structure using <div> or <span>'ed CSS
Depends on what you're trying to replicate.
With the simple example you've given, it's not easy to tell exactly what you're trying to achieve, but if what you're tring to do is put two blocks side by side (ie as columns in a page layout), you just need to create a couple of <div> elements and style them using CSS to appear next to each other. Depending on exactly what you want, there are a number of ways you could do the stylesheets.
One option would be to set them both as float:left;. Use width:... to set how wide you want them in pixels or percent.
If float is too complex for you (and it is quite a big jump in concept from a table-based layout), you may want to consider using display:inline-block; instead. This will also allow the <div>s to be positioned next to each other, but gives you more control over how they position themselves.
Finally, if the contents of the <table> is actually a table of data, don't be afraid of keeping it in a table - the <table> tag and its friends are still valid HTML, and putting tabular data into a table is still a good thing.
If you mean that you want to display two DIVs next to eachother, try using the css styles float:left or float:right. use another div with clear:left, clear:right or clear:both to reset following divs to normal behavior.
Here is a link explaining more about that:
http://www.w3schools.com/css/css_float.asp
(click the 'try it' links for very good examples)
I don't know if that's what you're looking for... but I hope so!