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.
Results 1 to 14 of 14
  1. #1
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table Width Problem in IE

    I'm having a bit of trouble with table widths in IE. Here's the page in question:
    http://www.tyreeonline.com/newsite/template.html

    If you look at the page in IE, you will see that the left and right sides do not stay the size I have indicated, instead the columns stretch out into the center column.

    Netscape shows it the way I WANT it to look. Which is very odd to me. Usually it's Netscape I have the biggest problem with.

    I have searched the net trying to find ways of fixing this to no avail. Any help would be greatly appreciated!

    Thanks,
    Matt Tyree

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I took a look, but got lost in all the tables.

    You'll get more help if you start by indenting and nesting your elements so the source is more readable.

    Second, moving all your background-images, widths, colors, and other formatting to a stylesheet would make isolating your problem much easier.

    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Thats what happned with me, too. Semantic coding can be harder at first, but pays off in the long run


    Dan [running from cliche police]
    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

  • #4
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm, about the only experience I have with CSS is links and a few other very specific uses. I'm not very familiar with using CSS for backgrounds, etc.

    As for the coding. I use Dreamweaver and it shows everything indented. When I view the source in IE and Netscape it shows it indented as well. Only problem with IE is that the word wrap in Notepad makes it a bit jumbled. What else should I do to make the code easier to read?

    Thanks for the reply...let me know what I can do to make it easier for you to look at.

    Thanks,
    Matt

  • #5
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Semantic coding? Man, I thought I actually knew something about HTML...but "semantic" is a new word for me! :-D

  • #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
    Same with me, until this thread...

    http://www.codingforums.com/showthread.php?t=52038#5

    Dan

    Say, would you look at that! I'm a regular old er.. ah.. Regular now @CF!
    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
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I'm kinda lost as to what semantics really are. Even after reading your thread.

    I gather that the premise is to not use tables...to use tags like <h1> and <p>

    To tell you the truth, I have no clue how to do the things I do with tables any other way.

    As for the <h1> tags...I hate using those things. I want more control over the size of my text, etc. So, why is using <h1> better than just defining the size of the text in CSS?

    I'm so confused!

  • #8
    New Coder
    Join Date
    Feb 2005
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You would be wise to learn CSS. Once you have done it once you will never go back to the old nested table sceme. It can be frustrating at first because of cross browser issues but in the long run your code will be cleaner and search engines will like you more.

  • #9
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess I won't really know the advantages til I actually do it. I'm just ignorant of the reasons why to switch.

    So, would there be around my original problem using CSS?

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi Tyree,

    First of all, I'd try to help with the table problem but I have a Mac, and debugging IE on Virtual PC is crazy talk. So, I'm not being a semantics snob, I'm just trying to help out on the one thing I can here .

    About semantics, and using h1 vs. something else...

    The movement to separation of style and content, and the "semantic web" is to make the "structure" part of your webpage actually have some of it. It's not that tables are evil-- it's that using them to layout your webpage is a hack, and ruins the semantics of your page. Here's an example, taken from your source:
    Code:
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td align="left">
         <div class="imagetitle">Image Title</div>
       </td>
       <td align="center">
        <div class="prevnextlinks">
         <a href="javascript:;">&lt; previous image</a> || <a href="javascript:;">next image &gt;</a>
        </div>
       </td>
       <td align="right">
        <font size="2" face="Arial, Helvetica, sans-serif"><a href="javascript:;">Gallery Index </a></font>
       </td>
     </tr>
    </table>
    What the browser, or Google, or a screen reader, etc is reading is something like this:
    Okay, I got a table full of data, one table row, a table cell with data aligned to the left, a division of the page with "Image Title" in it, another table cell full of data, a division of the page in this table cell, the data is centered, a link, a link, another table cell, a link...
    Paraphrasing, yes. Plus, I guess I picked a weird example, because it's a pretty arbitrary part of your webpage. But you get the picture. Now, you could markup this a little more semantically...
    Code:
    <dl>
     <dt>Drach Tyranus</dt>
     <dd><img src="DT.gif" /></dd>
    </dl>
    
    <ul id="gallery_nav">
     <li><a href="#">previous image</a></li>
     <li><a href="#">next image</a></li>
     <li class="index"><a href="#">gallery index</a></li>
    </ul>
    and now what the browser is reading is this...
    Let's see... I have a definition list... the definition term is "Drach Tyranus," and the description is this photo of Drach Tyranus. Now I have a list, the first list item is a link to the previous image. The next list item is a link to the next image. The third list item is a link to the gallery index. Okay!
    As you see, I tried to pick a way to mark up the content that actually described what the content was. What CSS does is apply the style of the page to those elements in the HTML, so your markup isn't cluttered with visual trickery.

    Hopefully this explains things a little more when you dig into the wide world of the semantic web...

  • #11
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since it looks like you're just getting started with this site, now would be a great time to get away from the tables.

    Fixing your particular problem will probably mean starting over from scratch. If you decide to go that way, here's a head start, and of course ask as you run into more issues.

    Change the paths to your images of course.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <title>
          Tyree
        </title>
    
        <style type="text/css">
          html, body { padding:0; margin:0; }
    
          #header { background:url(top_fill.gif); height:107px; }
    
          h1 { float:right; margin:0; padding:0; }
    
          #logo { float:left; }
    
          #ani_matt { float:left; }
    
          .clear { clear:both; }
    
          #footer_nav li { display:inline; }
        </style>
    
    
      </head>
      <body>
       <div id="header">
         <h1><img src="tyreeonline.gif" alt="Tyree Online" /></h1>
         <img src="tyree_logo.gif" id="logo" alt="" />
         <img src="animated_matt.gif" id="ani_matt" alt="" />
         <div class="clear"></div>
       </div>
    
    
       <!-- navigation -->
       <ul>
         <li><a href="#">Illustrations</a></li>
         <li><a href="#">Web Design</a></li>
         <li><a href="#">Profile</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Links</a></li>
       </ul>
    
       <h2>Subject for the following paragraphs</h2>
    
       <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    
       <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
    
      <!-- footer -->
      <ul id="footer_nav">
        <li><a href="#">Illustrations</a></li>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Links</a></li>
      </ul>
    
     </body>
    </html>
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #12
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since you're already using Dreamweaver, here's an explanation of the benefits of CSS on Macromedia.com.

    http://www.macromedia.com/software/d.../css_benefits/
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #13
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am seeing some of the benefits from reading different articles on the web. However, at the moment, virtually all of this is Greek to me!

    It will take a LOT of getting used to. I can make sense of alot of what you wrote, but some of it is beyond me.

    How does all of this react to php? The whole site will be php driven in the end with dynamic areas within the pages.

    Man o man...my mind is whirling around in circles right now!

  • #14
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The PHP shouldn't be a concern as far as this goes.

    Whatever you're doing with PHP will have happened before the page is ever served. Whether it's got a .php or .html extension, the .css will interact with your HTML elements in the same way.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.


  •  

    Posting Permissions

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