...

View Full Version : why firefox wrong align?



fatrat
12-27-2006, 09:42 PM
http://digitalpatriots.org/codegenerator.php?id=68&clan=0

on this page, the first table aligns to the left in firefox, but to the center in internet explorer.

how can i align it to the center in both?
ps, check check the css file ;)

ikilledsanta
12-27-2006, 09:53 PM
I THINK it centers in IE because of the caption tag. I remember what the caption tag does, but I haven't used it in years, so I don't remember it perfectly.


<caption>
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="forumheader" align=center>
<tr>
<td class="forumheader-left">&nbsp;</td>
<td class="forumheader-mid">&nbsp;Code Generator</td>
<td valign="bottom" class="forumheader-right">&nbsp;</td>
</tr>
</table>

</caption>

I added "align=center" to the table, that is the easiest way to fix it, but if you plan on doing it for multiple pages it will be a pain.

fatrat
12-27-2006, 10:05 PM
that doesnt seem to make a difference in firefox, its still on the left :(


<table class="forumline" cellspacing="0" cellpadding="2" width="500px">
<thead>
<caption>
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="forumheader" align="center">
<tr>
<td class="forumheader-left">&nbsp;</td>
<td class="forumheader-mid">&nbsp;Code Generator</td>
<td valign="bottom" class="forumheader-right">&nbsp;</td>
</tr>
</table>
</caption>
</thead>

VIPStephan
12-27-2006, 10:28 PM
.forumheader td {text-align: center;}?

fatrat
12-27-2006, 10:37 PM
that just aligns the text within that cell

whizard
12-27-2006, 10:42 PM
Try

CSS Code


.forumheader
{
margin:0px auto;
}


HTH
Dan

PS- America's Army is an awesome game!

VIPStephan
12-27-2006, 10:46 PM
Sorry, I didn't look properly. I guess I have it and it's pretty simple:

.forumline {margin: auto;}
Yeah, sure... beaten again! :rolleyes:

Arbitrator
12-27-2006, 10:54 PM
The correct method of centering a table is to apply the CSS margin-right: auto and margin-left: auto declarations to it.

My guess is that you’re making use of an old bug in Internet Explorer that allows you to center block‐level elements, such as tables, with text-align: center when the page displays in backward‐compatibility (quirks) mode. text-align: center is for centering text; tables are not text.

Unfortunately, the correct method does not work in Internet Explorer when that browser is in quirks mode. Your page is displaying in that mode because you’re using an incomplete document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html). You need to switch to a complete doctype declaration so that your page is rendered in standards‐compliance mode. For a list of which doctype declarations trigger which rendering mode and an explanation on the topic, you can read an article here (http://hsivonen.iki.fi/doctype/).

You should also validate your HTML (http://validator.w3.org/) and validate your CSS (http://validator.w3.org/) as both contain errors. For example, you put a caption element inside a thead element when that isn’t permitted in HTML; the only place a caption element may appear is directly after an opening table tag. Additionally, another example is that you misspelled the keyword separate in one of your CSS files.

Looks like I got beaten to the post too. :p

whizard
12-27-2006, 11:00 PM
..fastest draw in the web...

:p

@fatrat:

In looking at your code again, I see that while I beat StephenVIP to the post, I was only half right:

Instead of

CSS Code


.forumheader
{
margin:0px auto;
}


You need, as Stephen pointed out,

CSS Code


.forumline
{
margin:0px auto;
}


Sorry for the confusion
Dan

fatrat
12-28-2006, 12:19 AM
the problem i get with your solutions is the <caption> stuff.

i know its totally wrong, but it works ;)


<table class="forumline" cellspacing="0" cellpadding="2" width="500px">
<thead>
<caption>
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="forumheader">
<tr>
<td class="forumheader-left">&nbsp;</td>
<td class="forumheader-mid">&nbsp;Code Generator</td>
<td valign="bottom" class="forumheader-right">&nbsp;</td>
</tr>

</table>
</caption>
</thead>

starting any table like that puts a nice header on it and i can then have as many columns as i like in the following rows, and it doesnt affect the header row.

its from a template i got, and for me to update the template and all the additional pages i have made using that code is gonna be a b****.

also, the header is split into 3 <td>, now the left and right <td> are set using css to have whatever background and width the user sets in there custom css file.

this allows customisation of the table header, ie. they can put rounded corner images in the left and right corner and set a matching width, without affecting the columns underneath.

is there a legitimate way of doing this?
i need a table header row with 3<td> independent of the following rows.

how about the top row of the table having colspan="numberoftds" and containing a table with the 3tds in that i want?
ie:


<table>
<tr>
<td colspan="8">
<table>
<tr>
<td class="left"></td>
<td class="mid"></td>
<td class="right"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td......and the main table begins....

the problem with that is that im gonna have to keep updating the colspan for every table whenever i update.

any better ideas?

omg, this is gonna take a long time to do....

Arbitrator
12-28-2006, 12:39 AM
In response to the last post:

This is why you design correctly from the beginning. I have a feeling that with a document type declaration that puts your page into standards‐compliant rendering mode, a lot of things would “break” anyway.

Regarding the column spanning issue, that’s one of the reasons why you don’t use tables for layout. CSS‐based layouts tend to be much more flexible. Your second set of table code is valid, unlike the first, but still unsemantic (tables for layout). If you insist on using tables for layout though, but want valid code, you can simply remove the thead element.

The order for the various table elements is like this:

<table>
<caption></caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th></th>
<td></td>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<th></th>
<td></td>
</tr>
</tbody>
</table>

fatrat
12-28-2006, 12:52 AM
i dont understand what is wrong with using the table for my layout :(

i mean, i have a table of info and i want to put a nice table header on it, how else should i do it?

and what would be a suitable doctype?

Arbitrator
12-28-2006, 01:25 AM
Your table that appears in the frame is mostly correct since it’s displaying tabular data.

Your “Code Generator” table should be formatted with appropriate CSS like the below though. Of course, you’d probably want to stick another element in there for that white arrow due to Internet Explorer’s lack of support for the :before pseudo‐element.


<div>
<h1>Code Generator</h1>
<!-- more code -->
<h2>General Options</h2>
<!-- more code -->
<h2>Main Options</h2>
<!-- more code -->
<input type="submit" value="Preview">
<!-- more code -->
</div>

The top table should be an unordered list element instead. The main layout table should simply be either a div element or the body element.

fatrat
12-28-2006, 01:33 AM
<td class="row1">
<div>
<h1><span class="cattitle" style="text-decoration:underline">General Options</span></h1><br />

this causes me to get a big gap before and after the <h1> row :(

Arbitrator
12-28-2006, 01:43 AM
this causes me to get a big gap before and after the <h1> row :(Use CSS to remove the browser’s default styling?


h1 { margin: 0; padding: 0; }

If you want to kill the confusion of those default styles altogether, you can specify that for everything at once at the top of your style sheet using the universal selector (asterisk):


* { margin: 0; padding: 0; }

fatrat
12-28-2006, 01:56 AM
am i using the wrong doc type now?



Error Line 22 column 8: there is no attribute "name".

<a name="top"></a>

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

is this better:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


arggh...when i switch doc types errors go and more come....


the doctype was messing up my form>javascript>iframe interaction....so now i deleted my doctype and have none until i figure out which one to use..

fatrat
12-28-2006, 02:00 AM
Your table that appears in the frame is mostly correct since it’s displaying tabular data.

Your “Code Generator” table should be formatted with appropriate CSS like the below though. Of course, you’d probably want to stick another element in there for that white arrow due to Internet Explorer’s lack of support for the :before pseudo‐element.


<div>
<h1>Code Generator</h1>
<!-- more code -->
<h2>General Options</h2>
<!-- more code -->
<h2>Main Options</h2>
<!-- more code -->
<input type="submit" value="Preview">
<!-- more code -->
</div>

The top table should be an unordered list element instead. The main layout table should simply be either a div element or the body element.

i have no idea what most of this is on about :(

i have stuck <h1></h1> around the bits of text i wanted a bit larger and put <div> at the start and end of the table cell.

but i have no clue what the rest means

Arbitrator
12-28-2006, 05:27 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Definitely don’t use XHTML 1.1. Use XHTML 1.0 if you want, but know that it has a much stricter syntax than HTML and is an XML version of HTML, so you’re probably not going to get it right until you can get HTML right.

I would recommend either HTML 4.01 Strict or XHTML 1.0 Strict. Of course, now that I think of it, you can’t use inline frames (iframes) outside of the transitional document type, so that’s probably what you should use for that page. Use the strict document type when you don’t need frames, iframes, or target attributes though.

I did warn you that things might appear to “break” when the document type declaration is added because the page’s rendering mode will change. In quirks mode, things are purposely rendered incorrectly in an attempt to make ancient and incorrectly coded HTML pages display as the author intended. In standards‐compliance mode, pages are rendered according to the HTML, CSS, and other published standards. The reason for the modes is discussed in one of the resources I linked to in a previous post; I assume that it wasn’t read.

Anyway, things only appear to break because the code is broken and suddenly rendered as it’s supposed to be: broken. If you want to create cross‐compatible and forward‐compatible pages, you should have your page displaying in standards mode though.


i have no idea what most of this is on about :(

i have stuck <h1></h1> around the bits of text i wanted a bit larger and put <div> at the start and end of the table cell.

but i have no clue what the rest meansOkay, with regards to the “tabular data” thing I mentioned, each element has a purpose. Tables are for displaying tabular data. Example:


<table>
<thead>
<tr>
<th>Texas State Symbols</th>
</tr>
</thead>
<tbody>
<tr>
<th>Bird</th>
<td>Mockingbird</td>
</tr>
<tr>
<th>Flower</th>
<td>Bluebonnet</td>
</tr>
<tr>
<th>Tree</th>
<td>Pecan Tree</td>
</tr>
</tbody>
</table>

On the other hand, a header, navigation, content, and a footer are not tabular data. It’s not semantic since the content doesn’t match what the element was intended for. In the worst case, you’ll sacrifice semantics for code that simply works, but at the very least it should be valid.

Other examples are h1 elements being for first‐level section headers, the address element being for addresses, the p element being for paragraphs, the code element being for code. Then there are the two elements without any semantic meaning: div and span which are suitable for all the instances where the traditional elements are not. Here’s an example of code that it not semantic.


<p>Copyright © 2006 Just Some Guy. All rights reserved.</p>

The above is not a paragraph; thus it’s not semantically correct. It’s a legal notice that goes in a footer. Since there’s no footer element, you would use a div element. (For interest, a footer element (http://www.whatwg.org/specs/web-apps/current-work/#the-footer) is proposed by the so‐called HTML 5 draft specification).

Some important reasons to use semantic code are so that your page degrades well when CSS is not enabled and so that it can be properly read by screen‐reading software. If your page degrades smoothly when you turn CSS off, it’s a good hint that your code is semantically correct.

The whole idea with <div><h1></h1></div> that I mentioned is that it’s (A) semantic and (B) requires less HTML. The HTML ends up getting converted to CSS to get the same effect without the drawbacks. For example, tables lock you into a layout; if you have all of your pages defined in a style sheet via CSS, you could potentially change the entire site design using that style sheet alone. Together this makes maintenance (reading, editing, troubleshooting) of the code easier.

Regarding the :before pseudo‐element (http://www.w3.org/TR/CSS21/generate.html#before-after-content) thing I mentioned, it’s a part of CSS2 that lets you insert presentational stuff before an element’s content. For example, the below code would insert that decorative white arrow by “Code Generator” before all h1 elements without resorting to extra HTML.


h1:before { content: url("white-arrow.png"); }

Since Internet Explorer doesn’t support that though, you need to use something like the following, which is pretty close to what you’ve been doing, except without a table cell.


CSS:
h1 span {
-moz-display: inline-block; /* for Mozilla which doesn’t support display: inline-block */
display: inline-block;
width: 10px;
height: 100%;
background: url("white-arrow.png") left bottom repeat-x;
}

HTML:
<div>
<h1><span></span>Code Generator</h1>
</div>

Normally, I would say just put it as a background image of the h1 element itself, but it looks like you already need a different background image for it; of course, you can’t have more than one background image on the same element. An alternative is to simply put the h1 inside a div element and apply the arrow and main backgrounds to those; then you won’t need to worry about poor display:&#160;inline-block support.

I hope that clarifies things a bit.

fatrat
12-28-2006, 09:28 AM
thanks that does help.

wow, this thread is gonna be like an encyclopedia for me ;)

http://digitalpatriots.org/templates/digitalpatriots/images/blackthleft.jpg


http://digitalpatriots.org/templates/digitalpatriots/images/blackth.jpg


my table header 'table' was made up of the left image, mid image, and mid image again used for the right side.

the reason for ths was so that users could use css to define there own left, right and center images to create the style they wanted.

so, i guess i can get the same effect using divs....

the question is, can i get it while keeping the css at an easy level that users can understand and change.

i wanted to reduce the classes and simplify the css as much as possible, while keeping all styling done by the css file to allow customisation.


http://digitalpatriots.org/digitalpatriots
http://digitalpatriots.org/americasarmy
http://digitalpatriots.org/MultiGaming
http://digitalpatriots.org/KS66

are the tables used repeatedly in this site all wrong then?
http://www.phpnuke-clan.net/

all lot of sites use php-nuke where a basic table is made as a template then repeated for all uses.

if i have my basic table set here:
http://digitalpatriots.org/forumindex.php?sid=408b66f15b0363d0f3ed43b37fe36431&clan=0

it seems obvious just to repeat that table, to keep things simple, even when the content is just a list.

i need an education.....

heres all the class i use at the moment - the top two tables.
http://digitalpatriots.org/semantics.html


anything underneath is me messing with some <divs> and <h1> and stuff.

as you can see, i use only a few classes..

apparently table1 is correct cos its a tabular structure, but table 2 is a list so is wrong?
so whats right?

fatrat
12-28-2006, 05:53 PM
hey! great news, got through the validator with this doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


only problem is my javscript didnt work with it!!! so, once again, i have no doctype set, arrrggghh.

least the html is valid, if not 'semantic'.

Arbitrator
12-29-2006, 05:54 AM
so, i guess i can get the same effect using divs....

the question is, can i get it while keeping the css at an easy level that users can understand and change.

i wanted to reduce the classes and simplify the css as much as possible, while keeping all styling done by the css file to allow customisation.Yeah. You could add extra, unused div or span elements to the source if you feel you need them there as potential styling hook‐points. It makes sense since those elements have no associated semantic meaning; it may not be the most efficient thing if they end up not being used though. I believe CSS Zen Garden is supposed to be an example of this; the same code is skinned over and over to produce various designs with the only manipulation being done through style sheets.


http://digitalpatriots.org/digitalpatriots

The table for the main layout is incorrect.
The tables for the forms on the top of either side’s column may be arguably correct, but semantic forms with label elements and styled with display: inline-block would probably be better.
The news at the top center is arguably correct if there are multiple news items to be contained in a single table; currently there’s only one news item though. It’s probably better and would be more flexible to use what we were discussing above for the code generator box though.
Also in the main content column, concerning the seven boxes at its bottom, the top‐left five make some sense as individual tables, but the bottom‐right two (currently) don’t since none of the table’s benefits were utilized for the data of “rank”, “wins”, and “losses”. If that data were organized tabularly, it would be in six cells containing the labels and values. The way they’re currently styled, it makes more sense to put them into an unordered list (ul) element.
The “Navigation” box makes more sense as an unordered list with those images as list bullets.
The “BF2 Clan Tracker” information makes sense as a five column table. The table is primarily used for stylistic purposes right now though with only two columns and the numbers not being organized into a column.
The “Clan Xfire” and “AAO Tracker” information make sense as two and three column tables, respectively.



are the tables used repeatedly in this site all wrong then?
http://www.phpnuke-clan.net/Most of them are not semantic. Again, the news is arguably tabular, but they’ve used them mostly for stylistic purposes. Same with the advertisements in the bottom center. The only part of that page that makes sense as tables are the four statistics boxes in the right column from “Membership” to “Nuke Info”; that doesn’t include what should be an ordered list inside “People Online”.


if i have my basic table set here:
http://digitalpatriots.org/forumindex.php?sid=408b66f15b0363d0f3ed43b37fe36431&clan=0

it seems obvious just to repeat that table, to keep things simple, even when the content is just a list.The two forum lists do make sense as tables, yes. But not the rest of it. Forum threads can also arguably be tables if all the posts are organized into a single table—instead of the one table per post that I’ve seen— but that can also be done without tables too.


i need an education.....

heres all the class i use at the moment - the top two tables.
http://digitalpatriots.org/semantics.html


anything underneath is me messing with some <divs> and <h1> and stuff.

as you can see, i use only a few classes..I’m not certain what your point is here. You’re having trouble with CSS for layout?


apparently table1 is correct cos its a tabular structure, but table 2 is a list so is wrong?
so whats right?Lists are essentially one column tables. It tends to be more efficient to not use tables in such cases though since tables have a fixed structure. Imagine that you want to make the list horizontal; how are you going to do that in a table? While this is technically possible given a browser with strong CSS support and that renders tables as purely CSS‐based, using the table means that you still have to use extra elements (<li> versus <tr><td>). It’s also worth noting that the dominant browser today isn’t known for its strong CSS support; Internet Explorer doesn’t support the CSS table display model, so some flexibility is lost there.

fatrat
12-29-2006, 08:17 AM
http://digitalpatriots.org/semantics.html


how is this?
i can set every basic element like this, and then if i want a table, i just put it in the bottom div? and i can use the same classes?



<br />
<p>This is a paragraph??? and the element below is a div, yay!!!!!</p>
<div style="width:230px;" class="forumline">
<div class="forumheader-left" style="float:left">
</div>
<div class="forumheader-right" style="float:right;">
</div>
<div class="forumheader-mid" style="float:none;">
hi
</div>
<div class="row1">
<span class="gen">
and this is some text
</span>
</div>
</div>
<br />


also, in the css file, is it possible to organise things like:


/********************/
/* colors */
/* */
/*******************/
body { color: }
row1, row2, row3 { color: }
thleft, thright, thmid { color: }
gen, gensmall { color: }


/********************/
/* images */
/* */
/*******************/
body { images: }
td { images: }
thleft { images: }
thright { images: }
thmid { images: }

Arbitrator
12-29-2006, 10:29 AM
http://digitalpatriots.org/semantics.html


how is this?
i can set every basic element like this, and then if i want a table, i just put it in the bottom div? and i can use the same classes?Using inline (i.e., in the HTML) CSS of negates one of the key benefits of CSS; namely separation of style in structure. If you put the CSS inline like that, you may as well be using tables, since you still have to go into the HTML source code to make trivial changes to the design.

And yes, you can use classes over and over. One style rule in your style sheet applied to a class will affect all elements of that class. Opposingly, IDs can only be used once per document.


CSS:
*.forumline {
width: 230px;
}
*.forumheader-left {
float: left;
}
*.forumheader-right {
float: right;
}

HTML:
<div class="forumline">
<h1>
<span class="forumheader-left"></span>
<span class="forumheader-right"></span>
hi
</h1>
<div class="forumcontent">
<p>
This is the first paragraph.
</p>
<fieldset>
These are some form elements.
</fieldset>
</div>
</div>


div elements inside h1 elements above were changed to span elements since the former was not valid.


also, in the css file, is it possible to organise things like:


/********************/
/* colors */
/* */
/*******************/
body { color: }
row1, row2, row3 { color: }
thleft, thright, thmid { color: }
gen, gensmall { color: }


/********************/
/* images */
/* */
/*******************/
body { images: }
td { images: }
thleft { images: }
thright { images: }
thmid { images: }“images” isn’t a CSS property. CSS is only capable of defining presentation, not content. So while you can define presentational images like backgrounds, you can’t define content images like photos. To alter the content, you still have to edit the HTML.

It sounds to me like you want some kind of content management system for people that don’t know CSS or HTML. If that’s the case, you should build one and not expect people unfamiliar with CSS to be altering the CSS files.

Anyway, while you could do things like that, organizing things that way would be inefficient since you’ve declared the same selectors twice for no real reason.

fatrat
12-29-2006, 11:13 AM
inline
ill put it in the css file. i was just testing out how to build the divs to make it look like my original table.

images
i intended background-images, but the point wasnt the exact css, just the fact that i was seperating it into different categories.

content management system
maybe i will make simple and advanced solutions, so they can either let me create a css file for them by completing a form listing the images and colours, or edit the css file direct if the are advanced.

and
y doesnt the top div containing my left, mid and right divs, stretch to be the same size as the bottom div?

i want the divs to fill the <div class="forumline" style="width:230px;"> and line up like they would with a table.

Arbitrator
12-29-2006, 12:31 PM
and
y doesnt the top div containing my left, mid and right divs, stretch to be the same size as the bottom div?Is it floated or positioned? Floated and positioned elements lose the automatic expansion properties that elements with display: block normally have. Their widths become based upon either (A) their content or (B) their explicitly defined widths.

If you need a div with three columns, you could do something like this:


CSS:
div > div {
float: left;
width: 33%;
}

HTML:
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>

Remember that floats are removed from normal document flow, so you may need to clear them. If you don’t understand that then you may want to read this on the float model: Containing Floats (http://www.complexspiral.com/publications/containing-floats/). And then this (http://css-discuss.incutio.com/?page=ClearingSpace) on how to clear them.

fatrat
12-29-2006, 05:23 PM
http://digitalpatriots.org/semantics.html

what if i want the left and right divs to be 20px with a background-image, and the center div to fill the gap?

plz could u post some code that will reproduce this table:



<table class="forumline">
<tr>
<td colspan="3" id="xxx" style="padding:0px;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="forumheader">
<tr>
<td class="forumheader-left">&nbsp;</td>
<td class="forumheader-mid">&nbsp;{td} forumheader=left | -mid | -right&nbsp;</td>
<td valign="bottom" class="forumheader-right">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row1" colspan="3">
<span class="genlarge">
i would normally make a list like this<br />
i would normally make a list like this<br />
i would normally make a list like this<br />
i would normally make a list like this<br />
i would normally make a list like this<br />
i would normally make a list like this<br />
</span>
</td>
</tr>
</table>

i have this:


<div style="width:300px;" class="forumline">
<div>
<div class="forumheader-left" style="float:left;">
</div>
<div class="forumheader-right" style="float:right;">
</div>
<div class="forumheader-mid">
stretch now!!!
</div>
</div>
<div>
<table class="standard" style="width:100%">
<tr>
<th class="cat">
table header
</th>
<th class="cat">
table header
</th>
<th class="cat">
table header
</th>
</tr>
<tr>
<td class="th" colspan="3">
This is a seperator
</td>
</tr>
<tr>
<td class="row1">
data
</td>
<td class="row2">
data
</td>
<td class="row3">
data
</td>
</tr>
<tr>
<td class="row1">
data
</td>
<td class="row2">
data
</td>
<td class="row3">
data
</td>
</tr>
<tr>
<td class="th" colspan="3">
This is a seperator
</td>
</tr>
<tr>
<td class="row1">
data
</td>
<td class="row2">
data
</td>
<td class="row3">
data
</td>
</tr>
<tr>
<td class="row1">
data
</td>
<td class="row2">
data
</td>
<td class="row3">
data
</td>
</tr>
</table>
</div>
</div>



edit: set all divs to 100% and then put the whole page in a div of 230px, the tables stretch wider than the 230px, but none of the other divs stretch to match, not even the <p> which are only inside the main <div>


edit2: now i put a container div on the left and a container table on the right.
the div sucs ***! the content table overlaps the containing div, whilst the other content divs stay within it, meaning the content table is out of line with everything else on the div.
the table rocs! the content table doesnt overlap the containing table, but stretches it. the divs then all stretch to match it, so all containing divs and tables are the same width and roc ;)


using tables was very easy, reading up on divs, 3 column layouts, stretching, overlapping, negative margins, floats, containers is all very complicated.

is it worth it......i had a page which would of looked ok once validated, but not semantic...
y does a page have to be semantic, what difference will it make?

Arbitrator
12-30-2006, 12:09 PM
http://digitalpatriots.org/semantics.html

[P]l[ease], could [yo]u post some code that will reproduce this table:


<table class="forumline">
<tr>
<td colspan="3" id="xxx" style="padding:0px;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="forumheader">
<tr>
<td class="forumheader-left">&nbsp;</td>
<td class="forumheader-mid">&nbsp;{td} forumheader=left | -mid | -right&nbsp;</td>
<td valign="bottom" class="forumheader-right">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row1" colspan="3">
<span class="genlarge">
i would normally make a list like this<br />
i would normally make a list like this<br />
i would normally make a list like this<br />
i would normally make a list like this<br />
i would normally make a list like this<br />
i would normally make a list like this<br />
</span>
</td>
</tr>
</table>Here’s an example (http://jsg.byethost4.com/demos/CF%20103819%20Demo.html) based on the second table in the second column from the link in the above quote. Note that the code could be better if it wasn’t written with Internet Explorer 6 in mind, the images were crafted differently, etc.

The source will be at the end of this post for reference.


edit: set all divs to 100% and then put the whole page in a div of 230px, the tables stretch wider than the 230px, but none of the other divs stretch to match, not even the <p> which are only inside the main <div>If you set a width on anything other than a table (or element with display: table), then that element will always honor your width (except IE6). If the content is too wide for that width, then the CSS overflow property determines how that content is dealt with. If you don’t want the width to be 230 pixels, then don’t specify that; it’s as simple as that.

You can use the min-width property or display: table declaration if you want to get a similar effect, but Internet Explorer 6 supports neither and Internet Explorer 7 only supports the first. IE6 treats the width property as min-width (hence why it doesn’t honor widths).

The best way to handle this though is to not set either a width or min-width and let a fluid CSS layout control widths of content boxes. In other words, if your content (middle) column sizes dynamically to the window, using the automatic expansion abilities of divs to your advantage will solve the problem without you doing anything. Here’s an example (http://jsg.byethost4.com/demos/DIC%2022227%20Demo.html) of automatic expansion; no tables whatsoever. Imagine the paragraphs as your content box (“forumline”).

Use the method in the previous paragraph. You’re still thinking in terms of independent tables and how a box looks like when removed from the layout. What’s important is how the element looks once it’s installed into your layout. Design the layout first and the content boxes second. You should not need to specify a width for the container. The widths will be defined by the widths of the columns of the layout itself.


[Wh]y does a page have to be semantic[;] what difference will it make?I’ve already explained this. It’s not just semantics either; it’s also efficiency. Tables are inefficient.

Note: I offered some invalid code at one point earlier. h1 elements cannot contain div elements. Going to correct that post now.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="Patrick Garies">
<base href="http://digitalpatriots.org/images/">
<title>CF 103819 Demo</title>

<!-- Valid HTML 4.01 Strict -->
<!-- Tested: Firefox 2, Internet Explorer 6/7 -->
<!-- HTML and CSS could be more efficient if IE6 or 7 compatability were not an issue and the images were not so poorly constructed for the purpose. -->

<style type="text/css">
* {
margin: 0;
padding: 0;
font: normal 12px "Trebuchet MS", Helvetica, sans-serif;
}
html {
padding: 3em;
background-color: black;
}
div.forumline {
width: 248px;
margin: 0 auto;
}
h1 {
min-height: 20px; /* Used instead of height for text‐zoom accessibility. */
border: 1px solid;
border-color: #3c3c3c #131313 #131313 #404040;
padding-top: 2px;
background: url("blackth.jpg") bottom repeat-x;
color: #c32121;
}
span.forumheader-left {
float: left;
width: 10px;
height: 20px;
margin-right: 0.3em;
background: url("blackthleft.jpg") left bottom no-repeat;
}
span.forumheader-right {
float: right;
width: 10px;
height: 20px;
margin-left: 0.3em;
}
span.forumheader-mid {
position: relative;
top: 2px;
}
ul {
border: 1px solid;
border-color: #606060 #121212 #131313 #505050;
padding: 0.3em;
background: #313131 url("../templates/digitalpatriots/images/cell.gif") repeat-x;
color: #d0d0d0;
list-style-type: none;
}
</style>

<!--[if IE lt 7]>
<style type="text/css">
h1 { /* IE6 does not understand min-height; it treats height as min-height. */
height: 20px;
}
</style>
<![endif]-->

</head>
<body>

<div class="forumline">
<h1>
<span class="forumheader-left"></span>
<span class="forumheader-right"></span>
<span class="forumheader-mid">{td} forumheader=left | -mid | -right</span>
</h1>
<ul>
<li>i would normally make a list like this</li>
<li>i would normally make a list like this</li>
<li>i would normally make a list like this</li>
<li>i would normally make a list like this</li>
<li>i would normally make a list like this</li>
<li>i would normally make a list like this</li>
</ul>
</div>

</body>
</html>

fatrat
12-30-2006, 03:01 PM
ill work on that, thanks.
i had got something similar, but i knew i realised today i had done the header wrong, it was a div with 3 divs in it.

I knew somebody was gonna tell me to use <h1>, i thought maybe a div with 3 h1's in. but i c how urs is correct and it is much better than all the tables code, urggghhhh table code is ugly

this is what i had got:



<div class="standardheader">

<div class="standardheader-left">&nbsp;</div>
<div class="standardheader-right">&nbsp;</div>
<div class="standardheader-mid">&nbsp;Navigation&nbsp;</div>
<div class="row1">
<ul class="list">
<li><a href="clan_admin.php?mode=createclan&amp;sid=641392acec1776916612fe9536a735ce&amp;clan=0">Create a Clan</a></li>
<li><a href="scrim.php?mode=addscrim&amp;sid=641392acec1776916612fe9536a735ce&amp;clan=0">Add a Scrim</a></li>

</ul>
</div>
</div>


after 8hrs getting a page working with those divs, changing the layout to divs, and getting the page to validate, now ill have to redo it. shouldnt take long just to change the headers though.

thanks very much. this has opened up a whole new world to me.

my first wesbite, all tables:
http://www.the5thplatoon.com/members/index.php

my current website with divs:
http://digitalpatriots.org/index.php?sid=641392acec1776916612fe9536a735ce&clan=0

thanks for all the help guys, its really appreciated.
i do intend on making a thank you page, you shall be added!


edit: if somebody wanted to reproduce these table headers http://www.teamnato.org/ using your <h1> and <spans>, would it be possible? me, i couldnt figure it out....as soon as i make the 3 divs into 3 spans the 'mid' loses its expansion property :( and i assume putting 3 divs inside is <h1> is not semantic.

Arbitrator
12-31-2006, 09:54 AM
my current website with divs:
http://digitalpatriots.org/index.php?sid=641392acec1776916612fe9536a735ce&clan=0Not bad, but you might want to fix a resolution issue though since it only works right at 1028×768. At lower resolutions, the right column overlaps the content and at larger resolutions, there’s a lot of blank space between the content column and right column. I haven’t looked at the source, but assuming you’re using a model like this (http://jsg.byethost4.com/demos/DIC%2022227%20Demo.html), put a right margin (equal to the right column’s width) on the content column to prevent overlap. In conjunction with that, let the content column boxes expand freely or center them to get rid of the empty space at larger resolutions.

Either that, or you can used a fixed layout instead of a dynamic layout.

You could also use the blockquote element with a div inside (for the “Quote:” part) for your block quotes if you want to make that semantic too. There are a lot of elements people generally don’t know about; you can look at the HTML specification itself for a list (http://www.w3.org/TR/html401/index/elements.html).


edit: if somebody wanted to reproduce these table headers http://www.teamnato.org/ using your <h1> and <spans>, would it be possible? me, i couldnt figure it out....You should be able to pull that off with the same techniques as demonstrated in the last post (http://jsg.byethost4.com/demos/CF%20103819%20Demo.html). If you’re talking about the bodies of the boxes and not the headers, use three nested div elements:


CSS:
div { } /* vertically repeating middle background (including sides) */
div > div { } /* top part background */
div > div > div { } /* bottom part background with top and bottom padding to prevent content from overlapping the top and bottom backgrounds */

HTML:
<div>
<div>
<div>
Stuff
</div>
</div>
</div>If a visual representation of their tables helps you, you can get the Web Developer extension (http://chrispederick.com/work/webdeveloper/) for Firefox and outline their table cells with Outline > Outline Table Cells.


as soon as i make the 3 divs into 3 spans the 'mid' loses its expansion property :( and i assume putting 3 divs inside is <h1> is not semantic.It’s not that it’s not semantic; putting a div element inside an h1 element is not valid (X)HTML and will throw an error. Using CSS display:&#160;block on the spans or floating them will make them into block‐level elements (like div elements) for the same effect. If you float them, they’ll no longer automatically expand though and you’ll need to specify dimensions.

Just so you know, a div is initially nothing more than an element with display:&#160;block. A span is nothing more than an element with display:&#160;inline. So using CSS to change the display property of a span element to block essentially makes it the same as a div. The main differences between the two is that (X)HTML allows one in places that the other is not and vice versa. For example, <a><div></div></a> is not valid, but <a><span></span></a> is; <span><h1></h1></span> is not valid, but <div><h1></h1></div> is.

fatrat
12-31-2006, 01:49 PM
edit #1:realised for some reason i have changed the float:left/right to position:absolute....will work on that, dont know why i did that.

edit #2: fixed the columns, for some reason the headers in the floated columns now have a big gap between the div they are meant to be heading - but only in IE and the headers are normal in the center column.





there are so many new things for me to learn in this thread im gonna be rereading for a while.

Fixing the layout width.
The left and right columns should be ok fixed. There contents shouldnt try to stretch them or anything. The middle column sometimes has images in. If the image is too wide for the resolution, then it covers the right margin. I think I would prefer the page to be all fixed dimensions. Here is the css of what I have now. I cant figure out why it isnt fixed, when I have specified dimensions of everything.
I think what I want is like, going back to the table of fixed width. A table centralised with 1000px width. If the page expands or shrinks then only the margins change around the table, not the table itself or the columns with in it. I have all the columns inside a couple of divs set to 1000px. So, why does the right margin move the window and not at 1000px?

ps. my footer doesnt clear the main contents :(


/********************************************/
/* */
/* Page Layout */
/* */
/********************************************/
html, body { font-size: 11px; font-family: Trebuchet MS, Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif; cursor: url(images/greycursor.gif), auto; background: #000000 url('images/bg_black.png') repeat fixed; height: 100%; width: 100%; padding: 0; margin: 0; border: 0px; color: #D0D0D0; }
.maintable { width:1000px; margin:0; padding:0; border:0; }
.content-row { width:1000px; margin:0; padding:0; border:0; text-align:center; }
.maincontent { width:1000px; margin:0; padding:0; border:0; text-align:center; padding-top:100px; padding-bottom:50px; vertical-align:top; }
.cleaner { clear:both; height:1px; font-size:1px; border:none; margin:0; padding:0; background:transparent; }
#header { width:1000px; text-align:center; padding:0px; margin:0px; }
#footer { width:1000px; margin:0px; padding:0px; text-align:center; clear:both; }
/********************************************/
/* */
/* Forum menu and Banner area */
/* */
/********************************************/
.forummenu { width:1000px; border:0; padding:0; margin:0; padding-top:100px; padding-bottom:50px; vertical-align:top; text-align:center; }
.logotable { padding: 0px; border-spacing: 0px; border: 0; margin:0px; }
.logorow1 { text-align: center; border-style: solid; border-width: 0px 0px 6px 0px; border-color: #D52D2D; }
/********************************************/
/* */
/* Home Page */
/* */
/********************************************/
#maincontent { position: absolute; left: 0px; top: 20px; width:540px; margin-left: 220px; margin-right: 240px; margin-top:0px; }
#leftmenu { position: absolute; left: 0px; top: 20px; width: 200px; margin-top:0px; margin-left:10px; }
#rightmenu { position: absolute; right: 0px; top: 20px; width: 220px; margin-top:0px; margin-right:10px; }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum