This is inline code of a .aspx page:-
<table>
<tr>
<td>Some static data</td>
<td>Text box control</td>
<td><div id="div1"></div></td>
</tr>
</table>
Third <td> has a div 'div1'. This div does not have any data most of time on that page. But sometimes i need to display some dynamic data there). Now problem is, if there is no data in div 'div1', firefox consider it as a space in it and takes approx. 5px space in browser. (But IE8 in compatibility view is fine)
What is the work around here for firefox?
I'd consider if you actually need the div - I guess you are filling it with data in certain circumstances by targetting the ID, by why not just target the table cell instead?
<table>
<tr>
<td>Some static data</td>
<td>Text box control</td>
<td id="div1"></td>
</tr>
</table>
Try setting all margins and padding to 0 at the start of your CSS.
*{
margin: 0;
padding: 0;
}
And then you can set those values explicitly where required.
That's because you have a padding applied to the td elements. You could do this: <td style="padding:0"><div id="div1" style="display:none; padding:1px;"></td>
And shift the padding to the div element and the hide it when it is empty. Firefox doesn't apply any padding to it in that case. But, it should still look like other tds when there is data applied to it.
It sounds like you need to reset your styles. There's a couple of good ones out there including Eric Meyer's CSS reset and Yahoo YUI2 CSS reset.
Related
This is how mine looks like
I want it like this
the first picture, it always happened when the there are many column in a table (eg: having 8 column per table) while the second picture only having like 5 column per table
i've tried using vertical - top but i might have done something wrong. both button also having different class.
Make a div and wrap the two icons and give some class then add this CSS to that div,
.that_div_class {
display: flex;
align-items: center;
justify-content: center;
}
After this, you can give other CSS to the two icons as you wish.
To ensure that the action column's icons are horizontally aligned, set a minimum width for the column. This will prevent the icons from being separated from each other horizontally.
Example for using Bootstrap:
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" style="min-width: 150px;">Action</th>
</tr>
</thead>
...
</table>
I'm creating a gif file using a camera in c#, then sending that gif to the persons email. I've attached the gif and created an html email, then display the gif inline using an img tag with the src being the cid of the attached gif file.
Its working perfectly except for androids gmail client. When you view the email in the android gmail client, the gif flashes, showing the background either between frames, at the end of the gif sequence, or sometimes showing the gif once then the gif just disappears.
I am using a table (it seems divs made it worse), and no background images or colors. Sometimes it seemed like certain things i did fixed the problem because it was playing just fine, but after opening the email a couple times or sending a couple more, the gif would do it again (start flashing).
is this a bug in the gmail client or something? nothing i've done seems to help. The gif plays perfectly in every other client i've tried and in the browser works just fine.
Is there something i could try that might fix this problem?
i'm sure people will want to see some code, so here it is, super simple
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="min-width:638px;">
<tr>
<td align="center" valign="top">
<table width="640px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="78px" height="482px" align="center">
<img alt="xxxxxxx" src="cid:B01_frameLeft" border="0" style="display:block;"></a>
</td>
<td width="484px" height="484px" align="center">
<img alt="xxxxxxx" src="cid:B02_gif" border="0" width="484" height="484" style="display:block;"></a>
</td>
<td width="78px" height="482px" align="center">
<img alt="xxxxxxx" src="cid:B03_frameRight" border="0" style="display:block;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
So it seems that if there are possibly more than one "layer", the gif "may" flash. I had multiple tables wrapped up in a single table. after removing the container table, the gif stopped flashing. I wonder if android gmail was having a problem because it maybe didn't know if it should display the next frame of the gif or the containing table? I still don't know for sure, but i'm certain that this can be considered a bug, i'm really surprised there is very little on the internet about this.
anyway, to fix my problem this is what i did.
removed all bgcolors and backgrounds from all html in the email
removed container table which contained tables for the layout, where one of them contained the gif
changed from using divs to using tables
not sure if all that was needed or not, but after doing those things i don't have a problem with the gif flashing anymore
I am using C# ASP.NET that uses html tables. The problem comes in to this specific panel that I am working with where my column inside the table is not expanding for what ever reason even though my other panels the colspan property works correctly except for this one.
Here are some screenshots to explain what is happening.
Not even though I am setting the colspan to what ever value the column does not expand. Also I know there is two tables within this panel and there is a reason to why I have two, so it's not a mistake. Basically I want the left button to stay left of the panel and secondly I want the right button ("Next") to be as far right of the page as possible.
Any ideas why this is happening or is there a better solution to this problem?
By the way I am using Google Chrome to test if this adds any value to the question.
Not sure why you are using ColSpan when you have only 1 row in second table. To achieve what you are expecting, do the following:
set Width="100%" in second table
in first "td" for back button, include "align=left"
in second "td" for next button, include "align="right"
colspan works with multiple rows; you are expecting it wrongly
<table id="tblButtons" runat="server">
<tr>
<td colspan="3">
column that covers three columns
</td>
<td align="right">
right button
</td>
</tr>
<tr>
<td>
column 1
</td>
<td>
column 2
</td>
<td>
column 3
</td>
<td>
column 4
</td>
</tr>
</table>
column 1, 2, 3 will be covered by the td having colspan="3"
There aren't 100 columns in your page, so that value is relatively worthless. You can (and should) use CSS to achieve your desired width. To have the table itself fill the page, you need to add a style="width:100%;" to it, then your cells will expand to split the difference.
colspan only changes how many columns in a table a cell takes up, not how wide it actually is. Use style="width:..." (or set it in CSS) to set the width. What's happening right now is your table is being divided into one hundred and one imaginary parts (the left side having one hundred parts, the right having one).
An example of using colspan correctly:
<table>
<tr>
<td colspan="2">
Hello world
</td>
</tr>
<tr>
<td>
Left
</td>
<td>
Top
</td>
</tr>
</table>
I am developing Web Application. In that i am using so many Div to open pop ups. Now my requirement is to create dynamic Div for that popup and all the content of that div comes from the Database.
So can anyone tell me how to create Div dynamically programatically?
My Sample code for Div..
<div id="Popup" runat="server" class="hidden-content">
<table width="auto">
<tr>
<td style="font-size: 20px; font-weight: bold; text-align: center;">
<p>
</p>
<b>Diabetes</b>
</td>
</tr>
<tr>
<td style="font-size: 15px; text-align: left;">
<p>
Type I diabetes (also known as juvenile diabetes) is the less common form of diabetes.
It usually is diagnosed during childhood or teen years and requires treatment with
insulin.
</p>
</td>
</tr>
</table>
</div>
I would insert either a PlaceHolder or a Literal control into you page and insert the html controls/text on PageLoad or PageRender.
If you use the Placeholder control you can create the content using the HTML controls in System.Web.UI.HtmlControls.
By using the Placeholder control, you could also write a custom WebControl that you could re-use in other locations within your site. This could then be added to the placeholder control at runtime.
For a liteal, you can just append the control div HTML as text.
you can add html using stringbuilder
Use below cose to add html programmatically.
using System.Text;
StringBuilder strdiv = new StringBuilder();
strdiv.Append("Put your Html here");
strdiv.Append("Add much as you want ");
after that assign that stringbuilder to label so get one label in html with id "htmllabel"
Add below line to append html in your label.
htmllabel.Text = strdiv.ToString();
You need to use the defined server control called asp:Panel, which gets rendered as a div. Create your panels programatically and add them to your page: e.g. Page.Controls.Add(myPanel);
I was working on a web application in which i need same thing as you require from here you will get some idea and make some modifications as per your requirement.Check my article here
If you have any doubt then ask.
Thanks :-)
I have an ASP.NET web app that retrieves a JSON collection and outputs the content of the collection, via LINQ to a StringBuilder that has a lot of table and other tags in HTML, with my data pieces interspersed.
This is what I mean:
sb.AppendFormat(#"
<table cellpadding=""0"" class=""TableStyle"" style=""width: 70%; height: 100%;"" cellspacing=""5"">
<tr>
<td class=""PicHolder"" style=""width: 151px"" rowspan=""2"">
<a href=""http://twitter.com/{0}"" target=""_blank""><img height=""45px"" width=""45px"" src=""{1}"" alt=""{4}""></td>
<td style=""width: 100%; height: 36px;"" class=""LinkTitleCell"" valign=""top"">
<span class=""BoldText"" style=""height: 23px"">
<span class=""HyperLinks"">{6}</span></span></ br><span class=""NormText"">
</tr>
<tr>
<td style=""width: 100%; height: 10px;"" class=""MentionedXTimes"" valign=""top"">
<span class=""NormText"">Mentioned {3} time(s).</span></td>
</tr>
<tr>
<td style=""width: 151px"" class=""UserName""><span class=""UserName""><img height=""1"" src=""spacer.gif"" width=""1"" />{4}:</span></td>
<td style=""height: 23%; width: 100%"" class=""WhatUserSaid"" valign=""top"">
{5}</td>
</tr>
<tr>
<td style=""width: 151px"" class=""UserName"">Info:</td>
<td style=""height: 24px; width: 100%"" class=""LinkTitleCell"" valign=""top""><span class=""NormText"">{7}</span></td>
</tr>
<tr>
<td style=""height: 9px; width: 151px""></td>
<td class=""LinkGreen"" style=""height: 9px; width: 100%"" valign=""top"">{2}</td>
</tr>
<tr>
<td style=""height: 9px; width: 151px""> </td>
<td class=""TableSpacer"" style=""height: 9px; width: 100%"" valign=""top""> </td>
</tr>
</table>",
count.First.userName, count.First.imgURL, newdata, count.Count, count.First.userName, count.First.txtDesc, (title != string.Empty) ? title2 : newdata, metaDesc2);
You can see all of the {0} and {1} data place holders I am using in the code above, and the reference to the data required at the end of the StringBuilder method call.
I want to be able to separate the HTML from my app so that I can edit it more easily without having to escape all of the "" quote marks.
So I need a template that has place holder for where my data goes. This is a noob question and I know exactly what want but not how to implement it.
Any help much appreciated!
I'm getting some bad vibes here, like you're building the entire page or at least a very large part of it inside a single stringbuilder for output. This is a very bad thing to do.
If you want to "accumlate" your page string like this, you should write to the Response object directly instead. The StringBuilder forces you to keep all that html in memory on your server for every request, and memory use like this on a web server just won't scale well when you have many requests going at once. Even worse, there's a chance of these stringbuilders ending up on the Large Object Heap. If that happens it could ultimately cause OutOfMemoryExceptions. By contrast, the Response object buffers your html as you write it, and so you only use memory per request up to the size of the buffer. That will scale/perform much better.
Even better, though, is if you work with ASP.Net to make this happen rather than against it. That solves both the scaling problem and your "templating" problem. For example, I'll show you a better way to adapt just a small snippet of the html you posted. First write your .aspx markup like this:
<table cellpadding="0" class="TableStyle" style="width: 70%; height: 100%;" cellspacing="5">
<tr>
<td class="PicHolder" style="width: 151px" rowspan="2">
<asp:HyperLink runat="server" ID="TwitterLink" target="_blank">
<asp:Image runat="server" ID="TwitterLinkImage" Height="45px" Width="45px"/>
</asp:HyperLink></td>
...
</tr>
And then use code like this in your .cs code-behind:
TwitterLink.NavigateUrl = "http://twitter.com/" + count.First.userName;
TwitterLinkImage.ImageUrl = count.First.imgURL;
TwitterLinkImage.AlternateText = newdata;
There you go. Clean separation of markup and code/data that's more readable, avoids all the messy escaping, and will perform even better than your stringbuilder. If you have a lot of records that are exactly the same and you still want fine control over your HTML output, use an <asp:Repeater> control and set up markup like this in it's ItemTemplate. Then c# code will go in the repeater's ItemDatabound event.
As with most things there are a number of ways of doing it; from the pure code behind which you have as your original question through to the pure client side / jquery templating.
Another option would be to have a user control with the html part of the output in. This could have an associated property with the data object assigned to it. You could then access the data in the html you would put somethihng like:
<%= MyClass.Property %>
Where ever you want that value to appear in the html.
So what I'd look to do (not tested as don't have VS installed on this machine) is the following:
create a class which will store the data which you will be receiving in json format
Create the user control
Specifiy a property on the control which takes an instance of your class defined above
Add the control onto your aspx page
In the code behind of the aspx page set the retrieval and parsing of the json data in the Page_Load event.
Still in the Page_Load; assign the newly created instance of the object to the usercontrol property
Once this is done when the page renders the user control can access the data and display it through the mechanism (bit of code) above.
Hope this helps, been doing a lot of MVC stuff recently so my Web Forms is a little rusty :-)
If this doesn't make much sense, I appologise in advance and if you let me know I will try and update the post with some more code examples to try and make it make more sense :-)
Perhaps it's better to return the data as json to the browser and there use jqGrid or jQuery template.
Grz, Kris.