?
Solved

jQuery Flexigrid CSS

Posted on 2008-06-19
17
Medium Priority
?
2,122 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
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
 
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 2000 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

764 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