The site I am developing is only my third site. It is the first site in which I am using percentages so that the text and images expand and contract when zooming in and out. I am trying to "perfect" the home page to use as a model for the other pages so the links are not yet active and the content is primarily placeholders.

Both the markup and css validate but two significant problems and several minor problems are apparent when viewing the site using Firefox and Safari. I am hoping that someone can help me find solutions.

1. When the width of the content exceeds the size of the window, either because of zooming in or resizing the window, the right column moves down under the left sidebar. I want the columns to retain their positions and a horizontal scroll bar to appear at the bottom of the window. I tried adding an overflow statement but perhaps I did it wrong or placed it in the wrong place.

2. The same phenomenon occurs when the window is resized to become quite narrow. I tried specifying a min-width for the wrapper, container and mainContent divs but the problem persists.

The site can be viewed at: http://academyofleisuresciences.com/alsDev/index.html

The css can be viewed at: http://academyofleisuresciences.com/alsDev/css/main.css

Another factor that adds to my confusion is an inconsistency in producing these results. When I use the Dreamweaver "preview in ..." function to view this site in Firefox or Safari the problems are much more pronounced than when I view them directly through the browsers. For example, the links in the left sidebar should be blue. They are when viewed directly but when I view them using the Dreamweaver preview function they are white. It is as if the styling of the links in the footer has overridden the styling of the links in the sidebar.

There are also a number of minor but unsightly alignment problems with the header and footer. When zooming in and out at certain sizes

The right sides of the elements become slightly miss-aligned. All have a maximum width of 100% so I cannot figure out what is causing that to occur.

A thin line becomes visible between the styled top of the navigation and footer graphics and the navigation and footer divs.

Finally, I would like the top (blue) border above the leftSidebar div to end above the F in "Fellow Nominations Due" and the end of the border above the mainContent div to align with the right side of the image of the ALS President.

I would greatly appreciate help in solving these problems. I am on digest so please cc me directly on any messages you send.


--
Tony

Tony Tinsley
425.493.6833
howard.tins...@frontier.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to