CSS div problem - widths and scrolling

[mryang]

Hi - hope someone can help me as this is doing my suede in!

I know it must be something simple but I am hoping that some expert on here can put their finger on what I have done wrong easily.

If you look at my site I have tried to convert it to use CSS - I'm getting there slowly! Anyway the site is Blank dvdr disc and case products for duplicators and replication. - you will see a black colum on the right hand side containing SEARCH, GO TO CART and CHECKOUT amoungst other items. The problem I have is this - if I make the window narrower everything seems to adjust fine until you get to a certain width then the items within the black column start to drop to the bottom of the column i.e. off the visable screen - if you are unsure what I mean just keep resizing your browser window narrower and narrower while watching the right hand column....

Any help would be much appreciated.

Simon

[a53mp]

You need to give the sectionLinks id a width, probably 200.

you also should give the main content a width so that if the site is shrunken down it wont look like crap. This is why its better dealing with a fixed width.

[kyobul]

Several options :

1. You have to constrain the DIV blocks. If you fix a width just for the black column, you'll still have a problem with the remaining one. To avoid fixed pixels widths you can constrain both as for example 70% to 30% relative width, with a "display:block" adjustment.
You'll have to set also a "min-height:, height:auto and height fixed width beacause a div blcok can behave inproprely concerning its lenght.

2. You can leave as is for the main divs and constrain a sub div block within the black column div using same method as written above.

3. Or you can fix width just for the elements contained within the black div (images / ul lists, etc..)

[Dinghus]

Or you can do the smart thing and go back to tables. As glamorous as purely css seems, you have now encountered the reason many experienced web programmers have abandoned it except for specific instances. Your pages will break too easily and browsers don't render the same. Too much work for too little return. Speed? The difference in speed is almost 0.

One thing that will drive customers away is a site that breaks. I know I hate it when opening a site and pieces of the page are moving all over the place as the divs get lined up properly. Ugly.

Being a businessman needing to get sites out fast, monetarily css sites just don't make sense. I'll say it again. Too much humbug for too little return.

But if you insist on keeping it, I wouldn't worry so much about this problem. If somebody squeeeeeezes it down that small they only have themself to blame for the way the site reacts.

[morestar]

you also have to understand that if you shrink the width of the browser to below, let's say 800 pixels than basically no site is going to look as good as it should...

is it possible that you're worrying about something that you have no control over?

[subsystems]

One old trick that I've used in a pinch is to create a single pixel transparent GIF. Stick the gif inside the div and set it's width attribute to the minimum width you want for the div. Think of it like propping open the div with a transparent stick.
Doing this allows the div to grow wider but it stops shrinking when the div reaches the ends of the gif.

When used in say your header div, this method has the effect of giving you both a flowing and fixed width layout. Some of the advantages of both worlds.

There are better ways of fixing issues like yours but it can be another tool in your toolbox.

This of course won't work if you have scroll bars turned on in the div.

[ddwalker1]

kyobul

Kyobul is correct!

contrary to some who have responded to your request for assistance, CSS is the way to go. Maintaining a site via css is so much easier than traversing table information within your code..

[dharrison]

hi mryang

You definitely need to give your right-hand column a width in pixels as the images do stick out of the column when resizing the screen.

As whats already been covered on this thread, I am still trying to work out why you need to go too small? The average resolution is about 1024 x 768 (800 x 600 are now few). Unless of course you are trying to cover mobile and handheld PCs, whereas then I suggest you set up a separate stylesheet for that purpose.

Hope this helps.

[jpatriar]

I'm not an expert by any means but have come across the very problem you're encountering but on a 3 column layout.

what you need to look up is css overflow property for the column div and perhaps add a white-space property to text elements. white-space: nowrap

belows is how I did my far right column. If I recall I had to make it a percentage as a fixed pixel width wrapped every time. I tested this with IE, FF, Opera and Safari. If you were to set say, overflow: auto you'd get the scroll bars I believe.

/* rightcol css */

.rightcol {
float: right;
width: 14%;
padding: 0;
margin: 0 2% 1% 0;
background-color: #fff;
overflow: hidden;
}

[mryang]

Wow, thanks for all the replies so far people, and at last I have found fame on the webproworld newsletter - I feel like a part of the team now, even if it is because of my ineptitude!

What I am going to do is let the replies keep coming until a concensus is reached as to what is the best way to solve this problem.

[kyobul]

Instead of wiating for "consensus" get yourself to work and try things.

[NJ]

Funny that you should bring up that problem! I just took a site with that problem to my CSS class to let them figure out the problem. The site problems were

1) There was no container/wrapper/main layer to hold everything - this didn't cause the problem, but we picked it up anyway.
2) All the styles were internal - no external style sheet
3) Sloppy CSS code - missing semicolons after the last property in each style

Now to the original problem:
4) The two "containing" layers were set to 700px wide.
5) The bottom "containing" layer contained the layers Col1 and Col2 (great naming coventions!)
6) Adding the width of the two layers inside the bottom layer, the padding and the margins came to 700px exactly. So far, so good.
7) However, the bottom containing layer also had 10 px of padding (and a border of 10px).
Conclusion: the math didn't add up.

However, the site renders fine in IE 7 and Mozilla. Only had a problem with IE6.

The most irksome thing, though is that the site was built with a free online CSS template from a .org site. How did they get away with such sloppy code?

[oneofmanytims]

If you're still tallying votes for a consensus, count my vote with the table-layout crowd. Spacer gifs can be handy also.

Your site will be non-compliant but it will view predictably amongst browsers and platforms (non of which are fully compliant, btw)

[icoombs]

I find using a header div with a min-width: 800px; stops the page shrinking below the size specified so as long as you set the widths for fixed columns like side columns and have The main content column with no width then its just the content column that expands and contracts with browser resizing. The minimum width of the content column is then the min-with of the header minus the width of any fixed columns.

[NJ]

Originally Posted by oneofmanytims

If you're still tallying votes for a consensus, count my vote with the table-layout crowd. Spacer gifs can be handy also.

Your site will be non-compliant but it will view predictably amongst browsers and platforms (non of which are fully compliant, btw)

I appreciate your comment because I have taken some flak for still teaching tables to my new web development students and for building with tables for small business owners who want to work on their own websites. I don't plan to give up CSS, but if I'm working with someone new to web development, tables are much easier to learn and maintain.

[NJ]

Originally Posted by icoombs

I find using a header div with a min-width: 800px; stops the page shrinking below the size specified so as long as you set the widths for fixed columns like side columns and have The main content column with no width then its just the content column that expands and contracts with browser resizing. The minimum width of the content column is then the min-with of the header minus the width of any fixed columns.

min-width and max-width would be great tools if IE/Win would support them consistently!

[Modified]

Originally Posted by NJ

min-width and max-width would be great tools if IE/Win would support them consistently!

I love min-width max-width IE6 is a bugger but I feed it width:expression() and it's happy. The full code is:

* html .container {width:expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1270? "1270px" : "auto");}

where * html targets IE6; .container is the class name of my div; document.body.clientWidth < 800? "800px" is the min-width (800px in this case); and document.body.clientWidth > 1280? "1280px" is the max-width (1280px in this case)

[NJ]

Originally Posted by Modified

I love min-width max-width IE6 is a bugger but I feed it width:expression() and it's happy.

Thanks, Modified! It's so helpful when forum members share coding ideas! It's kind of a bummer though that we have to resort to JavaScript to fix CSS! Rollover menus are another place where JavaScript has to be used to supplement the CSS for IE6.

[oneofmanytims]

stay with single-image rollovers, using CSS. works in all IE versions.

[Rod Abbotson]

I changed my site from a table layout to CSS layout about two years ago. I encountered similar problems.
I experimented with several options and then decided to go for fixed widths and heights on all my divs,
I then had to tweak them to make everything cross browser compatible.
How I learned was to keep my table layout page and then see if I could duplicate is EXACTLY with CSS layout ...this is an excellent way to get the hang of CSS layout...I have sinced used this technique to help convert other websites from table layout to CSS.

For displays on handhelds etc...the old handheld stylesheet is no longer revelent due to the way things are now displayed on handheld devices..they will display entire web pages easily now. The best thing to do here is to make sure ALL you code validates. I know a lot of you on this forum think that validation does not matter and only 6% of websites validate...also its helped my SEO although the SEO guys will shoot me down in flames for saying that!

Personally if a professional web designer cannot design a site in valid code as stipulated by the W3C
then its just down to a couldn't care less selfish attitude that tends to prevail in todays society! Including Google etc!!

Rod

[NJ]

Originally Posted by oneofmanytims

stay with single-image rollovers, using CSS. works in all IE versions.

Do you mean for dropdown menus? I prefer plain <ul><li> dropdowns for accessibility issues.

[NJ]

Originally Posted by Rod Abbotson

For displays on handhelds etc...the old handheld stylesheet is no longer revelent due to the way things are now displayed on handheld devices..they will display entire web pages easily now. The best thing to do here is to make sure ALL you code validates. I know a lot of you on this forum think that validation does not matter and only 6% of websites validate...also its helped my SEO although the SEO guys will shoot me down in flames for saying that!


Rod

Thanks for the information about the handhelds!

Web development isn't a set of mutually exclusive tasks. They all intersect: design, programming, usability, SEO and other marketing, ... Nobody gets an ivory tower in this industry! Had a heck of a time convincing the CS department that websites aren't just about code, data storage and content management.

[oneofmanytims]

Originally Posted by NJ

Do you mean for dropdown menus? I prefer plain <ul><li> dropdowns for accessibility issues.

I'm not so hot for drop downs either. I just meant using a single image for a:link, a:active, and a:hover. the image contains all three backgrounds and you just change the background position. its simpler than javascript rollovers and you don't have to preload the images.

[NJ]

Originally Posted by oneofmanytims

I'm not so hot for drop downs either. I just meant using a single image for a:link, a:active, and a:hover. the image contains all three backgrounds and you just change the background position. its simpler than javascript rollovers and you don't have to preload the images.

What do you to do for accessibility, if you use images for the links? With background images, you don't have the "alt" tag possibility.

[oneofmanytims]

Originally Posted by NJ

What do you to do for accessibility, if you use images for the links? With background images, you don't have the "alt" tag possibility.

could use a background color

this post deserves its own thread . .. . stay tuned.

[Modified]

Originally Posted by NJ

What do you to do for accessibility, if you use images for the links? With background images, you don't have the "alt" tag possibility.

It's not an accessibility issue. The image isn't used as the link but is used in the background to cause the rollover effect. The link is still a text link, all his doing is playing around with what appears behind the text link by using a background image and background-position.

[oneofmanytims]

Guess I missed the issue. Exactly who do you want to make the page accessible to ? I thought Tj was talking about limited bandwidth and no javascript and no images.

[NJ]

Originally Posted by oneofmanytims

Guess I missed the issue. Exactly who do you want to make the page accessible to ? I thought Tj was talking about limited bandwidth and no javascript and no images.

In my opinion, all websites should consider how the programming/coding choices they make affect people with visual and motor disabilities. I had a gentleman as a guest speaker in my class, who is completely blind. This man travels the world for his job. He demostrated how difficult it is for him just to get the weather information off the weather page on our local newspaper site. I have a client with Parkinsons disease. Roll over menus make it very difficult for him to navigate a website.

There are ways to get the "look" you want and still make your site accessible! In my opinion, that's just good manners!

[oneofmanytims]

Originally Posted by NJ

In my opinion, all websites should consider how the programming/coding choices they make affect people with visual and motor disabilities. I had a gentleman as a guest speaker in my class, who is completely blind. This man travels the world for his job. He demostrated how difficult it is for him just to get the weather information off the weather page on our local newspaper site. I have a client with Parkinsons disease. Roll over menus make it very difficult for him to navigate a website.

There are ways to get the "look" you want and still make your site accessible! In my opinion, that's just good manners!

Sounds like a job only you could handle, NJ . ..

But if i were determined to make my sites more accessible, what actions would I take ?

[NJ]

Originally Posted by oneofmanytims

Sounds like a job only you could handle, NJ . ..

But if i were determined to make my sites more accessible, what actions would I take ?

Thanks for the vote of confidence, but I'm not an expert in that area! And, it's somewhat of a moving target as technology changes, but here are some things I've learned.

20% of US males and 5% of US femails are red - green color blind. That means that red and green are the same color. My own site is very heavy on the green; so, I asked one of my CS professors, who is completely color blind to tell if he could read the words on my website. He said he could, meaning that there was enough contrast on the page, in spite of the colors.

Don't do large areas of reverse text - light colored text on dark backgrounds. I have gone to web pages with technical information, which I couldn't read very well, because the 20-somethings who built it put white text on a black background. Great for their eyes, bad for the over 40 eyes!

Use alt tags to tell reader software what is in a graphic.

Make sure the labels and name on your text fields in forms tell what that field is. Blind people can fill out online forms, if their reader software can tell them what the field is.

Use content structure. That means to identify content with tags. For example, an H1 tag will identify the topic of a web page to a screen reader. If you identify navigation areas with CSS ID tags, then the screen reader can jump right to the content, instead of making the visually-impared viewer listen to every single word in the banner and navigation first.

Find a site with three levels of rollover menus and watch someone with arthiritis try to use them. It will be painful for both of you. However, you can keep your rollovers, as long as the first level word is clickable and the section itself is navigable.

Anyone out there have other suggestions? I'm still an accessibility novice!

[Rod Abbotson]

Whatever you do don't use tables for layout! In the html use em and strong tags instead of i and b

Use alts and titles on images and navigation links but make sure they make sense.

Rod

[NJ]

Originally Posted by Rod Abbotson

Whatever you do don't use tables for layout! In the html use em and strong tags instead of i and b

Use alts and titles on images and navigation links but make sure they make sense.

Rod

Rod, let's pretend I don't know anything about the tables issue. Can you outline a few specific reasons why you give the advice not to use them.

[Rod Abbotson]

Talking here about screen readers for visually impaired users, the screen reader will read a table set out for tabular data OK as the original purpose of tables...I still use tables for price lists and other lists. BUT when used for layout and nested all over the place, what the screen reader reads may not make much sense and things can be read in a weird order...

[NJ]

Thanks, Rod! Excellent response. Here is an article about accessibility:
Accounting the Importance of Web Accessibility

[oneofmanytims]

Originally Posted by Rod Abbotson

Talking here about screen readers for visually impaired users, the screen reader will read a table set out for tabular data OK as the original purpose of tables...I still use tables for price lists and other lists. BUT when used for layout and nested all over the place, what the screen reader reads may not make much sense and things can be read in a weird order...

What about using tables for site navigation - instead of <ul> ?

[NJ]

Tables are great for making a tidy looking navigation area. I build them regularly myself. But, getting back to the intent of tables, that's the problem. Using tables to make tidy little navigation bars wasn't what tables were designed to do - display tabular data. The content structure of a set of links is more like a list of individual items, hence <li>. That's the purist version.

But, since when does real life fit into neat little boxes. Here are some thoughts:

1. When you nest tables, a screen reader has to read down through the code. The visually impared person doesn't have the easy option of scanning a page for what they want, they have to listen to every single word in a table nested in a table, which is nested in another table, etc. However, text can be flagged with titiles and subtitles and they can tell their screen reader (if they can afford the $1200 version) to do a search.

2. For brand new web developers and owners of small websites, a nested table site is often a more easy development structure to learn than the other options. (My blind acquaintances would kick me in the behind for saying that). So, I try to balance the site owner's situation and making the site accessible!

[Rod Abbotson]

I just have my horizontal nav bars in a div and then inside <p></p> tags to centralize them...

like so....

<!-- Begin Navigation -->
<div id="navigation">
<p><a href="team.html" class="button"
title="Our current staff">The Team</a>
<a href="diving.html" class="button"
title="Dive sites of Jordan">Diving</a>
<a href="snork.html" class="button"
title="Swim &amp; snorkel">Snorkeling</a>
<a href="courses.html" class="button"
title="PADI &amp; DSAT Courses">Courses</a>
<a href="tec.html" class="button"
title="Extreme adventures">Tec Diving</a>
<a href="news.html" class="button"
title="Diving news from Jordan">News</a>
<a href="gal.html" class="button"
title="Visit our galleries">Photos</a>
<a href="jordan.html" class="button"
title="Travelling in Jordan">Jordan</a>
<a href="faq.html" class="button"
title="Frequently asked questions">FAQ's</a>
<a href="hotels.html" class="button"
title="Where to Stay">Hotels</a>
<a href="prices.html" class="button"
title="2009 Price list">Prices</a>
<a href="downloads.html" class="button"
title="Forms, Videos &amp; more...">Downloads</a>
<a href="http://www.diveaqaba.com/smf/index.php" class="button"
title="Visit our forum" onclick="window.open(this.href,'_blank');return false;">Forum</a></p>
</div>
<!-- End Navigation -->


the CSS that applies to this is...

#navigation {
float: left;
width: 957px;
height: 35px;
padding: 10px 5px 10px 5px;
}

p {text-align: center;}

a.button:link
{
font-size:13px;
padding:0px 15px 0px 2px;
color:white;
}
a.button:visited
{
font-size:13px;
padding:0px 15px 0px 2px;
outline: none; /* hide dotted outline in Firefox */
color:white;
}
a.button:hover
{
font-size:13px;
padding:0px 15px 0px 2px;
outline: none; /* hide dotted outline in Firefox */
color:silver;
}
a.button:active
{
font-size:13px;
padding:0px 15px 0px 2px;
outline: none; /* hide dotted outline in Firefox */
color:silver;
}


This is fairly simple and hopefully work with a screen reader although I don't get many visually impaired users scuba diving! (Only two in 35 years!)
Rod

[NJ]

Originally Posted by Rod Abbotson

This is fairly simple and hopefully work with a screen reader although I don't get many visually impaired users scuba diving! (Only two in 35 years!)
Rod

Looks like that's pretty good code - using the title property is great. I would be interested if you ever get any comments from someone using a screen reader. I know that the technology keeps changing; so it's kind of a moving target!