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.
Related
So I kinda reaching the end of what 'blind flailing' can accomplish and am hoping someone can point me in the right direction here. I am only starting to absorb the whole HTML/CSS way of doing things so still pretty new at this.
So the problem I am trying to solve is one of keeping everything visible on screen. The page exists mostly for navigating a series of charts produced by matplotlib as SVGs, but is otherwise all static content.
The page is of the basic form:
<html>
<body>
<div name=someFrameName>
<h2>Some Section</h2>
<iframe src="some_html_with_controls_and_data_2.html">
<html>
<body>
<table>
<tr>
<td><a href=some_html_with_controls_and_data_1.html>Data Set 1!</a></td>
<td>Data Set 2!</td>
<td><a href=some_html_with_controls_and_data_3.html>Data Set 3!</a></td>
</tr>
<tr>
<td colspan=3 rowspan=3>
<img src=data_set_2.svg/>
</td>
</tr>
</table>
</body>
</html>
</iframe>
</div>
</body>
</html>
There is also some very basic CSS involved, mostly 'width:100%;height:100%;' and 'table-layout:fixed;', but this is intended to be a rather utilitarian output so there is not much there.
For the most part this works fine, but I run into issues with the content inside the being longer than what is displayed. This results in some sections starting before previous ones have finished (so the bottom is cut off) or content continuing below the maximum scroll of the full page. Often, at minimum, the border for any given table will overlap the text of the next header.
So I am hoping someone can suggest a way to tell the browser 'yes, scale everything inside this div so it displays'. I have looked a number of similar threads but they all seem to be either much more complicated situations or specifically involve the problem of long text being cut off.
One restriction I should note is that the page can not use any resources external to the site (internet connection can not be assumed) nor can it utilize most java-script libraries due to license issues. So a lot of the standard convenience libraries are not available in this case.
Thanks!
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
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.
I have a table.
For example:
<table>
<tr>
<td>apple</td>
<td>big</td>
</tr>
<tr>
<td>pickle</td>
<td>small</td>
</tr>
</table>
after some fancy jQuery...
<table>
<tr>
<td>apple</td>
<td>big</td>
<td>10kg ------ Is this nice to do, any potential issues?</td>
</tr>
<tr>
<td>pickle</td>
<td>small</td>
</tr>
</table>
Just for fun: http://jsfiddle.net/Czcby/
You will end up with three cells on the first row and two on the second row.
This will not normally display, but if your styling has margins/border/padding on table cells, it can effect the display and layout of the table.
The short answer, for me, is yes you do.
The more detailed answer is: you don't strictly need to be consistent but it certainly helps if you want your table to look consistent across browsers. Not to mention the fact that being inconsistent now, even though it doesn't seem to cause problems currently, will have a bigger effect when you want to do more to your table, its styling, or the data inside it.
If you check out this JSFiddle in different browsers, you may see different behaviour:
Chrome and IE8: Render the table as having extra cells that jut out
from the two ordinary cells.
Firefox: effectively looks as though it has extra empty cells in a
third column.
Imagine the complications when it comes to styling for these different situations as your table grows.
Arguably, the colspan property is a way around this. I think colspan is pretty ugly; tables should be presented so that you can look at a column header and scroll down it to see the information relevant to that header. Having some other data reaching across into the column is a distraction. But that depends exactly on what you're trying to do.
Presentation and information design issues aside, there may be no way for someone looking at your code to know how many cells end up in each row. Better to have a consistent number in each row so you can check it quickly and easily should you need to anything else with the table or the data inside it. Useful for debugging.
Hope this helps.
There's no problem to do that, however, you may face some formatting issues as there will now be 3 td's on row one and 2 on row two.
use colspan="2" when a td use 2 columns.
I have a layout made in photoshop and I'm trying to slice it up and put it into a table layout. I'm trying to make a layout using a table that looks like this:
http://imgur.com/eKndd.gif
but when I marked up the table all the widths of the cells seem to be incorrect and not what I want.
My markup is:
<table width="950" border="1">
<tr>
<td colspan="2" rowspan="3" width="268" height="251">rotating pic</td>
<td colspan="2" width="682" height="150">banner</td>
</tr>
<tr>
<td colspan="2" width= "682" height="48">top nav</td>
</tr>
<tr>
<td width="404" height="54">filler</td>
<td rowspan="2" width="278" height="533">right bar</td>
</tr>
<tr>
<td width="191" height="479">left bar</td>
<td colspan="2" width="481">content</td>
</tr>
</table>
The cells need to be of specific width and height for the images, but when rendered none of the widths are correct. What am I doing wrong? Please help. Thanks.
Your heights are too high for the layout you are expecting, also for your banner, top nav and filler to be the same height, you actually have to make their height attributes the same...
Also, not to be a downer, but might I suggest not doing table based layouts? You should considering using CSS.
Layout is not function of HTML. That is what style sheets are for. With that said your code will be completely inaccessible. That means if your code is for any sort of business in the US or UK are wide open to discrimination lawsuits. In addition to accessibility failures your page code will be seriously bloated and will waste your bandwidth and your user's time.
My suggestion is do not use HTML for layout. Practice separation of markup and presentation. Do not use any attributes that have any sort of cosmetic purpose, such as: width, height, border, cellpadding, cellspacing, and so on.
Do your users a tremendous favor and do not use markup for presentation.
I see there are two possibilities
1) The images you are adding are not re-sized to the size which you want to fit into.
2) When adding images using tag try explicitly setting the height and width. Try this
HTML IMAGE LINK TUTORIAL
IF you are new then try the layout using DIV, tables are old school way.
Can we see your code with images included? I would suggest taking out the heights and widths, putting the images in, and then playing around with heights/widths to get the to your liking. Your layout looks overly complicated. Could you go with a simpler 3 column layout and treat the whole header as one element?