Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Gridview issue in IE (asp.net web application)

Status
Not open for further replies.
pinkpoppy

pinkpoppy

Programmer
Jul 6, 2011
75
US
Hi, I am having issues with my gridview when testing the website in IIS. The site is being developed in asp.net -web application

We have a css style in the application, but can't seem to figure why the gridview keeps display at the bottom of the page in testing. It works fine in Firefox.
I'll be glad to post snips of the css if anyone can suggest any tips or help me out.

Thanks.
 
Sort by date Sort by votes
Need rendered HTML and the styles that are being applied to the table in question. It is probably a float/width issue.

Lodlaiden

You've got questions and source code. We want both!
Oh? That? That's not an important password. - IT Security Admin (pw on whiteboard)
 
Upvote 0 Downvote
Hi, thanks so much for you reply.

Here's the gridview .cs
<asp:GridView ID="Search" runat="server" AutoGenerateColumns="False" >
<Columns>

<asp:BoundField DataField="Unique_ID" Visible="False" />

<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Birthday" HeaderText="Birthday" />

</Columns>

</asp:GridView>

I have these styles and I'm not sure which styles its applying to:

.case-search
{
width:180px;
float:left;


[class*="span"] {
float: left;
margin-left: 20px;
}


#search-table {
background: #fff;
border: 1px solid #BBBBBB;
margin-bottom: 10%;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

}
 
Upvote 0 Downvote
I need the RENDERED HTML. As in the right click view source, or at least what you get from the IE Developer toolbar.

You've got questions and source code. We want both!
Oh? That? That's not an important password. - IT Security Admin (pw on whiteboard)
 
Upvote 0 Downvote
Where does the style come up? Normally, the style for the gridview should be either as part of those selected by you in the properties field or defined by you in a custom style sheet (which is then attached using the CssStlye property). You need to do either of the two to specify the styling for the gridview

____________________
Men put up a strong face just to cover their weaknesses...good!
But a smile makes them live longer....
Which would you choose?

Think about it.
 
Upvote 0 Downvote
I'm sorry, I wasn't understanding what you were asking, I got it here now. Thanks.
(some code I had to exclude, just the name of the site and stuff)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<!--[if lt IE 7]> <html class="no-js ie ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js ie" lang="en"> <![endif]-->
<!--[if !IE]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>123</title>
<meta name="description" content="Case Search" />
<meta name="author" content="Courts">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

<!-- ### Pre-Scripts ### -->
<script src="assets/js/modernizr-2.0.6.js" type="text/javascript"></script>

<!-- ### Stylesheets ### -->
<link rel="stylesheet" href="123/css/style.css" type="text/css" />
<!-- ### Post-Scripts ### -->
<script type="text/javascript" src=" <script> window.jQuery || document.write('<script src="assets/js/jquery-1.7.1.min.js"><\/script>')</script>
<script type="text/javascript" src="123/bootstrap/js/bootstrap-tabs.js"></script>
<script type="text/javascript" src="123/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="123/js/scripts.js"></script>
</head>


<body id="front" class="page">
<form name="form1" method="post" action="SearchResults.aspx?k=penny&amp;1=True" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="btnLightSearch" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTM0MDgyNDI1OA9kFgICAQ9kFgICFw88KwANAQAPFgQeC18hRGF0YUJvdW5kZx4LXyFJdGVtQ291bnQCE2QWAmYPZBYoAgEPZBYGAgEPDxYCHgRUZXh0BRVNMjAwNi0wMDQ1OC1DQ0EtUjMtUENkZAICDw8WAh8CBStMZXN0ZXIgQXJub2xkIENsb3VzZSB2cy4gU3RhdGUgb2YgVGVubmVzc2VlZGQCAw8PFgIfAgUGYXJub2xkZGQCAg9kFgYCAQ8PFgIfAgUVTTIwMDYtMDEyODctQ0NBLVIzLUNEZGQCAg8PFgIfAgUjU3RhdGUgb2YgVGVubmVzc2VlIHZzLiBMYXJyeSBBcm5vbGRkZAIDDw8WAh8CBQZhcm5vbGRkZAIDD2QWBgIBDw8WAh8CBRVFMjAwNi0wMjA3Ny1DT0EtUjMtQ1ZkZAICDw8WAh8CBTpNYXR0aGV3IEZsb3J5ICZhbXA7IENocmlzdGkgRmxvcnkgdnMuIEouIEFybm9sZCBGaXR6Z2VyYWxkZGQCAw8PFgIfAgUGYXJub2xkZGQCBA9kFgYCAQ8PFgIfAgUVTTIwMDctMDE0MDktQ0NBLVIzLUNEZGQCAg8PFgIfAgUsU3RhdGUgb2YgVGVubmVzc2VlICB2cy4gRGF2aWQgQXJub2xkIEZlcnJlbGxkZAIDDw8WAh8CBQZhcm5vbGRkZAIFD2QWBgIBDw8WAh8CBRVFMjAwNi0wMjA3Ny1TQy1SMTEtQ1ZkZAICDw8WAh8CBTpNYXR0aGV3IEZsb3J5ICZhbXA7IENocmlzdGkgRmxvcnkgdnMuIEouIEFybm9sZCBGaXR6Z2VyYWxkZGQCAw8PFgIfAgUGYXJub2xkZGQCBg9kFgYCAQ8PFgIfAgUVTTIwMDctMDE3ODQtQ09BLVIzLUNWZGQCAg8PFgIfAgV2QXJub2xkIE0uIFdlaXNzLCBTdWJzdGl0dXRlIFRydXN0ZWUgdi4gVW5pdGVkIFN0YXRlcyBvZiBBbWVyaWNhIEludGVybmFsIFJldmVudWUgU2VydmljZSwgYW5kIFN3YW5zb24gRGV2ZWxvcG1lbnRzLCBMUGRkAgMPDxYCHwIFBmFybm9sZGRkAgcPZBYGAgEPDxYCHwIFFlcyMDA3LTAyNjQwLUNDQS1NUjMtUENkZAICDw8WAh8CBSVBbnRvbmlvIEFybm9sZCB2cy4gU3RhdGUgb2YgVGVubmVzc2VlZGQCAw8PFgIfAgUGYXJub2xkZGQCCA9kFgYCAQ8PFgIfAgUVRTIwMDgtMDA2MTItQ09BLVIzLUNWZGQCAg8PFgIfAgU6TWFyayBTYXJvZmYgdnMuIEFybm9sZCBHLiBDb2hlbiwgYW5kIExlaWJvd2l0eiAmYW1wOyBDb2hlbmRkAgMPDxYCHwIFBmFybm9sZGRkAgkPZBYGAgEPDxYCHwIFFVcyMDA4LTAwODU2LUNPQS1SMy1DVmRkAgIPDxYCHwIFjQFHZXJyeSBHYWxsaW1vcmUsIFRlcnJ5IEdhbGxpbW9yZSwgVHJhY3kgUm9iYmlucywgVmlja2kgTWNDb3JtaWNrLCBLZXJyeSBCb2FuZSwgQ2hhZCBBcm5vbGQsIEJyZW50IEFybm9sZCwgYW5kIENvcnkgQXJub2xkICB2LiAgUmViYSBHYWxsaW1vcmVkZAIDDw8WAh8CBQZhcm5vbGRkZAIKD2QWBgIBDw8WAh8CBRVXMjAwOC0wMTE4NC1DQ0EtUjMtUENkZAICDw8WAh8CBSVPY3RhdmlzIEFybm9sZCB2cy4gU3RhdGUgb2YgVGVubmVzc2VlZGQCAw8PFgIfAgUGYXJub2xkZGQCCw9kFgYCAQ8PFgIfAgUVRTIwMDgtMDE3MzQtQ09BLVIzLUNWZGQCAg8PFgIfAgVZSmFtZXMgTmVhbCBNZWRsZXkgdi4gS2FyZW4gU3VlIE1lZGxleSwgTWVyZWRpdGggTWVkbGV5IEFybm9sZCBhbmQgQW5pdGEgU3VlIE1lZGxleSBUYXlsb3JkZAIDDw8WAh8CBQZhcm5vbGRkZAIMD2QWBgIBDw8WAh8CBRVNMjAwOC0wMTk4NC1DQ0EtUjMtQ0RkZAICDw8WAh8CBSRTdGF0ZSBvZiBUZW5uZXNzZWUgdnMuIEdlb3JnZSBBcm5vbGRkZAIDDw8WAh8CBQZhcm5vbGRkZAIND2QWBgIBDw8WAh8CBRRXMjAwOC0wMjgyNy1XQy1SMy1XQ2RkAgIPDxYCHwIFYEFybm9sZCBMeW5uIEJvbWFyIHYuIEhhcnQgJmFtcDsgQ29vbGV5IEZsZXggRGl2aXNpb24gYW5kIENpZ25hIFByb3BlcnR5ICZhbXA7IENhc3VhbHR5IENvbXBhbmllc2RkAgMPDxYCHwIFBmFybm9sZGRkAg4PZBYGAgEPDxYCHwIFFU0yMDA4LTAyMjMyLVNDLVIxMS1DVmRkAgIPDxYCHwIFJURhdmlkIEFybm9sZCBGZXJyZWxsIHYuIEZsZXRjaGVyIExvbmdkZAIDDw8WAh8CBQZhcm5vbGRkZAIPD2QWBgIBDw8WAh8CBRVNMjAwOS0wMTQ2OC1DQ0EtUjMtQ0RkZAICDw8WAh8CBSlTdGF0ZSBvZiBUZW5uZXNzZWUgdnMuIEplZmZyZXkgTGVlIEFybm9sZGRkAgMPDxYCHwIFBmFybm9sZGRkAhAPZBYGAgEPDxYCHwIFFU0yMDA3LTAxMzA2LVNDLVIxMS1DRGRkAgIPDxYCHwIFK1N0YXRlIG9mIFRlbm5lc3NlZSB2cy4gRGF2aWQgQXJub2xkIEZlcnJlbGxkZAIDDw8WAh8CBQZhcm5vbGRkZAIRD2QWBgIBDw8WAh8CBRVXMjAxMC0wMDAzNi1DT0EtUjMtQ1ZkZAICDw8WAh8CBWZGbGFnc3RhciBFbnRlcnByaXNlcywgSW5jLiB2LiBFcmllIEh1cnN0LCBpbmRpdmlkdWFsbHksIGFuZCBhcyBFeGVjdXRyaXggb2YgdGhlIEVzdGF0ZSBvZiBBcm5vbGQgSHVyc3RkZAIDDw8WAh8CBQZhcm5vbGRkZAISD2QWBgIBDw8WAh8CBRVXMjAxMC0wMDI2OC1DQ0EtUjMtUENkZAICDw8WAh8CBSVBbnRvbmlvIEFybm9sZCB2cy4gU3RhdGUgb2YgVGVubmVzc2VlZGQCAw8PFgIfAgUGYXJub2xkZGQCEw9kFgYCAQ8PFgIfAgUVRTIwMTAtMDA0MTktQ0NBLVIzLUNEZGQCAg8PFgIfAgUsU3RhdGUgb2YgVGVubmVzc2VlIHZzLiBUaW1vdGh5IExlYnJvbiBBcm5vbGRkZAIDDw8WAh8CBQZhcm5vbGRkZAIUDw8WAh4HVmlzaWJsZWhkZBgCBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WBQUMY2hrU2VhcmNoQWxsBRNjaGtTZWFyY2hDYXNlTnVtYmVyBRFjaGtTZWFyY2hDYXNlTmFtZQUSY2hrU2VhcmNoUGFydHlOYW1lBRRjaGtTZWFyY2tCdXNpbmVzTmFtZQUPZ3JkU2VhcmNoUmVzdWx0DzwrAAoBCAIBZNoPmmweH7/zLpkx2/YZEGnzs0Lr" />
</div>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWEwKwjdamDQLV0YDRAgL+0u2JBALczs/DDwKx1cTcCgKZzof+BQKI17yKAwLk0/6mDgLUvsjqBQKfutGkDAL2xc7sDgLUqND6DQKkoaOgDQLJkd2wCgLe88LpBAKEot2fDQKSotaICwKSosKtAgLpiaGwCqXR4v41TqIhee9I3nE517zeNie2" />
</div>
<div class="container">
<header class="primary row" role="banner">
<div id="branding" class="span12">
<h1 class="logo"><a href="firstpage.aspx">123</a></h1>
</div>

<div id="title-bar" class="span12">
<h2 class="white alignleft">123 web page</h2>


<input type="hidden" name="CurrentPages" id="CurrentPages" value="1" />
<input type="hidden" name="TotalPages" id="TotalPages" value="2" />
<input type="hidden" name="searchText" id="searchText" value="penny" />

<div class="top-pager"><span id="lblPager"><input type="submit" name="pagecount11" value="Page 1 of 2" id="pagecount11" class="nav-btn" style="height:32px;" /><input type="submit" name="Previous11" value="&lt;" id="Previous11" class="nav-btn" style="height:32px;width:32px;" /><input type="submit" name="Next11" value=">" id="Next11" class="nav-btn" style="height:32px;width:32px;" /></span></div>


<br />
<div>
<table cellspacing="0" rules="all" border="1" id="grdResult" style="border-collapse:collapse;"position:relative;">
<tr>
<th scope="col">Name</th><th scope="col">Birthday</th><th scope="col">Search / Match</th>
this would be where the data would appear. I deleted this part

</table>
</div>
<br />
<div class="bottom-pager"><span id="Pager"><input type="submit" name="pagecount1" value="Page 1 of 2" id="pagecount1" class="nav-btn" style="height:32px;" /><input type="submit" name="previous1" value="Previous" id="previous1" class="nav-btn" style="height:32px;" /><input type="submit" name="btn1" value="1" id="btn1" class="nav-btn sel-nav" style="height:32px;width:32px;" /><input type="submit" name="btn2" value="2" id="btn2" class="nav-btn" style="height:32px;width:32px;" /><input type="submit" name="next1" value="Next" id="next1" class="nav-btn" style="height:32px;" /></span></div>
</section>

<br />

<footer class="primary row" role="contentInfo">

</footer>

</div>
<script>

$(document).ready(function() {
var watermark = 'Enter Search Term';
$('#tbSearchTerm').blur(function() {
if ($(this).val().length == 0)
$(this).val(watermark).addClass('watermark');
}).focus(function() {
if ($(this).val() == watermark)
$(this).val('').removeClass('watermark');
}).val(watermark).addClass('watermark');

});

</script>


</form>
</body>
</html>
 
Upvote 0 Downvote
Is this a copy/paste artifact, or is this the actual code?

<table cellspacing="0" rules="all" border="1" id="grdResult" style="border-collapse:collap[red]se;"po[/red]sition:relative;">

Lodlaiden

You've got questions and source code. We want both!
Oh? That? That's not an important password. - IT Security Admin (pw on whiteboard)
 
Upvote 0 Downvote
Are the Paging controls showing up above and below the table, or is the table "out of order" at the bottom?

You've got questions and source code. We want both!
Oh? That? That's not an important password. - IT Security Admin (pw on whiteboard)
 
Upvote 0 Downvote
The paging controls also keeps appearing at the bottom with the gridview, but they are in the right place. So, to answer your question in more detail, when the gridview appears with the search results, the gridview and paging controls appears at the bottom of the page.
 
Upvote 0 Downvote
That means that your table is rendering correctly, and it's one of the containers that has a problem.

It has to be an align in one of your classes on your divs.
The only way to triage this is to either use the IE Toolbar and work your way UP the control tree until you find the tall div with a vertical align. It may be a float issue, causing the divs to stack, but that's less likely.
Otherwise you can do something like turn borders on the divs, which you can also do from inside the IE Toolbar.

Lodlaiden

You've got questions and source code. We want both!
Oh? That? That's not an important password. - IT Security Admin (pw on whiteboard)
 
Upvote 0 Downvote
Hello again, It been nearly a week, and we are unable to find the issue. We are not a CSS shop, we mainly program in asp.net and C#. The CSS was purchased from a vendor who designed our web site.

I tried commenting out the stylesheet and testing the website without the style and it works just fine. The gridview is stable and so is the footer, but once the stylesheet is added in, it is causing problems.

Here is the complete source of the gridview and footer:

<div class="clear-both">
<section id="search-types" class="primary row" role="main">
<br />
<br />
<br />
<asp:HiddenField ID="CurrentPages" runat="server"></asp:HiddenField>
<asp:HiddenField ID="TotalPages" runat="server"></asp:HiddenField>
<asp:HiddenField ID="searchText" runat="server" />

<div class="top-pager"><asp:Label ID="lblPager" runat="server" Text=""></asp:Label></div>

<br />
<asp:GridView ID="grdSearch=" runat="server" AutoGenerateColumns="False">
<Columns>

<asp:BoundField DataField="Unique_ID" Visible="False" />

<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Number" HeaderText="Number" />
<asp:BoundField DataField="Search_Match" HeaderText="Search / Match" />

</Columns>

</asp:GridView>
<br />
<div class="bottom-pager"><asp:Label ID="lblTopPager" runat="server" Text=""></asp:Label></div>
</section>

<br />

<footer class="primary row" role="contentInfo">
<p>Testing 123344556<br />

</div>


I find all the classes that is being used in the above source and copied them here.

header.primary {
margin-bottom: 5px;
}

header.primary #title-bar h2 {
display: block;
float: none;
margin-bottom: 15px;
text-align: center;
}

header.primary #title-bar #search {
display: block;
float: none;
}

header.primary #title-bar #search .input:first-child {
margin-right: 3%;
width: 73%;
}

header.primary #title-bar #search .search-keyword {
float: left;
margin: 0;
padding: 2% 2% 2% 11%;
width: 88%;
}

#front footer.primary {
bottom: 0;
display: block;
text-align: center;
}
#front footer.primary a {
color: #fff;
text-decoration: underline;
}
.primary .caret,
.danger .caret,
.info .caret,
.success .caret {
border-top-color: #fff;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}

.row {
margin-left: -20px;
zoom: 1;
display: block;
}

.row:before, .row:after {
display: table;
*display: inline;
content: "";
zoom: 1;
}

.row:after {
clear: both;
}

.row {
margin-left: 0;
}

.row > [class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}



.container:after {
clear: both;
}

.fluid-container:after {
clear: both;

.row:after {
clear: both;

.input-prepend:after, .input-append:after {
clear: both;
}

.tabs:after, .pills:after {
clear: both;

.tabbable:after {
clear: both;

.btn-group:after {
clear: both;


.clear-both
{
clear:both;
}



Suggestions and tips are very much appreciated!
 
Upvote 0 Downvote
You're most of the way there by validating it works without the stylesheet.
Apply the elements with BLOCK, WIDTH, and FLOAT 1 at a time till it falls to the bottom of the page.

Lodlaiden

You've got questions and source code. We want both!
Oh? That? That's not an important password. - IT Security Admin (pw on whiteboard)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
466
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
822
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
716
Mike Lewis
Mike Lewis
MitGandhi
  • Locked
  • Question
WebGL Error
Replies
3
Views
413
spamjim
spamjim
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
99
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top