Web Hosting Forums

Page 1 of 2 1 2 LastLast
Results 1 to 15 of 22

This is a discussion on Table Help in the Hosting Talk & Chit-chat forum
In Firefox, this page looks great, I'm extremely happy with the layout however when I look at it in Internet Explorer its a different story. ...

  1. #1
    Loyal Client
    Join Date
    Jul 2004
    Location
    Miami, Florida
    Posts
    16

    Table Help

    In Firefox, this page looks great, I'm extremely happy with the layout however when I look at it in Internet Explorer its a different story. The tables don't seem to line up nicely like in Firefox, if someone could take a chance and look at my HTML and point out where I went wrong with it.
    Thanks.

    http://www.pskfiu.com/index2.php
    Last edited by PSK21; 09-19-2005 at 10:25 AM.

  2. #2
    Community Leader jason's Avatar
    Join Date
    Sep 2001
    Location
    Rochester, NY
    Posts
    5,884
    I just get a www.pskfiu.edu cannot be found error when I try to access it. I'll try a gain later.

    --Jason
    Jason Pitoniak
    Interbrite Communications
    www.interbrite.com www.kodiakskorner.com

  3. #3
    Loyal Client
    Join Date
    Jul 2004
    Location
    Miami, Florida
    Posts
    16
    My bad..

    http://www.pskfiu.com/index2.php

    Sorry, we have a hurricane heading this way, and I got confused with my Universities website.

  4. #4
    Yeah, I know a LOT! Vin DSL's Avatar
    Join Date
    Mar 2003
    Location
    Arizona Uplands
    Posts
    10,661
    Well, you have two sets of html, head, body tags, et cetera, and no ul tags (for li). I think I would start there...
    DISCLAIMER Any resemblance between the views expressed above and those of the owners and operators of this system is purely coincidental. Any resemblance between these views and my own are non-deterministic. The existence of Vin DSL is questionable. The existence of views in the absence of anyone to hold them is problematic. The existence of the reader is left as an exercise in the second-order coefficient.

    No Guts, No Story! VinDSL 2010

  5. #5
    Old Hillbilly Connie's Avatar
    Join Date
    Sep 2001
    Location
    Hills of Missouri
    Posts
    2,491
    Possibly because you have two doc types, <html><head></head><body> tags on the page.
    The second set is a little over half way down on the page.

  6. #6
    Loyal Client
    Join Date
    Jul 2004
    Location
    Miami, Florida
    Posts
    16
    Alright, I fixed that page, it has a php include script which includes a page from a different directory which I use as a new server. However, it did not solve my layout issue, when I view it in Dreamweaver the tables are like they should be when you view the pages in Firefox, however in IE its a different story.

    Here is another page without the php include script
    http://www.pskfiu.com/nationalhistory.html

  7. #7
    Community Leader jason's Avatar
    Join Date
    Sep 2001
    Location
    Rochester, NY
    Posts
    5,884
    When I've seen that kind of behavior in the past it is usually because you are using float's in your navigation and your widths add up to more than 100% of the available space. I also noticed that your HTML code (when I did a view source) is full of errors (multiple <body> tags, content after the </html> tag, etc.), so that could also contribute to problems.

    Without looking too deep into your CSS, I'd suspect that you have something that loos similar to this:

    Code:
    <div id="container">
      <div id="navigation" style"width: 25%">
        Navigation content here
      </div>
      <div id="content" style="float:left; width: 75%; margin-left: 2px;">
        Main content here
      </div>
    </div>
    Your actual layout may not be exactly like that, but the idea the same. What that code creates is two blocks of content, sitting inside a container block. The container has a certain width. The first inside block, which contains your navigation, is set to be 25% of the width of the container. The second block, which contains the main content for the page, is set to be 75% of the width of the page, but this also has a 2 pixel margin attached to it so that there is a little space between the edge of the navigation and the start of the text, to aid readability and improve the look of the site. Normally the content block would show below the navigation block, but the "float:left" definition tells it to render to the left of the navigation element if there is enough room.

    The problem here is that the space occupied by do not add up to 100% because the margin takes up space. In other words:

    navigation-width + content-margin + content-width = 100%

    However, in this case
    25% + 2px + 75% = 100% + 2px, <> 100%

    Therefore the content element does not have room next to the navigation element and therefore is rendered below it. To fix the problem, change the widths so that they do not add to 100%, for example set the content element to width:99% or width:98%.

    When using CSS, there are several measurements to factor into the width of an element. They are, in oder: margins, borders, padding, and (actual) width.

    Margins are the amount of space from the edge of an adjacent or containing object to the border of this object.

    Borders: the visual lines sorounding the element.

    Padding: the wide space from the element's boder to the edge of content contained within it.

    Width: the space allotted to child content within the given element

    In CSS, the width of an element is equal to
    width-of-margin + width-of-border + width-of-padding + element's-width

    To add to this, there is a box model problem in some versions of IE, where that browser treats the witdth setting as the width of the whole element instead of just the width of the contents.

    Long story short, try reducing the widths of your elements so that they don't add up to 100% and see if that helps.

    --Jason
    Jason Pitoniak
    Interbrite Communications
    www.interbrite.com www.kodiakskorner.com

  8. #8
    Old Hillbilly Connie's Avatar
    Join Date
    Sep 2001
    Location
    Hills of Missouri
    Posts
    2,491
    If removing the additional tags did not take care of the problem then the Div widths might. change one of them so the total width is not wider than 98%.

    What do you mean by viewing the site in Dreamweaver? Dreamweaver is a WYSIWYG program and not a web browser. A WYSIWYG editor does not alway display the page like a browser. I did not look at your page using IE. Perhaps others have. If your basing your opinion on what Dreamweaver shows then I suggest you look at the page with your browser.

  9. #9
    Loyal Client
    Join Date
    Jul 2004
    Location
    Miami, Florida
    Posts
    16
    Thanks for your input guys, I wasn't able to figure out the problem so I redesigned the template, I am very much a beginner and have just recently started to play with CSS Layouts and such. Another other critiques would be welcomed.

  10. #10
    Yeah, I know a LOT! Vin DSL's Avatar
    Join Date
    Mar 2003
    Location
    Arizona Uplands
    Posts
    10,661
    CSS is real tricky! I've been using style sheets since day-one.

    I'll take a look at your CSS when I get home...
    DISCLAIMER Any resemblance between the views expressed above and those of the owners and operators of this system is purely coincidental. Any resemblance between these views and my own are non-deterministic. The existence of Vin DSL is questionable. The existence of views in the absence of anyone to hold them is problematic. The existence of the reader is left as an exercise in the second-order coefficient.

    No Guts, No Story! VinDSL 2010

  11. #11
    Yeah, I know a LOT! Vin DSL's Avatar
    Join Date
    Mar 2003
    Location
    Arizona Uplands
    Posts
    10,661
    Heh! I'm not home yet, but I can tell you http://www.pskfiu.com/kappacss.css is totally jacked up!

    That's an HTML file, not a style sheet...
    DISCLAIMER Any resemblance between the views expressed above and those of the owners and operators of this system is purely coincidental. Any resemblance between these views and my own are non-deterministic. The existence of Vin DSL is questionable. The existence of views in the absence of anyone to hold them is problematic. The existence of the reader is left as an exercise in the second-order coefficient.

    No Guts, No Story! VinDSL 2010

  12. #12
    Loyal Client
    Join Date
    Jul 2004
    Location
    Miami, Florida
    Posts
    16
    What do you suggest I do, I created the style sheet using dreamweaver, its the only way I really know how to make the CSS style sheet. If you could point me in the direction it would help out.

    EDIT:
    Vin, I have my style sheet in my templates folder on the web server.

    http://www.pskfiu.com/Templates/kappacss.css

    Does it matter? Sorry again for the n00bness of my questions but everyone has to start from somewhere.
    Last edited by PSK21; 09-19-2005 at 11:45 PM.

  13. #13
    || $name ne 'R.Stiltskin'
    Join Date
    Jun 2003
    Location
    Tejas
    Posts
    2,414
    Quote Originally Posted by PSK21
    What do you suggest I do, I created the style sheet using dreamweaver, its the only way I really know how to make the CSS style sheet. If you could point me in the direction it would help out...

    Does it matter? Sorry again for the n00bness of my questions but everyone has to start from somewhere.
    If Dreamweaver has CSS editing abilities, use 'em. All you really need is a text editor and a good CSS guide and the web has a zillion of those to review. Like anything web, start small and grow according to your abilities. There was a good program I sampled for about a month many moons ago that can get you used to proper syntax - it was called "TopStyle" and did what it did very well. The best way, however, is to look at other stylesheets and note the different applications to formatting technique. Don't copy CSS sheets verbatim (unethical and a copyright infringement) but do review them for hints.

    Does the path to the stylesheet matter? Not at all. You don't even need it on the same server though pulling sheets from a different server can slow things down a bit. Your current stylesheet looks fine though currently sparse. It'll grow with time and as you convert more of your HTML template to XHTML.

  14. #14
    Yeah, I know a LOT! Vin DSL's Avatar
    Join Date
    Mar 2003
    Location
    Arizona Uplands
    Posts
    10,661
    Quote Originally Posted by PSK21
    What do you suggest I do, I created the style sheet using dreamweaver, its the only way I really know how to make the CSS style sheet. If you could point me in the direction it would help out.

    EDIT:
    Vin, I have my style sheet in my templates folder on the web server.

    http://www.pskfiu.com/Templates/kappacss.css

    Does it matter? Sorry again for the n00bness of my questions but everyone has to start from somewhere.
    Well, I don't know what you did, but that bogus junk is gone from the CSS file now... And, your site is working in IE just fine.

    This is what I'm seeing as your style sheet: http://www.pskfiu.com/kappacss.css and it looks good now!
    DISCLAIMER Any resemblance between the views expressed above and those of the owners and operators of this system is purely coincidental. Any resemblance between these views and my own are non-deterministic. The existence of Vin DSL is questionable. The existence of views in the absence of anyone to hold them is problematic. The existence of the reader is left as an exercise in the second-order coefficient.

    No Guts, No Story! VinDSL 2010

  15. #15
    Yeah, I know a LOT! Vin DSL's Avatar
    Join Date
    Mar 2003
    Location
    Arizona Uplands
    Posts
    10,661
    Quote Originally Posted by Spathiphyllum
    Your current stylesheet looks fine though currently sparse...
    Heh! You should have seen it a few hours ago...
    DISCLAIMER Any resemblance between the views expressed above and those of the owners and operators of this system is purely coincidental. Any resemblance between these views and my own are non-deterministic. The existence of Vin DSL is questionable. The existence of views in the absence of anyone to hold them is problematic. The existence of the reader is left as an exercise in the second-order coefficient.

    No Guts, No Story! VinDSL 2010

Page 1 of 2 1 2 LastLast

Bookmarks

Posting Permissions

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