Solved

jQuery Flexigrid CSS

Posted on 2008-06-19
17
2,046 Views
Last Modified: 2013-11-19
Hello Experts,
I am using  example 3 of http://www.webplicity.net/flexigrid/
I have a slight issue in few of the styles of the Flexigrid which I believe getting over written by the style sheet I am using on the page.
As I can see using Firebug few of the padding styles of the Flexigrid has been strike off.
Please can someone help me make these styles correct.
Thanks for your help
Regards
Sam
0
Comment
Question by:newbie27
  • 9
  • 8
17 Comments
 
LVL 8

Author Comment

by:newbie27
ID: 21824024
Hello,
Please visit
http://213.253.134.6/artism/admin/list_admin.asp

please pick any name from the drop down and click view list button to see the results in the flexigrid.
major issues are with the padding, in the column headings, when you click on  small down arrow to view a another list to pick ..  i am unable to tick any from the  pop up which shows the list of column names.. this i believe is the issue with the styles...

hope you understand the problem when you visit the url above.
 


0
 
LVL 30

Expert Comment

by:Steggs
ID: 21824507
hello,

I used to use * {padding:0;margin:0;} and it used to cause problems with inputs and select boxes. I now use reset.css which can be found here http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Link to that as a new stylesheet and see what we have after that

Steggs
0
 
LVL 8

Author Comment

by:newbie27
ID: 21825990
hello steggs,
thanks for your suggestion, i have added reset.css but this did not do any good !
please can you advice?
thanks
sam
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21826227
hi,

did u remove * {padding:0;margin:0;}
0
 
LVL 8

Author Comment

by:newbie27
ID: 21826607
hello steggs,
ok i have now removed * {padding:0;margin:0;}
please have a look the affect it had on the page ...
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21826637
your reset.css is a html file :/
0
 
LVL 8

Author Comment

by:newbie27
ID: 21826735
i did not notice it earlier, although i have made a reset.css file but i dont know why it is not treating like one.

please can you see the attached, is this not correct?

thanks for your help
html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

	margin: 0;

	padding: 0;

	border: 0;

	outline: 0;

	font-weight: inherit;

	font-style: inherit;

	font-size: 100%;

	font-family: inherit;

	vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

	outline: 0;

}

body {

	line-height: 1;

	color: black;

	background: white;

}

ol, ul {

	list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

	border-collapse: separate;

	border-spacing: 0;

}

caption, th, td {

	text-align: left;

	font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: "";

}

blockquote, q {

	quotes: "" "";

}

Open in new window

0
 
LVL 30

Expert Comment

by:Steggs
ID: 21826745
that is correct
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 30

Expert Comment

by:Steggs
ID: 21826753
but this is your current reset.css on the page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
2<html dir=ltr>
3
4<head>
5<style>
6a:link {font:8pt/11pt verdana; color:FF0000}
7a:visited {font:8pt/11pt verdana; color:#4e4e4e}
8</style>
9
10<META NAME="ROBOTS" CONTENT="NOINDEX">
11
12<title>The page cannot be found</title>
13
14<META HTTP-EQUIV="Content-Type" Content="text-html; charset=Windows-1252">
15</head>
16
17<script>
18function Homepage(){
19<!--
20// in real bits, urls get returned to our script like this:
21// res://shdocvw.dll/http_404.htm#http://www.DocURL.com/bar.htm
22
23 //For testing use DocURL = "res://shdocvw.dll/http_404.htm#https://www.microsoft.com/bar.htm"
24 DocURL = document.URL;
25
26 //this is where the http or https will be, as found by searching for :// but skipping the res://
27 protocolIndex=DocURL.indexOf("://",4);
28
29 //this finds the ending slash for the domain server
30 serverIndex=DocURL.indexOf("/",protocolIndex + 3);
31
32 //for the href, we need a valid URL to the domain. We search for the # symbol to find the begining
33 //of the true URL, and add 1 to skip it - this is the BeginURL value. We use serverIndex as the end marker.
34 //urlresult=DocURL.substring(protocolIndex - 4,serverIndex);
35 BeginURL=DocURL.indexOf("#",1) + 1;
36
37 urlresult=DocURL.substring(BeginURL,serverIndex);
38
39 //for display, we need to skip after http://, and go to the next slash
40 displayresult=DocURL.substring(protocolIndex + 3 ,serverIndex);
41
42 InsertElementAnchor(urlresult, displayresult);
43}
44
45function HtmlEncode(text)
46{
47 return text.replace(/&/g, '&amp').replace(/'/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
48}
49
50function TagAttrib(name, value)
51{
52 return ' '+name+'="'+HtmlEncode(value)+'"';
53}
54
55function PrintTag(tagName, needCloseTag, attrib, inner){
56 document.write( '<' + tagName + attrib + '>' + HtmlEncode(inner) );
57 if (needCloseTag) document.write( '</' + tagName +'>' );
58}
59
60function URI(href)
61{
62 IEVer = window.navigator.appVersion;
63 IEVer = IEVer.substr( IEVer.indexOf('MSIE') + 5, 3 );
64
65 return (IEVer.charAt(1)=='.' && IEVer >= '5.5') ?
66 encodeURI(href) :
67 escape(href).replace(/%3A/g, ':').replace(/%3B/g, ';');
68}
69
70function InsertElementAnchor(href, text)
71{
72 PrintTag('A', true, TagAttrib('HREF', URI(href)), text);
73}
74
75//-->
76</script>
77
78<body bgcolor="FFFFFF">
79
80<table width="410" cellpadding="3" cellspacing="5">
81
82 <tr>
83 <td align="left" valign="middle" width="360">
84 <h1 style="COLOR:000000; FONT: 13pt/15pt verdana"><!--Problem-->The page cannot be found</h1>
85 </td>
86 </tr>
87
88 <tr>
89 <td width="400" colspan="2">
90 <font style="COLOR:000000; FONT: 8pt/11pt verdana">The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</font></td>
91 </tr>
92
93 <tr>
94 <td width="400" colspan="2">
95 <font style="COLOR:000000; FONT: 8pt/11pt verdana">
96
97 <hr color="#C0C0C0" noshade>
98
99 <p>Please try the following:</p>
100
101 <ul>
102 <li>If you typed the page address in the Address bar, make sure that it is spelled correctly.<br>
103 </li>
104
105 <li>Open the
106
107 <script>
108 <!--
109 if (!((window.navigator.userAgent.indexOf("MSIE") > 0) && (window.navigator.appVersion.charAt(0) == "2")))
110 {
111 Homepage();
112 }
113 //-->
114 </script>
115
116 home page, and then look for links to the information you want.</li>
117
118 <li>Click the <a href="javascript:history.back(1)">Back</a> button to try another link.</li>
119 </ul>
120
121 <h2 style="font:8pt/11pt verdana; color:000000">HTTP 404 - File not found<br>
122 Internet Information Services<BR></h2>
123
124 <hr color="#C0C0C0" noshade>
125
126 <p>Technical Information (for support personnel)</p>
127
128<ul>
129<li>More information:<br>
130<a href="http://www.microsoft.com/ContentRedirect.asp?prd=iis&sbp=&pver=5.0&pid=&ID=404&cat=web&os=&over=&hrd=&Opt1=&Opt2=&Opt3=" target="_blank">Microsoft Support</a>
131</li>
132</ul>
133
134 </font></td>
135 </tr>
136
137</table>
138</body>
139</html>
0
 
LVL 8

Author Comment

by:newbie27
ID: 21826856
I dont know why it was not locating the file, although I have the correct file path. However, I have added ths styles on the page for now to test if this makes any difference on the flexigrid styles, please can you have a look again thanks
0
 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
ID: 21826948
OK good... that reset.css is working nicely now...

Can you tell me exactly what u need help with, these are the things that I can see need changing:

h3's need stylign your css... a bit of padding

you need to give #breadcrumb a height so it containts that absolutely positioned fieldset

The grid itself looks good... just need to increase the width of the first column by 10px or so

Hope this helps

Steggs
0
 
LVL 8

Author Comment

by:newbie27
ID: 21827091
Hello Steggs,
Thanks for your feedback, the major issue I had on the Flexigrid was when you want to remove/add columns to the grid from the header link .. please see attahced ... this is not working right ...
screen.jpg
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21827196
Hmmm...

The issue with the All going to the right is caused by the input in the second cell.

There is also an issue with the drop down disappearing before u can click on it? Have u noticed this? there is a gap between the div and the bottom of the th... for some reason :/ try using the same doctype as the example page
0
 
LVL 8

Author Comment

by:newbie27
ID: 21827333
Ok I will try this, thanks for your time.
I think I have messed something else now, the search text field in the top bar has lost its alignment and so is the left menu padding ...
please can you let me know how can i fix this?
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21827525
what has happened to the reset.css
0
 
LVL 8

Author Comment

by:newbie27
ID: 21829465
I have removed it temporarily from list_admin.asp as I wanted to show the least working flexigrid to my manager and later test with the other issues having reset.css
0
 
LVL 8

Author Closing Comment

by:newbie27
ID: 31468873
thanks
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now