|
I have been assigned an intranet project at work and I am having a very hard time finding a way to make my alignment work across browsers. The alignment looks as expected in IE but terrible in Firefox or Chrome etc... I thought that one of you guys that do this all the time might have a easy explanation.
Here is my HTML
In advance I am sorry for the huge post but I have no idea what part is causing the problem...
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="frmTroubleTicket.aspx.vb" Inherits="FSIntranet._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>First Step-Intranet</title>
<script type="text/javascript">
function sLostFocus(fld)
{
fld.className = 'normal';
}
function sGotFocus(fld)
{
fld.className = 'focus';
}
</script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="frmTrouble" runat="server">
<table id="table1" border = "0">
<tr>
<td>
</td>
<td>
<img alt="First Step Logo" src="FS%20logo.JPG" width="35%" />
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p style="font-size:16px;">Click <a href="//10.10.10.2/training">HERE</a> for the Training
Folder</p></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<hr /></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p class="bText">Experiencing
PC Problems ? Let us help...</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
Please fill out the following form detailing the problems you are experiencing.</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<table>
<tr>
<td style="width:20%" style="text-align:right;">Your Name:</td>
<td style="text-align:left;">
<asp:TextBox ID="txtName" runat="server" Width="350px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
 
</td>
</tr>
<tr>
<td style="width:20%" style="text-align:right;">Your Location:</td>
<td style="text-align:left;">
<asp:TextBox ID="txtLocation" runat="server" Width="350px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
Nature of PC Problem(s):
</td>
</tr>
<tr>
<td colspan="2">
<asp:TextBox ID="txtProblem" runat="server" Height="183px" TextMode="MultiLine"
Width="475px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:20%" style="text-align:right;">Email:</td>
<td style="text-align:left;">
<asp:TextBox ID="txtEmail" runat="server" Width="350px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
 
</td>
</tr>
<tr>
<td style="width:20%" style="text-align:right;">Phone Number:</td>
<td style="text-align:left;">
<asp:TextBox ID="txtPhone" runat="server" Width="350px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
 
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="120px"
Height="32px" />
 
<asp:Button ID="btnReset" runat="server" Text="Reset" Width="120px"
Height="32px" />
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<hr /></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
Copyright © 2009 First Step Inc.</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
|
|
|
|
|
I haven't tested your code, but it's a pretty safe bet to say that your layout relies on some of the rendering errors in IE to look as you expect. The page is actually rendered correctly in Firefox.
When building a cross browser layout you should build it for a browser that is not IE, after that you can tweak it to circumvent the rendering errors in IE.
So, I am afraid that the reason that the page doesn't look like you want in all the non-IE browsers is that the code simply is wrong, and there is no easy way around that.
Despite everything, the person most likely to be fooling you next is yourself.
|
|
|
|
|
Thank you for your response, but any help as to why this is happening would be much appreciated. A friend of mine mentioned that the colspan may have something to do with the display problems, if this is the case any suggestions as the correct way of doing this?
Thank you in advance.
Humble Programmer
|
|
|
|
|
I don't know how you want it to look, really. When I try the code in IE7, it looks rather messy. As you pasted the ASP.NET markup code instead of the generated html code, and as I don't have the style sheet that you use, I can't really test it reliably. Do you have the page hosted somewhere where it's possible to test it?
Despite everything, the person most likely to be fooling you next is yourself.
|
|
|
|
|
I am sorry for posting the ASP I was not thinking you would not really be able to use that... I am wanting everything to center to the middle regardless of the screen resolution, browser etc. This looks correct in IE as I have said but not any of the other browsers. Here is the HTML and Css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
</title>
<script type="text/javascript">
function sLostFocus(fld)
{
fld.className = 'normal';
}
function sGotFocus(fld)
{
fld.className = 'focus';
}
</script>
<link href="styles.css" rel="stylesheet" type="text/css" /></head>
<body>
<form name="frmTrouble" method="post" action="frmTroubleTicket.aspx" id="frmTrouble">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTM1NjkyODgwNw9kFgICAw9kFgoCAQ8PZBYEHgdvbkZvY3VzBRBzR290Rm9jdXModGhpcyk7HgZvbkJsdXIFEXNMb3N0Rm9jdXModGhpcyk7ZAIDDw9kFgQfAAUQc0dvdEZvY3VzKHRoaXMpOx8BBRFzTG9zdEZvY3VzKHRoaXMpO2QCBQ8PZBYEHwAFEHNHb3RGb2N1cyh0aGlzKTsfAQURc0xvc3RGb2N1cyh0aGlzKTtkAgcPD2QWBB8ABRBzR290Rm9jdXModGhpcyk7HwEFEXNMb3N0Rm9jdXModGhpcyk7ZAIJDw9kFgQfAAUQc0dvdEZvY3VzKHRoaXMpOx8BBRFzTG9zdEZvY3VzKHRoaXMpO2RkWHdUoG9ul8hkqb+GaYpJXv7dDmY=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCAKHz9r/DQLEhISFCwKV6YbiAQLDhIbeBAKE8/26DALEku2wCALCi9reAwKgt7D9CtwCmlCdneJzxcAseivLc9yIQ8eR" />
</div>
<table id="table1" border = "0">
<tr>
<td>
</td>
<td>
<img alt="First Step Logo" src="FS%20logo.JPG" width="35%" />
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p style="font-size:16px;">Click <a href="//10.10.10.2/training">HERE</a> for the Training
Folder</p></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<hr /></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p class="bText">Experiencing
PC Problems ? Let us help...</a></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
Please fill out the following form detailing the problems you are experiencing.</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<table>
<tr>
<td style="width:20%" style="text-align:right;">Your Name:</td>
<td style="text-align:left;">
<input name="txtName" type="text" id="txtName" onFocus="sGotFocus(this);" onBlur="sLostFocus(this);" style="width:350px;" />
</td>
</tr>
<tr>
<td colspan="2">
 
</td>
</tr>
<tr>
<td style="width:20%" style="text-align:right;">Your Location:</td>
<td style="text-align:left;">
<input name="txtLocation" type="text" id="txtLocation" onFocus="sGotFocus(this);" onBlur="sLostFocus(this);" style="width:350px;" />
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
Nature of PC Problem(s):
</td>
</tr>
<tr>
<td colspan="2">
<textarea name="txtProblem" rows="2" cols="20" id="txtProblem" onFocus="sGotFocus(this);" onBlur="sLostFocus(this);" style="height:183px;width:475px;"></textarea>
</td>
</tr>
<tr>
<td style="width:20%" style="text-align:right;">Email:</td>
<td style="text-align:left;">
<input name="txtEmail" type="text" id="txtEmail" onFocus="sGotFocus(this);" onBlur="sLostFocus(this);" style="width:350px;" />
</td>
</tr>
<tr>
<td colspan="2">
 
</td>
</tr>
<tr>
<td style="width:20%" style="text-align:right;">Phone Number:</td>
<td style="text-align:left;">
<input name="txtPhone" type="text" id="txtPhone" onFocus="sGotFocus(this);" onBlur="sLostFocus(this);" style="width:350px;" />
</td>
</tr>
<tr>
<td colspan="2">
 
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" style="height:32px;width:120px;" />
 
<input type="submit" name="btnReset" value="Reset" id="btnReset" style="height:32px;width:120px;" />
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<hr /></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
Copyright © 2009 First Step Inc.</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
body
{
text-align:center
}
table
{
width:60%;
}
a
{
color:#0000CC;
text-decoration:none;
}
a:hover
{
font-weight:bold;
}
p.bText
{
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.normal
{
background-color: #FFFFFF;
}
.focus
{
background-color: #FFFF00;
}
Humble Programmer
|
|
|
|
|
Surely someone has an answer to this, I would really appreciate ANY help... 
Humble Programmer
|
|
|
|
|
Change the CSS definitions below:
body {
width: 60%;
margin-left: auto;
margin-right: auto;
text-align:center;
}
table {
width: 100%;
}
I was curious why you put DIV tags around the hidden input elements. That seems pointless.
Don't let my name fool you. That's my job.
|
|
|
|
|
I am tasked with migrating our organization’s static website to a more dynamic one with plans for several web applications for our users. I plan on using jquery[^]as my js foundation.
Our users are various school districts which may have a variety of browsers and a variety of security policies, meaning that browser and capability may be dictated by an IT dept and not the user.
Can someone recommend a good example of browser capabilities detection? I’d really like to get a good idea of the browser demographics we’ll be serving before we start developing.
I saw BrowserHawk[^]) which looks incredible. Does anyone have experience with this?
Anyone have other suggestions?
Anything free? (I only ask the free question because it’s easier to start developing when I don’t have to get budget approval. I’m not looking for a free lunch.  )
Thanks!
Matt Penner
|
|
|
|
|
Browserhawk gets alot of its functionality from background Java files, therefore Javascript is lacking.
Either use JQuery.browser and make do with that or This JQuery plugin[^] or use Google Analytics[^] for free which is always good  although Google Analytics isn't in real time.
hmmm pie
modified on Wednesday, March 4, 2009 1:48 PM
|
|
|
|
|
Thanks for the reply!
What do you mean when you say Javascript is lacking?
I do like how BH shows various things like Javascript enabled (not just supported), flash version, Silverlight version (not a requirement though), XMLHttpRequest, file upload, DHTML, ConnectionSpeed, GZip, PNG, browser dimensions, SSL, etc.
So, it's more of browser capability than simply browser detection.
I do like Google Analytics, and I will be using it for tracking, but they don't go into real depth on capabilities.
I suppose I could recreate much of this using jquery on my own but I thought I'd ask before I spent time on it. Plus, if it has been done before and is freely available chances are it will be better than my first implementation.
Thanks!
|
|
|
|
|
Javascript alone doesn't return alot of the functionality that BH has as most of it is returned by the background Java, is what I was trying to say, sorry it was badly worded.
hmmm pie
modified on Wednesday, March 4, 2009 2:28 PM
|
|
|
|
|
I'd recommend to use a JavaScript library that gracefully degrades with browser capabilities (like jQuery) and not rely on Flash, Java, or SilverLight. If you do need to use one of those technologies, the Flash is probably the way to go, though you should pay attention to the last point below.
Also, make sure that you support varying levels of CSS compliance.
Finally, make sure that if you're in the US that it complies with Section 508[^]. If your Web applications don't comply, some school districts won't use it because of federally mandated restrictions.
"we must lose precision to make significant statements about complex systems."
-deKorvin on uncertainty
|
|
|
|
|
Thanks. Good points. I'm planning on standardizing on CSS and jQuery. I don't plan on Flash (I'm not a Flash developer) and I don't plan on Silverlight simply because of the requriement for IT admins to install the client.
Since this is strictly an "internal" app (loosely meaning that I have a very defined set of specific users, not for public use) I am interested in the ability of my pool of users.
Thanks for info about the varying levels of CSS support.
Also, thanks for the info on Sec508. While my current project is for defined business staff I don't think this applies. however, as we begin to offer more and more public info on our site this will be something we need to take into account.
Great stuff!
Matt
|
|
|
|
|
I'm glad I could help.
I work primarily with the Yahoo! User Interface JavaScript and CSS library. I really like it. You can find more information about it at YUI[^].
"we must lose precision to make significant statements about complex systems."
-deKorvin on uncertainty
|
|
|
|
|
Hi Guys,
I am using ASP.Net 2.0 GridView control with more than 4,000 records. In one webform I used 4 views with 1 GridView each. One of these Views has a GridView with more than 4,000 records. And I am also using a repeater. But it is just really frustrating, because it is really very slow. When I clicked the AutoEdit(Edit link) for the 800th record it will postback and I need to find that 800th record again and start changing the cell values, which is not good. Same thing when I clicked Cancel. And by the way, I am using UpdatePanel and no paging method will be used in GridView as part of the client's standards. And also my GridView is inside the Panel control so that there's a Vertical Scroll bar, and it's easier for the user to see all the records from top to bottom using vertical scroll bar.
The following ASP.Net controls I am currently using in this process are:
Multiview, View, Panel, GridView, SqlDataSource, Repeater, UpdatePanel
Structure/Hierarchy:
Multiview1
-----View1
----------Panel1
---------------GridView1(with 100 records)
-----View2
----------Panel2
---------------GridView2(with 150 records)
-----View3
----------Panel3
---------------GridView3(with 50 records)
-----View4
----------Panel4
---------------GridView4(with 4000plus records)
Questions:
1.) How can I load the Page/Gridview fast with more than 4,000 records without using paging method?
2.) How can retain the position when editing a particular row?
I really stumped with this.
Any recommendation?
hifiger2004
modified on Wednesday, March 4, 2009 10:34 AM
|
|
|
|
|
Hi all,
I have an app that is written to support IE 6 and 7.
One mod that I made to it a couple of years ago was to capture the keystrokes via the
document.onkeydown = keyhandler_function;
and then interpreting the window.event.keyCode and performing functionality depending on the key that was entered.
This all worked well and good for over 18 months until someone noticed that there was one circumstance where clicking on a certain control in the document appears to cause the document to lose focus. This means that until I mouse click back in the document someplace, none of my keystrokes are intercepted by the onkeydown redirect.
I have tried debugging this in IE using the script debugger. All I can see from there is that my code doesn't even appear to get control again.
Does anyone have suggestions (aside from dumping ie and getting a real browser like ff  ) on what I can do to figure out what is happening?
I would really appreciate any help that would be offered.
Thanks,
Doug
|
|
|
|
|
hi all
I have a BHO program which tracks visitors on websites
what is the best way to collect the data and send it to my database ? (cookies, AJAX, XML, other )
|
|
|
|
|
hey there. kinda new to this only been coding for about 8 months using basic asp and got set a task by a friend to build a chat client using .asp and ajax and javascripts. im trying to refresh the page using something other than meta refresh. the click is annoying people (if you going to point out to me im going agenst the user knowing the page is updating bla bla bla, please go annoy some one else as ive already read about it). i would like a way to update the page with out the click or a flicker. i call the chat information from a database which stores all the chat messages. any ideas would be helpful.
thanks
p.s please keep it simple for me as im new to coding
PETVAMPIRE - NEWBIE
|
|
|
|
|
petvampire wrote: if you going to point out to me im going agenst the user knowing the page is updating bla bla bla, please go annoy some one else as ive already read about it).
  take it easy, mate. The first rule of thumb of getting help is humbleness.
petvampire wrote: i would like a way to update the page with out the click or a flicker.
How about timer?
petvampire wrote: any ideas would be helpful.
Hmmm, did you said asp? Well it is doable but not starightforward. Look at this one[^]
Yusuf
|
|
|
|
|
I would advise you to use AJAX. Here is a good article that details different scenarios for its use:
[^]
Good luck - rastaquere AATT gmail
|
|
|
|
|
Hi,
Does anybody know why it's possible for myself and a few of my colleagues to see the tick symbol (✔ - 10004) in IE7 (V7.0.5730.11) but some of my other colleagues using exactly the same browser get a little empty square (presumably as the browser cannot interpret the character entity)? We're stumped.
Cheers,
Chris Chambers.
|
|
|
|
|
Did you check the browsers' character encoding setting? (Tools->Character Encoding).
Yusuf
|
|
|
|
|
Hi Yusuf,
Thanks for your response.
It turns out it was because the tick symbol isn't part of the character entity set in the HTML4 spec, and so it all came down to whether the individual machine contained a font set with the corresponding glyph. There are only a couple of fonts that have that tick glyph (one of which is Arial Unicode MS), and it turns out the machines that displayed the character correctly had the full set for that font installed and the ones that didn't display it correctly only had a subset installed.
In the end we went for a Wingdings tick to get around the problem.
Cheers,
Chris.
|
|
|
|
|
Hi
Im doing a project for uni, testing the performance of a particular database in a web environment with high concurrent users accessing it. My main aim is to find if there is any difference in performance when I change some parts of the code. My question is does it matter if I use a free host with limited bandwidth? Are there any other methods on finding out how to measure the performance of the database with thousands of users accessing it without purchasing a host?
Signed
Poor Student
Please help!
|
|
|
|
|
pluckyducky wrote: My question is does it matter if I use a free host with limited bandwidth?
does the bandwidth given limits you the number of concurrent users you want to test? If no, then there is no issue there.
Yusuf
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
