What does it mean when the tables are displayed incorrectly until I bring up the inspector, and then everything magically displays correctly?
I have a table to display, and I want borders around cells. Some of the cells simply do not display borders consistently. If I refresh the page, cells will be haphazardly outlined. If I then choose the Developer>Inspector option, then all the cells instantly become correctly displayed. Also, if I resize the browser, the table will display correctly. When I display the same page in Chrome the cells are always outlined. I think the real clue is that opening the inspector causes the table to display correctly ... what is the inspector doing? I am using version 53.0.2 of Mozilla.
Here is the table styles:
<style>
.statusTable {
width:100%;
}
.specialRow td {
padding:3px;
padding-top:20px;
background-color:#EEE;
}
.outlinedRow td {
padding:3px;
border-width:1px;
border-style:solid;
border-color:grey;
}
.statusTable tr th{
padding:3px;
}
</style>
There are two styles of rows, either 'specialRow' or 'outlinedRow'. When the page is refreshed I get this:
But if I start the inspector, the display is corrected:
Any ideas of what I should look for?
Edit 1
This is definitely NOT related to zoom. I see the same problem at any level of zoom. Refresh paints a haphazard grid at 100% scale, and the grid stays haphazard when I zoom in and zoom out. Sometimes, when zooming additional parts of the grid will disappear.
I has tested with border-collapse: separate border-collapse: initial and also border-collapse: collapse and the problem happens in all cases.
The problem was that the "tbody" tags were not matched. I had an opening <tbody> and another at the end of the block -- I did not have the slash. It is not surprising that causes a lot of problems with layout. However, strange thing is that bringing up inspector apparently goes and checks the validity of the HTML at that point in time, correcting the problem without any indication. Chrome seems to correct on the initial page load.
Fixed the tbody end tag and everything works correctly.
Note: I did notice a dependency on bootstrap. If I removed the bootstrap CSS files, the entire layout was broken, but the table borders were correct. I tried tags other than tbody and did not have this problem. So there is some indeterminate connection between unbalanced tbody and boostrap and borders, but I don't have time to find any more details.
Related
The link below is where to find my website that I am making for a university project and for a client.
https://homepages.shu.ac.uk/~b7009049/wordpress/
Once the webpage loads up, you will be introduced with a page title populated with an image and two buttons. One will lead you to the About us and the other will take you to services. Click on the services button as that's where the problem is please.
Basically there is a white gap and I want the image below to completely fill up the page. Like a full screen except that you are not pressing F11 .
I don't know where the issue is. If I remove the header page, it does not do anything to clear the gap. So I don't think the header is the problem.
I am using fusion slider + a plugin called layerslider. If that helps.
I can provide a screenshot of what I am editing upon request if needed.
Thank you very much.
You have two things producing white space at the top of https://homepages.shu.ac.uk/~b7009049/wordpress/services/
One is padding applied to the "main" element. You can get rid of that with CSS:
/* REMOVE MAIN TOP PADDING ONLY ON THIS PAGE (id-2546) (AT LEAST FOR NOW) */
.page-id-2546 #main {
padding-top: 0;
}
You might also want to get rid of the padding at the bottom of #main element on this page - padding-bottom: 0, of course
That will still leave a 20px white bar at the very top, produced by a stray 'p' element that has a bottom margin of 20px. Though this paragraph happens to contain a jQuery script (which probably shouldn't be there), there's another stray p element further down the page - also contained within "ls-" elements - also producing a 20px white separation between two full-width image elements, that happens to be empty.
I don't know exactly where these p's came from. You might have to dig into the applications involved - both Layer Slider and, I think, the Fusion Page Builder - and how they were deployed here, to remove the unwanted separation where it originates.
If they can't practically be cleaned up, you might have to correct via CSS again. Just to get rid of the effect on display on this page, you might try
/* REMOVE MARGIN ON POST PARAGRAPHS ON THIS PAGE */
.page-id-2546 .post-content p {
margin: 0;
}
You could also try something like the following, if you were concerned about affecting other ".post-content" ps outside of Layer Slider.
/* TARGET LAYER SLIDER .post-content p TO REMOVE WHITE SPACE */
.page-id-2546 .post-content .ls-fullscreen-wrapper p {
margin: 0;
}
Another approach would be to apply a negative margin to .ls-fullscreen-wrapper:
/* TARGET LAYER SLIDER WRAPPER TO REMOVE WHITE SPACE*/
.page-id-2546 .ls-fullscreen-wrapper {
margin-top: -20px;
}
Without actually working on the installation or examining it more thoroughly, I couldn't say for sure that the code I've provided would be sufficient and also wouldn't produce undesirable consequences, but it might be a start. You could add the snippets to the Customizer Additional CSS box, and see how things turned out.
ADDITIONAL NOTE AFTER COMMENTS
I've gone back to the page and it seems that you have successfully added code eliminating the 20px post-content p margin, but I don't see anything applied or applied and overruled regarding the 90px top (and bottom) padding on #main.
I don't know how exactly you're trying to address that problem. I previously recommended utilizing the Wordpress Customizer (assuming you're in Wordpess 4.7 or later) - see https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/.
From inspection I can see that the unwanted padding in question is added via the theme/Fusion stylesheet. The Customizer will add your new CSS to the underlying html, after other stylesheets have been loaded, so should override duplicated selectors. If it's still not taking, you could try, adding !important to the new styles. I think most coders would view this method as a kludge, but all of this after-the-fact correction effort is kludge-y.
/* LAST RESORT KLUDGE TO REMOVE 90px TOP PADDING ON #MAIN ON IDENTIFIED PAGE */
.page-id-2546 #main {
padding-top: 0 !important;
}
If that doesn't work - if inspection of the element doesn't show the code being applied at all, for instance - then I'd look to caching issues and peculiar theme characteristics, not to mention typos...
What worked for me was adding this code to my css
.ls-overflow-visible {
overflow: hidden !important;
}
in my case the white piece above my menu was not caused by the padding but by an overflow that was only there when I switched to full width modus. You could of course delete this code:
.ls-overflow-visible {
overflow: visible !important;
}
from the plugin css, but it will return when you perform an update.
I am trying to make a print-friendly resume. Everything is working, except for an issue regarding the background image.
I do not want to have any margin on the print page, since otherwise the background image looks messed up:
https://www.dropbox.com/s/h2zttd8u6r6hq0g/Screenshot%202015-01-08%2014.38.14.png?dl=0
However, if I do not use any margins, the background looks good but I am unable to do any margin on the second (or other pages):
https://www.dropbox.com/s/16vgu3nahfgeipr/Screenshot%202015-01-08%2014.38.55.png?dl=0
body {
margin: 30px 0;
}
That works for the first page, but unfortunately this does not work for any page breaks. Is there a way to do padding/margin in relation to the top/bottom of a print page?
Edit: sorry for the hideous example, but this is basically the code:
http://jsfiddle.net/yugv84qw/
If you press print and save to pdf (in Chrome at least), you'll see that the background fills the entire page. However, when you include
#page {
margin: 1cm 0;
}
You will see that the margin I want works, but then the background also uses that margin. In other words: I want the background to stay page filling, while there is a top and bottom margin for text on every page.
You are fairly limited by the vendor implementation of the CSS paged media module, that said, you are able to use the module to target the first page by using the :first psuedo selector, e.g.:
#page:first {
margin: 0
}
Should support / lack of implementation prove an issue- you will need to resort to adding your content into a series of elements which match the output page dimensions, then removing the margin/padding on the first.
Sadly, the control of printing from the web, even in this day and age, is not an easy process.
I am having an issue with long table in IE based browser.
Basically I have table with large number of columns, so it is scroll-able in X-Direction which is fine. But when I scrolls table horizontally in IE 10, some random vertical bars appears on table as shown in image.(In the region that becomes visible by scrolling). Please observe the position on scrollbar.
When I click on any column, it disappears and renders fine. I think think it is some browser related issue., as it works perfectly in all other browser.
But is there any method I can solve this?
I am using Twitter's Bootstrap.
Here is the CSS code for table:
table.query_result_table {
width: 2500px;
max-width: none;
cursor: pointer;
}
Note: I am using datatables plugin for this table.
This answer refers to webkit based browsers, but maybe it will work in IE as well.
Try capturing the scrolling event, and after it ends, scroll down 1px and back up 1px.
What is the best practice to print a HTML table that contains cells with about 5cm height that should not be broken to different pages.
I already made print.css and definied
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
But :
in Chrome the picture in the HTML page is split across pages
in Firefox, the first page is empty, the table starts at the second page and the rest of the table is cut away (page 3 empty again)
IE I did not dare to try yet
Browser support for the page-break CSS properties is spotty, especially on table parts. If you want to prevent page breaks within the content of a cell, I would suggest nesting the content in a div, and setting "page-break-inside: avoid;" on the div. If you need to support older browsers that don't implement the page-break-inside property at all, you should also set "display: inline-block; vertical-align: top;" on the div.
Also, be aware that if the height of the printable area (that is, page height minus top and bottom margin) is less than the height of your cell content, then it's impossible for the browser to avoid breaking it unless it can somehow warp the fabric of space (maybe Firefox has a "-moz-" property for that?).
I'm trying to get a website to display properly in IE6 and IE7. Here is a screenshot of how it looks in IE6.
alt text http://img225.imageshack.us/img225/4779/screenshot20091006at239.png
IE8, Safari, Firefox, etc. all display this site correctly. Could someone give me a hint as to what is causing the distortion in IE6?
If you want to take a look at the page source, the site is: www.devaswami.com
Get the CSS from here.
You're using an auto-layout table for the navbar, and it has colspans. This confuses IE, which is not very good at working out how big tables need to be when there are colspans. It makes the table wider than you need, which makes your cells wider than expected, which makes the ugly yellow background show through and it doesn't line up.
To fix it, set the style table-layout: fixed; width: 970px; on the table element, and add one <col> element for each column, each with a width: ...px style that tells IE exactly how big to make each column. Then it can't make any mistakes (and also larger fixed table layouts render faster).
To fix it better, drop the layout table and use positioned divs for the nav links. You could then also lose the silly image slicing and have a single GIF for the whole header background with the photo and links positioned over the top of that.
(Also it is worth fixing the validation errors both in the HTML and in the CSS. You are using // as a single-line comment in your stylesheet, but there is no such thing in CSS; you will only confuse the parser into dropping rules.)
Ummm at a glance, you have something that is float left and you have a margin left on it?
#foo {
float: left;
margin-left: 20px; //20px in all browsers except IE6 where it will be 40px;
display: inline; //this will fix this issue
}
There's a lot of possibilities and it's hard to just guess based on the screensnap. However, one big step towards making IE 6 and 7 behave better is to declare the doctype at the top of the document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
That's for HTML 4.01, you'd have to update it to match what you're specifically using if it's not HTML (i.e. XHTML). That alone helps with some of the basic problems, but not all of them. If that doesn't do it, Google "IE6 css hacks" and you'll find lots of potential information that may apply to your context.
Edit: I suggest you fix the errors related to missing/improper end tags:
Error Line 199, Column 194: end tag
for element "a" which is not open
Error Line 200, Column 49: end tag
for element "p" which is not open
Source: http://validator.w3.org/check?uri=http%3A%2F%2Fdevaswami.com%2F&charset=(detect+automatically)&doctype=Inline&group=0
After that's done we can deduce that it's not a markup related issue.
Original answer:
Try applying haslayout to every element and using display:inline on any floated element:
#nav li { display:inline; } /* the selector *must* be floated and have horizontal margins in the direction of the float. */
* { zoom:1; }
For anything that was fixed by the zoom:1, apply a width/height and that will trigger hasLayout.
Though it might be useful if you actually posted some source code.