First of all Hello all you css freak. geeks and gurus. I just started using
css for some web pages I had to do at work and I'im testing some stuff at
home to understand more. Now, I wanted to understand better of how
cascading works.
in my .css file I created this
tr#noLine{
border-top-width:0;
border-left-width:0;
border-bottom-width:0;
border-right-width:0;
border-style:none;}
tr#topLine{
border-color:black;
border-top-width:3px;
border-bottom-width:0;
border-left-width:0;
border-right-width:0;
border-top-style:solid;}
#noLine td#titles{
font-weight:bold;
text-align:left;}
#topLine td#totalTitles{
font-weight:bold;
text-align:left;}
Now, in my html file, yes the link worked no trouble, but when I put this in
my test html code
<table align=center>
<tr id=noLine>
<td id=totalTitles> Total Titles with noLine id in tr</td>
</tr>
</table>
<table align=center>
<tr id=topLine>
<td id=totalTitles> Total Titles with topLine id in tr</td>
</tr>
</table>
I don't get a topLine for the second table, so what am I doing wrong, or
better yet what I didn't understand
TIA,
Glad to be a new member of this NG
CheGueVerra
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system ( http://www.grisoft.com).
Version: 6.0.833 / Virus Database: 567 - Release Date: 13/01/2005 7 1503
CheGueVerra wrote: First of all Hello all you css freak. geeks and gurus.
I shouldn't really answer this post then... ;-)
I just started using css for some web pages I had to do at work and I'im testing some stuff at home to understand more. Now, I wanted to understand better of how cascading works.
in my .css file I created this
tr#noLine{ border-top-width:0; border-left-width:0; border-bottom-width:0; border-right-width:0; border-style:none;}
This can be changed to
border:none;
tr#topLine{ border-color:black; border-top-width:3px; border-bottom-width:0; border-left-width:0; border-right-width:0; border-top-style:solid;}
This can be changed to
border-color:black;
border-style:solid;
border-width:3px 0 0 0;
#noLine td#titles{ font-weight:bold; text-align:left;}
#topLine td#totalTitles{ font-weight:bold; text-align:left;}
Now, in my html file, yes the link worked no trouble, but when I put this in my test html code
<table align=center> <tr id=noLine> <td id=totalTitles> Total Titles with noLine id in tr</td> </tr> </table> <table align=center> <tr id=topLine> <td id=totalTitles> Total Titles with topLine id in tr</td> </tr> </table>
I don't get a topLine for the second table, so what am I doing wrong, or better yet what I didn't understand
tr doesn't take borders, you might change your CSS styles for
tr#topLine
to
tr#topLine td
The line will be broken by the space between the cells though,
which you can solve by adding cellspacing="0" to the style of
the table.
The CSS way for cellspacing="0" is border-collapse:collap se on
the table styles, but I think it isn't supported by some
browses. Not sure though. http://www.w3.org/TR/CSS21/tables.ht...apsing-borders
Also, your styles mention #noLine td#titles, but I guess you
meant #noLine td#totalTitles ?
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
On Sat, 15 Jan 2005 00:05:25 -0500, CheGueVerra <ch*********@ho tmail.com> wrote: First of all Hello all you css freak. geeks and gurus. I just started using css for some web pages I had to do at work and I'im testing some stuff at home to understand more. Now, I wanted to understand better of how cascading works.
in my .css file I created this
tr#noLine{ border-top-width:0; border-left-width:0; border-bottom-width:0; border-right-width:0; border-style:none;}
First, don't style table rows. Style the elements that are actually visible, the
table itself, the data or header cells for the header and footer part of the
table, the datacells in the table body.
Second, I do hope you use table for presenting tabular data. If you intend to
use tables for lay-out: don't do that. Google for tableless design.
Third, you use an id selector. An id is like a social security number. In every
page you can have only one of them. What you want to use are classes. A selector
might than look like element.semanti cClassName.
Fourth, there are easier ways to write the code you wanted: { border:0; } will
do the trick in this case. Besides, you don't have to describe styles for what
is already the standard way things get presented. A table doesn't have any
borders, unless you styled them elsewhere, so there is no need to describe that
in your stylesheet.
#noLine td#titles{ font-weight:bold; text-align:left;}
#topLine td#totalTitles{ font-weight:bold; text-align:left;}
If styles are shared among various selectors, it is usually safe to list the
selectors and describe the styles only once:
selector1,
selector2,
selector3 {
styles }
Now, in my html file, yes the link worked no trouble, but when I put this in my test html code
<table align=center>
Don't use old fashioned attributes for visual rendering if you are already using
stylesheets. Put all of your styles in that stylesheet for ease of maintenance
and avoiding conflicting situations between the inline styling with attributes
on the elements themselve and the stylesheet, which you might run in to later
and then do not understand.
<td id=totalTitles> Total Titles with noLine id in tr</td> <td id=totalTitles> Total Titles with topLine id in tr</td>
This is where you go wrong with the use of id's. Don't use a unique id more than
once in a page.
What you want is not all that complicated. A table that renderes without
specific styling and one that has specific styling. You might want to rething
you scheme for creating names for the classes you need (use classes for this,
not id's, remember). A name that comminicates back to you _why_ you specified
the class, that has a meaning, will help you maintaining your styles in the
future.
For example, you as a service deliver education to the public. The page is a
general page with some overview data. Perhaps you want the first table to
contain an overview of courses, so you give the table a class [coursesOverview].
The second table contains an overview of departments in your organisation,
course related. The class for that table might then be [deptOverview].
These classes have meaning and will still be understood some time in the future,
whereas 'topLine' doesn't say anything as to _why_ you wanted a topLine, why you
wanted that table to stand out.
Now, start at your markup. Always first create good structured and fairly
semantic markup. Don't bother to think about styling yet:
<table class="coursesO verview" summary="descri be the structure and contents of
this table">
<!-- the structure and contents of this table -->
</table>
<table class="deptOver view" summary="struct ure and contents description">
<!-- the structure et cetera -->
</table>
Once you created the page, validate it to see if nothing seriously went wrong.
Then start the styling.
You want the tables to be centered:
table.coursesOv erview,
table.deptOverv iew {
width: 80%; /*or what you need them to be*/
margin:1em auto; }
You want the headers in the tables to be bold:
coursesOverview th,
deptOverview th, {
font-weight:bold;
text-align:left; } /* besides: if using correct markup
a header cell in a table will usually render bold,
so there won't be a need to write this style; same
goes for the text-align:left, which is also a
default */
Then you want the row with table headers of the table with class="deptOver view"
to have a border at its top:
deptOverview th {
border-top:3px solid black; } /* all the rest can be
skipped as no border is the default; you don't have to
describe that style */
So, it isn't as much the cascade that is your problem. It is a basic
understanding of what you are doing.
Again, start with the markup. Properly markup the pages with a good structure, a
semantic use of the available elements. Don't worry about it's looks, yet.
Then style the elements that are there. If you want all the tables in your pages
to have a border around them, use:
table {
border:2px outset red; }
If you want all the headers in your pages to have a line both underneath and
above the text, use:
h1,h2,h3,h4,h5, h6 {
text-decoration:unde rline overline; }
Use what is there, before you start specifying classes and id's as selecors in
your stylesheets.
Don't use id's where not necessary and don't use them more than once in an
individual page. Most importantly: Don't ever abuse tables for layout purposes.
Use proper markup.
The way things get renderred on your screen with a grafical browser are
influenced mostly by (last has least influence):
inline styles,
styles described with id's,
styles described with classes,
styles described with the elements.
The cascade is (roughly) 'top-down'. What the browser meets first as a
description for a style will be overruled by a style it reads later on, unless
the previous style has 'more rank', 'more weight'.
--- Outgoing mail is certified Virus Free.
A sig separator should be [-- ] or 'dash dash space'. If you use that, someone
replying won't have to delete your sig by hand, as there news client will do
that for them. Please fix.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Barbara de Zoete wrote: On Sat, 15 Jan 2005 00:05:25 -0500, CheGueVerra <ch*********@ho tmail.com> wrote:
First of all Hello all you css freak. geeks and gurus. I just started using css for some web pages I had to do at work and I'im testing some stuff at home to understand more. Now, I wanted to understand better of how cascading works.
in my .css file I created this
[snip code]
[snip very complete answer from Barbara]
Eh.. yes, that's what I meant to say too ;-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Well, thanks for the heads up. I'm going to start to slowly convert my css
file towards classes and try at th e same time to get my expression of style
more simple. More questions will be coming today for sure or maybe tomorrow
my other projet has decided it wanted my attention as well, if you have more
tips, links or whatever fell free to give them to me.
Thanks again,
CheGueVerra
I have started slowly to create a css file with classes instead of Ids, I
carefully read your response and have put it in my archives for later
references, now I want to address a different problem, How do I arrange code
that works in Mozilla or Opera and not in IE, I have read in some other post
that: [Mozilla rendering incorrect while IE is Correct thread] You've gotten very good responses, so I'll simply state this rule of thumb: whenever IE does something different than Mozilla or Opera regarding CSS, there's a very high probability - close to certainty - that IE is the one that's wrong.
While I agree with that principle, it does not explain what I have to do to
get the same results in the different UA.
in my tests .css file i have
table.reportHea der {
border-collapse:collap se;
width:50%;
margin:1em auto;}
td.underLinedTi tles{
border-bottom:3px solid black;}
td.overLinedTit les{
border-top:3px solid black;}
in the html file this
<table class="reportHe ader">
<tr>
<td class="underLin edTitles">Date</td>
<td class="underLin edTitles">Preno m</td>
<td class="underLin edTitles">Nom</td>
<td class="underLin edTitles">Phone </td>
<td class="underLin edTitles">Balan ce</td>
</tr>
<tr>
<td>yourBirthDa y</td>
<td>yourName</td>
<td>yourLastNam e</td>
<td>yourNumbe r</td>
<td>yourBalance </td>
</tr>
<tr>
<td>yourBirthDa y</td>
<td>yourName</td>
<td>yourLastNam e</td>
<td>yourNumbe r</td>
<td>yourBalance </td>
</tr>
<tr>
<td>yourBirthDa y</td>
<td>yourName</td>
<td>yourLastNam e</td>
<td>yourNumbe r</td>
<td>yourBalance </td>
</tr>
<tr>
<td class="overLine dTitles">Totals </td>
<td class="overLine dTitles"></td>
<td class="overLine dTitles"></td>
<td class="overLine dTitles"></td>
<td class="overLine dTitles">1,475. 36</td>
</tr>
This doesnèt produce the same result in IE and Moz, so what to do .....
TIA
CheGueVerra
"CheGueVerr a" <br**********@n otgtechna.com> wrote: I have started slowly to create a css file with classes instead of Ids, I carefully read your response and have put it in my archives for later references, now I want to address a different problem, How do I arrange code that works in Mozilla or Opera and not in IE, I have read in some other post that:
[Mozilla rendering incorrect while IE is Correct thread] You've gotten very good responses, so I'll simply state this rule of thumb: whenever IE does something different than Mozilla or Opera regarding CSS, there's a very high probability - close to certainty - that IE is the one that's wrong. While I agree with that principle, it does not explain what I have to do to get the same results in the different UA.
<tr> <td class="underLin edTitles">Date</td> <td class="underLin edTitles">Preno m</td> <td class="underLin edTitles">Nom</td> <td class="underLin edTitles">Phone </td> <td class="underLin edTitles">Balan ce</td> </tr>
Shouldn't these be <th>? They look like column headings to me.
Please post a URL in future. It saves us time when we're trying to
help you and lets us see the whole page, including the HTTP headers -
the problem may be caused by something besides what you posted.
This doesnèt produce the same result in IE and Moz, so what to do .....
Appears the same in IE6 and Mozilla if you trigger Standards mode. So
either you're using IE5 or you're triggering Quirks mode.
The only difference I see in IE is that the table isn't centered.
IE5.x doesn't support margin: auto;
As you have a percentage width for your table changing your CSS to
table.reportHea der {
border-collapse:collap se;
width:50%;
margin:1em 25%;}
will center it in IE5 as well.
Steve
On Mon, 17 Jan 2005 13:15:49 -0500, "CheGueVerr a"
<br**********@n otgtechna.com> wrote: ...How do I arrange code that works in Mozilla or Opera and not in IE...
We had a discussion about that here in this NG just a few days back.
This msg.id should be easy to locate at Google if nowhere else.
<20************ *************** *******@fr.club-internet.invali d>
The (dubious) "elegance" of the described method is that it can be used
in both of elements HEAD and BODY, and it is pretty reliable since it's
based on MS own method to let IE "sniff for itself" locally, all outside
of Jscript and/or CSS.
--
Rex This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Humpty Dumpty |
last post by:
Hi folks, here's a challenge: I have a dynamically created cascading menu in
Tkinter that can be quite large because it is created from a file. I tried
using lazy creation so only the menu item that is actually selected by the
user gets children menu items created under it, but that fails.
I did this by use of postcommand callback, in which I dynamically add the
children menu items to the parent. However, a print statement in the...
|
by: Axel Dahmen |
last post by:
I try to combine properties of several classes. This is done by assigning a
space separated list of class definitions to an element. However, IE shows a
kind of preference when choosing the right property which I think is
probably wrong. Here's what it does:
If two classes are defined in a stylesheet providing the same property, and
if these two classes are assigned to one single element, the preference
which class's property is used is...
|
by: JMosey |
last post by:
Not sure if this has been covered ( a google search came up pretty
bare).
I have a site that:
- has multi-level cascading menus
- floats center of the browser window
- Will have fairly heavy Safari and Firefox views (~25%)
Finding a cascading menu is easy, I trip over about half a dozen of
those a week. The problem is when you maximize on a big screen in
|
by: weston |
last post by:
I could swear that I've done this before, but suddenly, I seem to be
unable to retrieve the values of CSS properties via Javascript.
For example, take this document:
http://weston.canncentral.org/web_lab/fetching_css_props_via_js/testcase.html
The document is pretty simple. There's a div id'd as "maindiv". It's
got a few CSS properties set on it via an external stylesheet:
|
by: Daniel Walzenbach |
last post by:
Hi,
I have a web application which sometimes throws an “out of memoryâ€
exception. To get an idea what happens I traced some values using performance
monitor and got the following values (for one day):
\\FFDS24\ASP.NET Applications(_LM_W3SVC_1_Root_ATV2004)\Errors During
Execution: 7
\\FFDS24\ASP.NET Apps v1.1.4322(_LM_W3SVC_1_Root_ATV2004)\Compilations
| |
by: dkirkdrei |
last post by:
I am using the javascript below in conjuction with PHP to dynamically
build a cascading menu of part assemblies from a database. The
cascading menu allows the user to "drill" down to the single part level
of larger part assemblies This works very well except for when a person
needs to search for a specific item. Edit>Find on this page(ctrl+f)
will not work because unless the menu has been broken down or "cascded"
if you will, the subparts...
|
by: lekshmisp1982 |
last post by:
Hi All,
I am using sql server 2005 reporting services to generate the report..
I need to make certain parameters to depend on the previous parameters .. I think cascading parameters can do the trick but how to make a parameter as a cascading parameter and how to use it?
Is there anything like that I can use cascading parameters only for parameters using queries? Can I use it for non queried parameters also?
It would be nice if you...
|
by: KMEscherich |
last post by:
Hi there, am wondering if there is a way to have a primary key control on a field and have this drive the cascading list boxes.
I would like to have someone enter an ID(Primary Key) in a textbox control and have the cascading list boxes display the information accordingly. After that, then have the ID and the information in the cascading list boxes be placed in a totally separte table.
Is this something that can be done??? If so, can...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |