Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 30
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    why firefox wrong align?

    http://digitalpatriots.org/codegener...p?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

  • #2
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

    Code:
    		<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.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that doesnt seem to make a difference in firefox, its still on the left

    Code:
    <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>

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Code:
    .forumheader td {text-align: center;}
    ?

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that just aligns the text within that cell

  • #6
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Try

    CSS Code
    Code:
    .forumheader
    {
    margin:0px auto;
    }
    HTH
    Dan

    PS- America's Army is an awesome game!
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,703
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Sorry, I didn't look properly. I guess I have it and it's pretty simple:
    Code:
    .forumline {margin: auto;}
    Edit: Yeah, sure... beaten again!

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 276 Times in 270 Posts
    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. 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.

    You should also validate your HTML and validate your CSS 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.

    Edit: Looks like I got beaten to the post too.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    ..fastest draw in the web...



    @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
    Code:
    .forumheader
    {
    margin:0px auto;
    }
    You need, as Stephen pointed out,

    CSS Code
    Code:
    .forumline
    {
    margin:0px auto;
    }
    Sorry for the confusion
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #10
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the problem i get with your solutions is the <caption> stuff.

    i know its totally wrong, but it works
    Code:
    <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:

    Code:
    <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....

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 276 Times in 270 Posts
    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:
    Code:
    <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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by fatrat; 12-28-2006 at 12:03 AM.

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 276 Times in 270 Posts
    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.

    Code:
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #14
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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

  • #15
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by fatrat View Post
    this causes me to get a big gap before and after the <h1> row
    Use CSS to remove the browser’s default styling?

    Code:
    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):

    Code:
    * { margin: 0; padding: 0; }
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •