Thanks for the excellent screen shots! I presume that it is the offset of the header by 1 line width to the right from the body that is the problem. The first step in any of these problems is to save the rendered html from each browser as a file and display
it in the other browser. This will show if it is rendering issue or a browser issue. Obviously this is not an answer but might set you along the path to one.
Click "Mark as Answer" on the post that helped you.
This earns you a point and marks your thread as Resolved so we will all know you have been helped.
FAQ on the correct forum http://forums.asp.net/p/1337412/2699239.aspx#2699239
First, you can remove AlternatingRowStyle-CssClass="even" from your GridView, but I doubt that will help so you should remove
CssClass="gridview" and <AlternatingRowStyle CssClass="even" />. After that try to run code and see if it works ok in Firefox. If it looks fine post your css classes
even and gridview here.
Removed CssClass="even" for now, I will use the Properties to set the alternating row colors. [resolved]
Removing CssClass="gridview" does not fix it, the position is still the same in FireFox.
It is a gridview / detailsview problem I am certain. This is just the way FireFox renders it I guess. :( Why I always get pissed about now and stop developing with .net....
Can't afford to do that though as .NET is too valuable in other ways...
You should try to completely remove line <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> from your code (in your case StyleSheet.css will be the name of your css file).
Which doctype have you specified at the top of the page? If it is XHTML Strict, IE7 and FF should render the same. There are still inconsistencies, but if you are using HTML or XHTML Transitional, those differences are more pronounced.
SolitaryMan
Member
154 Points
275 Posts
Pixel Picky :( Help Needed
Jun 22, 2007 03:02 PM|LINK
I like many others really *require* pixel precision among other behaviours. It may be even one reason I have balked at .net for so long...
I am really trying to embrace .NET so if you can help me I would appreciate it.
This screenshot is from FireFox 2, and for no reason at all it is throwing the Gridview and DetailsView out to the left by 1 pixel.
The same project in IE7:
Why is this? What should I do?
Am I just going to whip myself up into an un-needed frenzy if I try and fix it for FireFox?
FireFox CSS
kipo
All-Star
16475 Points
2811 Posts
Re: Pixel Picky :( Help Needed
Jun 22, 2007 03:16 PM|LINK
Can you post code for your GridView?
SolitaryMan
Member
154 Points
275 Posts
Re: Pixel Picky :( Help Needed
Jun 22, 2007 03:23 PM|LINK
Sure (BTW, this looks perfect also in Safari for Windows, and Opera 9) Only FireFox 2 throws it off...
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="False"
DataKeyNames="taskId"
DataSourceID="ObjectDataSource1"
CssClass="gridview"
AlternatingRowStyle-CssClass="even"
GridLines="None"
CellPadding="15">
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:BoundField DataField="taskId" HeaderText="taskId" InsertVisible="False" ReadOnly="True"
SortExpression="taskId" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:CheckBoxField DataField="Complete" HeaderText="Complete" SortExpression="Complete" />
</Columns>
<AlternatingRowStyle CssClass="even" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Also I was wondering why the AlternatingRowStyle-CssClass="even" is not working..?
gridview css
TATWORTH
All-Star
72415 Points
14017 Posts
MVP
Re: Pixel Picky :( Help Needed
Jun 22, 2007 03:28 PM|LINK
Thanks for the excellent screen shots! I presume that it is the offset of the header by 1 line width to the right from the body that is the problem. The first step in any of these problems is to save the rendered html from each browser as a file and display it in the other browser. This will show if it is rendering issue or a browser issue. Obviously this is not an answer but might set you along the path to one.
This earns you a point and marks your thread as Resolved so we will all know you have been helped.
FAQ on the correct forum http://forums.asp.net/p/1337412/2699239.aspx#2699239
kipo
All-Star
16475 Points
2811 Posts
Re: Pixel Picky :( Help Needed
Jun 22, 2007 03:31 PM|LINK
First, you can remove AlternatingRowStyle-CssClass="even" from your GridView, but I doubt that will help so you should remove CssClass="gridview" and <AlternatingRowStyle CssClass="even" />. After that try to run code and see if it works ok in Firefox. If it looks fine post your css classes even and gridview here.
SolitaryMan
Member
154 Points
275 Posts
Re: Pixel Picky :( Help Needed
Jun 22, 2007 03:38 PM|LINK
Hi.
Removed CssClass="even" for now, I will use the Properties to set the alternating row colors. [resolved]
Removing CssClass="gridview" does not fix it, the position is still the same in FireFox.
It is a gridview / detailsview problem I am certain. This is just the way FireFox renders it I guess. :( Why I always get pissed about now and stop developing with .net....
Can't afford to do that though as .NET is too valuable in other ways...
kipo
All-Star
16475 Points
2811 Posts
Re: Pixel Picky :( Help Needed
Jun 22, 2007 03:49 PM|LINK
You should try to completely remove line <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> from your code (in your case StyleSheet.css will be the name of your css file).
SolitaryMan
Member
154 Points
275 Posts
Re: Pixel Picky :( Help Needed
Jun 22, 2007 03:59 PM|LINK
Hi, that won't do any good. It reverts to old ugly 1995 html.
I see what your getting at though...
Your implying something in my external css file is googering it up.
But it's not:
* {
margin: 0px;
padding: 0px;
font-family: "Lucida Grande",verdana,sans-serif;
font-weight: normal;
text-decoration: none;
font-size: 12px;
}
img {
border: 0px;
}
body {
border-top: 4px solid #333;
}
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
padding: 6px 0px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 130%;
color: green;
}
p {
margin: 6px 0px;
}
.gridview {
background: #ccc;
border: 1px solid #444;
width: 500px;
}
.controlheader {
border: 1px solid #444;
width: 490px;
background: #21AB9A;
}
.detailsview {
background: #ccc;
border: 1px solid #444;
width: 500px;
}
input {
border: 1px solid #330;
margin: 3px;
padding: 2px;
}
#header-wrapper {
background: transparent url(images/header_main_bg.png) repeat-x scroll left bottom;
border-top: 2px solid #006E61;
border-bottom: 2px solid #006E61;
}
#header-main {
height: 110px;
padding-left: 20px;
}
CSS Gridview
dwlovell
Member
608 Points
123 Posts
Re: Pixel Picky :( Help Needed
Jun 22, 2007 05:16 PM|LINK
Which doctype have you specified at the top of the page? If it is XHTML Strict, IE7 and FF should render the same. There are still inconsistencies, but if you are using HTML or XHTML Transitional, those differences are more pronounced.
-David
SolitaryMan
Member
154 Points
275 Posts
Re: Pixel Picky :( Help Needed
Jun 22, 2007 05:32 PM|LINK
Ahh... the one Visual Studio 2005 defaulted to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Just to test it I have updated the DOCTYPE to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Same problem in the screenshot for fire-fox still..
Ok all, well thanks.
gridview css Doctype