Post Archive
› January 7, 2004
Call for help
Hi Web-Graphics readers. I've decided to post a call for help (see updates below, it's now fixed), I know many Web-Graphics authors and readers are as proficient (and much more) than I am with CSS layout. Right now I'm just slammed with work, and am having trouble finding the time to diagnose and fix a Win IE problem with this site's layout. I could use your help.
The problem: Windows IE is slipping the main content box below the floated nav bar on the right. This issue has been somewhat unpredictable, seems like the problem comes and goes (might be somehow related to current post content).
You can view the CSS files in use at /css/. Please feel free to comment to this post with ideas and suggestions, or if you prefer, you can use the contact form to email me personally. Thanks in advance for your time and help!
Update #1: Jurgen writes in that I need to widen the outer div. Which is of course correct, and I've done it. The problem (albeit a bit less urgent) is to remove that gap between the two columns. Each time I've tried to "fix" the problem, I manage to close the gap, but then the columns slip sometime later on, as if they were delicate. More help needed if anyone can spare the time!
Update #2: Paul comments to this post with a solid answer to the problem, which explains why it's been on/off - the "last 5" name and date floats were knocking heads and splitting the nav column too wide. The layout now looks correct in Win IE 6. Readers might notice a problem with the previous post's individual archive page, but I think that has something to do with the use of PRE and CODE, which is a separate issue.
Now that the main problem is fixed - great big thanks to those who wrote with suggestions so quickly!
Comments
1. January 7, 2004 12:23 PM
2. January 7, 2004 12:23 PM
Paul G Posted…
The problem is caused by names that are too long in your "last five comments" section of #nav. Right now, the name "Robbert Broersma" is butting up against the date, adding an extra 3 pixels to the width of #nav, which causes #content to drop below it. You may want to consider moving the date below the poster's name instead of floating it to the right. In base.css, change the rule to this:
.lastfiveitems li.cdate {
color:#999;
clear:left;
float:left;
}
That should accomodate all but the longest names.
3. January 7, 2004 12:37 PM
Lon "ain't afraid of using tables" Boonen Posted…
no, it's your lack of tables that is causing the problem. use tables, they don't bite!4. January 7, 2004 12:37 PM
Chris Z. Posted…
The problem is caused by the flaky IE support of the float model. There have been numerous bugs reported about it. My suggestion is to float the nav but not the content. I made a copy or your page here. The changes are simple and work fine on my end (IE 6 and NN 7, on XP). hope this helps.
5. January 7, 2004 12:48 PM
Nate Posted…
Thanks so much everyone! (even you Lon).. The super speedy help has been very uplifting, I was really quite upset when I saw that the problem had returned. Now I think we have it licked! I am especially appreciative because this would have taken me some time to diagnose, time that I unfortunately don't have. Lots of gratitude to everyone here.
6. January 7, 2004 01:38 PM
7. January 7, 2004 03:51 PM
Paul G Posted…
Also, the problem on the page for the "List Style Bullet Images" post does indeed stem from the <pre> tag. Specifically, in comment #10 (David House), the style declaration that reads: _list-style-image: none; /*not sure if this is the right keyword*/ is too long, which causes #content to be much too wide and drop under #nav. Not sure of any way to prevent this other than turning off <pre> tags.
P.S. Is it too obvious that I'm having an incredibly slow day at work and I'm struggling to keep myself amused?
8. January 7, 2004 03:56 PM
Nate Posted…
Well I surely do appreciate it Paul! What do you guys think? I hate to loose the PRE tag, it's so handy for commenting code, any good suggestions around this?
9. January 7, 2004 04:38 PM
Paul G Posted…
I take it back, there is a way to keep the <:pre>: tag. add the following two declarations to #content pre in base.css:
#content pre {
width:493px;
overflow:hidden;
...
}
This sets an explicit width for the <pre> tag and will cut off anything that overflows the boundary.
10. January 7, 2004 04:56 PM
Nate Posted…
Paul that actually gave me an idea.. why not overflow:scroll? Then the code can be copy/pasted and won't ever exceed the width, or be hidden. I've got it rolling now, I think it works pretty good. Thanks for the idea!
11. January 7, 2004 05:02 PM
Paul G Posted…
Ah, even better. I had forgotten about the overflow:scroll rule, quite a handy-dandy beast sometimes, eh?
Glad I could be of help, it's given me something to do on a slow day.
12. January 7, 2004 06:05 PM
Andreas Posted…
Nate, I think you're better off using overflow: auto. That way, the scrollbars are only shown when really needed.
13. January 7, 2004 06:09 PM
14. January 7, 2004 06:16 PM
LonWonderingWhyYouAreSoStubbornToRefuseToUseOneSimpleTable Posted…
because stuff like this still breaks your floaters, despite all the workarounds. why is it so bad to use one simple table? aren't you guys a bit too fanatical/religous? look at the tons of hacks/workarounds/unreadable-code you have created and tell me that's better than using one table. ps i'm not trying to disable wg.com, just trying to make a point15. January 7, 2004 06:17 PM
Sjoerd Posted…
Great solution! First you fix the width of the content, waisting valuable screenspace with lots of white on both sides. And then when the content actually needs to be wider, you add a horizontal scrollbar! Brilliant!
Just do what Lon sais!
16. January 7, 2004 07:18 PM
Andreas Posted…
LonWondering[...]Table-fix: Add .lastfiveitems ul li {width: 170px; overflow: hidden;} to your stylesheet. Long names without breaks that exceed 170px will simply be cut off.
17. January 7, 2004 08:58 PM
Richard Posted…
Not sure if you are still working on it, but it is still messed up in IE6 on WinXP. I'm using a lab computer at school.
18. January 8, 2004 02:46 AM
Lon Posted…
[edited by nate]: lon leaves comment of super long string with no spaces.
19. January 8, 2004 09:24 AM
Nate Posted…
I edited Lon's last comment because is was breaking the layout here. Lon - I do appreciate your tests, the last ones were especially relevant, and I think this site is stronger because we've managed to work around them (actually there's one problem to fix, but it's minor). CSS is more fragile by default than tables, but (as I'm learning) with specific uses of overflow and width assignment, one can strengthen their layout.
I'm not going to be looking for a "fix" for your last comment though - mainly because it didn't seem as realistic.
20. January 8, 2004 09:40 AM
Paul G Posted…
Actually, you can remove the .lastfiveitems ul li rule and just add overflow:hidden to #content and #nav. That (as Lon pointed out) will preserve the layout on both the front page and comment pages, regardless of how long a particular line is.
Lon, I'm genuinely curious, why the big crusade for tables? I understand that you're trying to make a point, but I think most of us understand that using a hybrid layout is not heresy. It's not because of some religious fervor that I don't use layout tables. For me, it's simply because I have found that maintenance and redesigns are easier when all I have to deal with is one .css file instead of mucking around with my XHTML, especially if I'm dealing with a static or semi-dynamic site where I'd have to change every .html file to make a change.
Also, using a table does not fix this particular problem, it just causes the layout to break in a different way. It will prevent #content from dropping below #nav. However, it would also cause them to stretch wider than intended. Also, it would cause the layout to break like this in all browsers, not just IE.
Besides, why would Nate want to add a bunch of table code to his templates when he can fix the problem with a total of 5 extra lines of CSS? The design is already a fixed width design, I fail to see how adding a few of overflow rules to compensate for a crappy browser's default behavior is any worse than adding table code to the site, much less how it represents fanaticism or stubbornness.
Please don't feel that I am flaming you or trying to pick a fight, I am genuinely curious about some of the backlash I have been seeing around the web against CSS-only layout. I think some of it may be caused by well-intentioned people who have tried to force it down people's throats, which is unfortunate, but I'd like to hear some other perspectives on it.
21. January 8, 2004 09:44 AM
Lon Posted…
So, first tables got censored and now my comments are?!
Too bad... I would have loved to discuss Welsh train station names on this site. As everyone knows one of them is called Llanfairpwllgwyngyllgogerychwyrndrobwyllllantysiliogogogoch. (note I placed it on the 5th line to keep it away from the homepage)
But seriously. I you're so semantically correct and don't want to use a table for layout purposes, why are you abusing anchor elements for styling then?
I'm not trying to critize or ridicule. I'm just trying to start a discussion. Which is: aren't anchor-elements meant to link to new content? Shouldn't you use button-elements for stuff like switching stylesheets and options?
If someone were to ask me I would say: yes! Don't abuse links as they are meant to link. But if some of your misery can be solved by using a table, do so. It won't hurt anyone.
22. January 8, 2004 09:57 AM
Lon Posted…
I just read your comment Paul... will come back to it... have to do some research first...
My collegue Sjoerd (Visscher) tells me it's not IE's lack of float support that causes this unwanted behavior. He tells me it's the over-specification of width's. And I have grown to believe whatever Sjoerd tells me as he has proven to be right in all cases.
Anyway. I know my way around CSS, but I hardly know anything of the official specs. I just know how to get stuff to work.
23. January 8, 2004 10:42 AM
Paul G Posted…
Lon, here is the result of using one table in WG's layout:
I simply added a two td table to the layout and explicitly set the widths to the same widths specified by the original css. Also, just to see if I could fix this layout quickly, I tried to add an overflow:hidden rule to the td's, but to no avail. Mozilla handles the problem with a bit more grace (widths are still completely off) than IE, but both browsers stretch the table rather than constraining the content to the stated width.
Also, Sjoerd is correct, the problem is not the float model, the problem is that IE's default behavior when a child element overflows its parent (and no overflow rule is set) is to disregard any explicit widths and widen the parent to accomodate the child.
24. January 8, 2004 11:27 AM
Nate Posted…
Lon - good point. I'm not at all against using buttons or some other method for non-content functions. It honestly just hadn't occurred to me.
I guess I should add the overflow rule for the main divs? I don't know if it's reasonable to expect and allow folks to discuss some of the longer Welsh trains (grin). I just realized that the "long name" issue could/should have been prevented by having a maximum number of characters allowed in the comment entry "name" input. I'm wondering what's reasonable to expect and account for in one's layout markup/css? Does the overflow rule make CSS layouts bullet proof? Does using it open up potential accessibility problems?
25. January 8, 2004 06:38 PM
Lon Posted…
The problem isn't fixed for people having a hard time reading small-print. If you set IE's 'View - Text Size' to 'Largest' the content floats off again.
Sjoerd tipped me to specify word-wrap:break-word (or whatever valid/proper combination of these words) on the body-element. That should fix it. Although it might not look very pretty on some long words.
26. January 9, 2004 07:29 AM
27. January 12, 2004 10:36 AM
Lon Posted…
obviously you don't need Welsh train stations... it's wrong again, due to a url this time... what happened to the word-break tip? did you try it?28. January 12, 2004 10:55 AM
Nate Posted…
From what I can tell, word-wrap:break-word is a microsoft proprietary css add-on, which doesn't really bother me, but the problem isn't isolated to MS browsers. Since it seems most likely to break with URLs that are linked (as you pointed out Lon), perhaps the best solution would be to simply overflow:hidden on all A tags inside the "last 5" column that exceed the width?
29. January 12, 2004 01:35 PM
Lon Posted…
OK, so here's what we all have been waiting for... a table based layout!
http://www.q42.nl/test/webgraphics/
there's two links in it saying 'click to make too wide'. I suggest you click them.
30. January 12, 2004 06:43 PM
Nate Posted…
Lon, I may not agree with you on all points, but I sure do appreciate and respect that you've taken the time to make your case - by making a modified version of the site even.
But doesn't this just point to the fact that I'm using a fixed width layout? I could be using a variable width or liquid layout and achieve the same benefits, no?
31. January 13, 2004 02:06 PM
Lon Posted…
i don't know.... i just know the simplest way to do it is using a table.
i don't see how you can prevent your two columns from floating under each other without using a table.
i could throw away almost half of all relevant css code, inserted a simple table and made it look identical to the original and behave a lot better.
32. January 21, 2004 10:23 AM
Kevin Posted…
Just a quick note, and you're going to hate me for saying this, but the whole site is still suffering from the slipping the main content in IE6 Win 98 here at work. I think it could be the same problem you described.
Basically the right hand column appears on the page, then you must scroll down to a point below that column to see the content of the "main" column.
33. January 21, 2004 10:41 AM
nate Posted…
Kevin, thanks very much for the tip. I realized that I never implimented the overflow for the actual comment on the homepage "last 5 comments".. I don't have my windows box hooked up at the moment, but it might be repaired. More tweaking as time permits.
Lon Posted…
get over it and use a table!