6 replies [Last post]
cdembek
Offline
newbie
Mass
Last seen: 15 years 8 weeks ago
Mass
Timezone: GMT-5
Joined: 2007-09-26
Posts: 4
Points: 0

Ok I really thought I had my CSS coding working on just about all web browsers.. apparently not. I use the width="auto" for my right hand div tag and have my CSS written so as the right side content grows in width the page widens. The layout works in just about all browsers except cretin builds of IE6. I was wondering if anyone had advice on how to insure that the width of the page grows and doesn't cut off content.

The site is www.solidvision.com

The page I am talking about is

http://www.solidvision.com/training/coursedescription.php?recordID=9

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You should fix the markup

You should fix the markup errors. Among other errors, you have two DTDs and <head> elements.

There is likely no good to come of {width: auto;}. A block element automagically takes all the available width after making allowance for padding, borders and margins. Since you've specified the width of the left-hand cell, the right cell is set by default.

Your markup is far from semantic, using markup as a presentation tool. I would completely refactor without tables or blockquotes used as layout structures. Font tags? They were made obsolete in 1999.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cdembek
Offline
newbie
Mass
Last seen: 15 years 8 weeks ago
Mass
Timezone: GMT-5
Joined: 2007-09-26
Posts: 4
Points: 0

well what are your thoughts

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Much better than the first.

Much better than the first. You should make it a habit to check against the W3 html validator. You still have some syntax errors, eg. <ul> may only have <li> child elements. See the nav menu on my sig link for one way to do it.

A table for the schedule is perfectly OK, after all, it does contain positionally related data.

I have to question the need to nest <div>s eight or more deep.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cdembek
Offline
newbie
Mass
Last seen: 15 years 8 weeks ago
Mass
Timezone: GMT-5
Joined: 2007-09-26
Posts: 4
Points: 0

Gary thanks for your

Gary thanks for your feedback...

What I am attempting to do is the following

PHP document 800px wide
Header - include once "header includes file location"

Body

Left Col Width 200px Right Col Width fills out the 600px and can force the page to expand

Footer - include onece "footer includes file location"

Perhaps you could suggest something cleaner than what I have.

last I checked out several sites against that W3 html validator... man that points out all types of errors.. like where I link my css file, tells me I have it in the wrong place

Again thanks... I find myself always searching on how to correct my coding.. just part of learning by reading and doing

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The absolute first thing you

The absolute first thing you must do is create a well structured page with purely semantic markup. NO PRESENTATION stuff. That will also serve as your template for the PHP/backend stuff. CSS and javascript don't go on until the html is right.

Compare the document I've posted here to your original. View it with styles turned off, or in a non graphical browser such as Lynx. If it's not a usable page, something's wrong.

Once the markup is okay, then add css in a top-down manner. That is, create contexts for each area of the page. These larger aggregate containers are what you move into place. Then move on to elements within the big groups, then to the individual elements. In this way, for example, you can easily style the four different menus without getting tired-head trying to keep everything straight.

I've attached a background image to replace the larger one you had.





SolidVision Training Schedule | Listed by Dates

/**/




  • Home |


  • Support |


  • Blog |

  • Contact us




  • CAD


  • CAM


  • CAE


  • PDM



  • Mechanical Design |


  • Design Validation |


  • Data Management |

  • Design
    Automation |


  • Calculation
    Management |


  • Hardware




  • Services |


    • Support |

  • Training |


  • Consulting
    |

  • Engineering
    Resources




  • News and Events |

  • Latest
    News |


  • Seminars



  • Success
    Stories |


  • Company





  • Training
    Courses


  • Directions to
    SolidVision




  • Schedule/Register





    • SolidWorks



  • COSMOS







  • SolidWorks 2007 Training Schedule




    Sort by: Dates / Course







    Register for your best time and location










    Date(s)

    Course


    Seats Open


     





    Oct 09 - 12


    SolidWorks
    Level 2

    Somers, CT


    8



    Register



    Oct 15 - 18


    SolidWorks
    Level 2

    Littleton, MA


    5



    Register




    Oct 22 - 23


    Sheet
    Metal and Weldments

    Littleton, MA


    8


    Register




    Oct 24


    SolidWorks
    File Management

    Littleton, MA


    8



    Register




    Oct 25 - 26


    PDMWorks
    Workgroup for SolidWorks

    Littleton, MA


    5



    Register







    cheers,

    gary

    AttachmentSize
    content-bg-small.gif 592 bytes

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    cdembek
    Offline
    newbie
    Mass
    Last seen: 15 years 8 weeks ago
    Mass
    Timezone: GMT-5
    Joined: 2007-09-26
    Posts: 4
    Points: 0

    Gary thanks for the

    Gary thanks for the suggestions... at some point I should look into taking an official class on CSS. So far everything I have learned is self taught via the web and books.