SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page validated, but I'm having problems...

    Hi all,

    I just built a site to display some of my photographs. The site links 19 pages. There is supposed to be an absolutely positioned vertical navigation bar on the left, from which visitors can go directly to a given photo. On top of the navigation bar, there are "Previous/Next" buttons, so the pictures can be viewed sequentially. There are also matching Previous/Next buttons beneath the navigation bar.

    On my Mac, the site looks exactly as it is supposed to look when viewed through Safari 3.2.1. When viewed through Firefox 3.0.11 on the Mac, some of the navigation elements render larger than thru Safari, so that the lower Previous/Next buttons (which I also used absolute positioning on) cover the lower part of the vertical navigation bar.

    Nevertheless, all 19 of the pages validated (HTML 4.0.1 transitional), and I merrily put that little W3C icon on each and every page.

    The plot thickens. I viewed the site on a PC at my local library, through Mozilla and IE. I did not take note of the version of either, but they are usually fairly up-to-date. However, this site looked TOTALLY BROKEN through both browsers! The navigation displayed horizontally, the positioning was all weird -- too many things gone wrong for me to itemize.

    Alas, before I saw the site through this PC, I sent out a mass mailing to a bunch of friends. A few commented "Looks nice!" etc...no one has said it looks broken, but then, how to sugar coat something that looks so awful?

    So the HTML validated. I did not try to validate the CSS. I'm baffled, but I'm a newbie, too...

    Any insights would helps.

    The site:

    http://home.comcast.net/~johnkelin/ray.html

    The CSS:

    http://home.comcast.net/~johnkelin/jazz.css

    Thank you.

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Keep in mind, that just because it's valid HTML doesn't mean it will display correctly across all browsers.

    I'm glad to see you're using divs, a lot of beginners still use tables

    I checked the site in IE and yup, as I expected it didn't work. IE is infamous for breaking websites and a pain in all our asses.

    My bet is you're having problems with floats and absolute positioning. There's no reason to use absolute positioning on this site, you should be able to do it all with floats.

    Try doing something like this
    HTML Code:
    <div id = "wrapper">
    <div id = "header">
      <div id = "photography"></div> <!-- float:left -->
      <div id = "header-info"><!-- float:left -->
    </div>
    
    <div id = "body">
      <div id = "navigation">
         <ul>
            <li></li>
            <li></li>
         </ul>
         <div id = "prev"></div>
         <div id = "next"></div>
      </div><!-- float:left -->
      
       <div id = "content">
           <div id = "photo"></div>
       </div><!-- float:left -->
    
    </div>
    </div><!--end of wrapper -->
    Then adjust your css accordingly.

    note: Don't just copy and paste the above example, it's just to give you an idea of how to structure your site.
    Check out my web design blog.
    http://www.bolducpress.com

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply, and thanks for the suggestions. I"ll be a while sorting it out...

    I thought absolute positioning would place certain elements right where I wanted them -- the whole point of it, right? Why would floats be an improvement?

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolute positioning removes the element from the flow of the page and doesn't expand with your content.

    Floats on the other hand push your content to the left or right and expand with your content.

    to be honest with, I rarely use absolute positioning. And if I do it's for stuff like this.

    http://cssglobe.com/lab/tooltip/03/
    Check out my web design blog.
    http://www.bolducpress.com

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To the kind soul who has patiently responded to this thread, and to anyone else who might be following it...

    The problems I've had were (and are) with this web site:

    http://home.comcast.net/~johnkelin/ray.html

    ...and they seem to be mostly with the vertical navigation menu, which is supposed to hug the far left of the browser. It is seriously broken through IE and Mozilla/Firefox, but normal through Safari.

    I've done a little experimenting, and suspect -- though I have not concluded -- that the problem is not so much with float or absolute positioning, but with styling of the navigation.

    Just below is a URL to a variation on the same site. Note that most of the positioning has been removed; it is (temporarily) supposed to be like that. (I'm removing stuff trial-and-error to see how it affects the rendering.)

    http://home.comcast.net/~johnkelin/ray_2.html

    In this example, most of the various elements should appear crowded to the upper-left corner. The troublesome menu bar should, here, be a very plain looking vertical stack -- properly positioned, but without styling.

    Below is the CSS rule that I deleted from the original, which removed the styling. Removing it seems to have restored the positioning of the navigation (by the time I deleted the rule below, I had already removed some padding and other stuff):

    #navigation a:link, #navigation a:visited {
    float: left;
    width: 130px;
    margin-right: 0px;
    padding: 0px 0px px 0px;
    color: ;
    background-color: ;
    text-decoration: none;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    margin: 0px;
    }

    I know there are still problems remaining and that I'm probably overlooking stuff, in my beginner's innocence. I think my use of the "div id=navigation" is still problematic. But, can anyone tell me why removing the above rule seems to restore the positioning (at the expense of the styling)?

    This must be a confusing post. I beg your indulgence.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try adding "display:block" right now the link is still inline.

    so it looks like:

    HTML Code:
    #navigation a:link, #navigation a:visited {
    display:block;
    float: left;
    width: 130px;
    margin-right: 0px;
    padding: 0px 0px px 0px;
    color: ;
    background-color: ;
    text-decoration: none;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    margin: 0px;
    }
    Check out my web design blog.
    http://www.bolducpress.com

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your patient replies.


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
  •