Hi this question might be asked a few times, but I can't find a specific example for what I'm doing, I have a footer:
<div id="Footer">
<table>
<tr>
<td colspan="3">
<span>Copyright</span>
</td>
<td>
<asp:Label runat="server" ID="lblVersion"></asp:Label>
</td>
</tr>
</table>
</div>
and this CSS:
div#Footer
{
padding: 4px 1px 1px 0px;
margin: 0px;
margin-top:80px;
border-top: thin solid #000000;
height:1.5em;
background-color:#333333;
color:White;
}
In IE6 this worked fine, in IE8 in resolutions of 1280 x 1024 and above this works fine, but below this resolution or when the IE window is made smaller, the footer floats, I've tried setting position/float/clear/display style settings with no luck, does anyone have any ideas how to make this stick at the bottom in smaller screen resolutions?
read this :
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Related
I am trying to insert code blocks into my blogspot.
Here is the custom CSS i added in the blogger.com for my blog under Advanced - Add CSS section
#scripttable {
border-collapse: collapse;
border-spacing: 0;
width: 100%
border: 1px solid #ddd;
}
#scripthead {
text-align: left;
padding: 8px;
background-color: #FFFFFF;
color: black;
}
#scriptdata {
text-align: left;
padding: 8px;
background-color: #00003F;
color: white;
}
In the html i am using as below
<table id="scripttable">
<tr><th id="scripthead">Heading</th></tr>
<tr>
<td id="scriptdata">
<pre>
This is my code block to be displayed
</pre>
</td>
</tr>
</table>
Now i am able to get code snippet highlighted correctly when viewed on desktop but on mobile devices the table is overflowing the width of blog post.
Here is my blog which when viewed on mobile is not correct. Kindly help me know how i can fix this so that the table adjusts automatically on mobile device
https://novicejava1.blogspot.com/2020/06/how-to-build-and-deploy-python-kivy.html
I was able to fix the issue of table width by updating the html content by wrapping my table in div container with style="overflow-x: auto;".
<div style="overflow-x: auto;">
<table id="scripttable">
<tr><th id="scripthead">Heading</th></tr>
<tr>
<td id="scriptdata">
<pre>
This is my code block to be displayed
</pre>
</td>
</tr>
</table>
</div>
Now the rendering is happening properly on mobile device after this change.
Over here, this question has been answered for IE and Chrome, but the proposed solution does not seem to work in Firefox 16, 45, and probably all versions in between.
Basically, the proposed solution is as follows:
table,th,td {
border: 1px solid black;
}
<table>
<tr>
<td style="height:1px;">
<div style="border:1px solid red; height:100%;">
I want cell to be the full height
</div>
</td>
<td>
This cell
<br/>is taller
<br/>than the
<br/>first one
</td>
</tr>
</table>
By setting the height of the td to 1px, the child div can set height:100%. In Chrome and IE the 100% is then interpreted as "the height of the cell", while in Firefox it seems to become the max height needed for the divs content.
Running the example above in Firefox will illustrate this intuitively...
So, I'm looking for a solution that -also- works in Firefox.
Try adding display: table to your nested <div>, and change height: 1px to height: 100% on the parent <td>
Example that works in Firefox, IE and Chrome
table,
th,
td {
border: 1px solid black;
}
.fix_height {
height: 1px;
}
#-moz-document url-prefix() {
.fix_height {
height: 100%;
}
}
<table>
<tr>
<td class="fix_height">
<div style="border:1px solid red; height:100%; display:inline-table">
I want cell to be the full height
</div>
</td>
<td>
This cell
<br/>is taller
<br/>than the
<br/>first one
</td>
</tr>
</table>
Try the following it works in Firefox.Just you have to replace the % with pixels for height
table,th,td {
border: 1px solid black;
}
<table>
<tr>
<td style="height:1px;">
<div style="border:1px solid red; height:100px;">
I want cell to be the full height
</div>
</td>
<td>
This cell
<br/>is higher
<br/>than the
<br/>first one
</td>
</tr>
</table>
I've a GridView in a scrollable div:
<div style="overflow:auto;height:500px;border:1px solid #c1c1c1; border-collapse:collapse">
<asp:GridView ID="gridID" BorderStyle="None" runat="server" style="margin:0px;" GridLines="None" Width="100%" CssClass="cssGrid">
(...)
</asp:GridView>
</div>
That's rendered like:
<div style="overflow: auto;height:500px;border-collapse:collapse">
<div>
<table class="cssGrid" id="ctl00_MainContent_gridID" style="border-style:None;height:100%;width:100%;border-collapse:collapse;margin:0px;" cellspacing="0">
<tbody>
<tr class="CollapsibleRow">
<td onclick="collapsible('SezioneUno', 'ctl00_MainContent_gridID')" colspan="13" align="center">SezioneUno</td>
</tr>
<tr class="SezioneUno" align="center">
<td style="width:4%;">
<span id="ctl00_MainContent_gdIncongruenti_ctl03_label">142454</span>
</td>
(...)
</tr>
(...)
</tbody>
</table>
</div>
</div>
and CSS like this:
.cssGrid
{
width: 99%;
background-color: #fff;
margin: 10px 10px 10px 10px;
border: solid 1px #525252;
border-collapse: collapse;
word-wrap: break-word;
}
.cssGrid td
{
padding: 2px;
/*padding-right: 10px;*/
border: solid 1px #c1c1c1;
color: #717171;
max-width : 90px;
font-size: 8pt;
}
And now I've a double border only on the left side, because on the right I've the scrollbar. It's possible to eliminate it? I can't eliminate it directly from the div, because I need at least on the bottom of it or while scrolling the grid seems to be appear from nothing. I can't leave only on the bottom of the div because the grid is partially or totally collapsible, then I need always a box around them.. One solution is to set border-left to 0 on grid td, but how I can do that without css or without adding a new css class that change from the first just for the border-left?
Same grid when half collapsed (is in a scrollable div):
I don't want the double border on the left. I want a unique border, like meant to be with border-collapse.. I know I can get it doing border-left: 0px on css on .cssGrid td, but how can I do the same without affect all the cssGrid gridview in the project?
I have a problem with e-mail clients reverting my styled <hr/> to one with just a solid line.
The following is my mark-up, looks fine in Chrome and IE but Outlook always reverts the dotted line to a solid one.
<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>
I have looked at Campaign Monitor but nothing particular to guide me there.
All answers appreciated.
I would imagine it's because outlook uses the Microsoft word rendering engine, rather than a HTML engine, and a hr tag would just get reverted to a solid line as in msword.
I'd probably try using a full width table->cell or div and style that instead of using an hr tag.
<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;"> </td>
</tr>
</table>
nbsp is in there in case the rendering engine doesn't recognise empty cells.
Based on the other answers, I found this to work best:
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;"> </td>
</tr>
</table>
<br>
The width seems to be needed on table in % or preferrably (as per https://www.campaignmonitor.com/resources/will-it-work/guidelines/) set it in px on the td if possible.
The border-bottom shorthand seems to work fine, where the longhand versions as mentioned in kolin's answer don't in Outlook.
EDIT: What I found to have used previously and also works, at least in Outlook (would be nice if anyone who can, could test that in other clients), is a <hr>based approach.
<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
Rather inelegant and only useful for a known fixed width but I'm finding that these are the terrors visited upon you when trying to fix formatting in html emails'.
<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
You can use this example:
<div style="border-top: 1px dotted #999999;"> </div>
It will only work against white background unfortunately
Need to declare a font-size, otherwise " " messes with the height.
<tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px"> </td></tr>
I have the following simple table to reproduce the issue:
<TABLE>
<TR>
<TD style="border: black solid 1px; width:24px; height:68px; margin:0px; padding:0px" >
<IMG
style="width: 24px; height: 68px; margin:0px; padding:0px; border:none"
src="Image24x68.png">
</TD>
</TR>
</TABLE>
The image is actually 24x86 pixels large. The border is just to mark the cell's boundaries. There is no css file assigned to the document.
I want the cell to be exactly as large as the image.
The problem is: the table cell gets always rendered a few pixels too high in any IE version (6, 7, 8) while it works fine in Firefox and other browsers.
Is there any solution / workaround for this?
You can set the images to display as block elements and this should remove the space.
<IMG style="display: block; width: 24px; height: 68px; margin:0px; padding:0px; border:none" src="Image24x68.png">
Looks like this: http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/
Remove all whitespace between the image and the closing td tag. In front of the image it doesn't seem to matter.
I tried all the other solutions on this page:
using display:block
removing whitespace in the <td> tags (i.e. I used <tr> and <td> tags without putting any whitespace between them)
using
padding:0px;
border-spacing:0px;
border-style:none;
border-collapse: collapse;
margin:0;
overflow: hidden;
Except for approach (1), these didn't work on IE. After tearing my hair out for three hours, I found this better solution: add a hspace=0 attribute to the image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1"
class="ImageHeader" hspace="0">
I set up an example of this at http://www.PrintersRose.com.
Try the following:
<table>
<tr>
<td style="border: 1px solid black; font-size: 1pt;">
<img style="width: 24px; height: 68px; margin: 0;
padding: 0; border: 0" src="Image24x68.png" />
</td>
</tr>
</table>
(PS Use lower case for HTML tags.)