Sat, 2009-07-04 15:48
Hey, I need some help with my homepage code.
Each item in my feed column consists of two to four elements, from top to bottom: a title/link, a date, an item content with text and or img (of various dimensions), and lastly a haloscan comment link. In some items there's no content element, and only one class of items have a comment link.
The problem is that the haloscan comment code div doesn't always align below and to the left of what's above it. I'd like the comment div to always align below and to the left of whatever's above it without a gap, cross browser.
I've tried a bunch of different div combinations, but I always end up with a gap between the content & the comment (in IE but not Firefox), or an image spillover pushing the comment div up and to the right.
Can somebody help me finally fix my comment alignment problem?
<tr><td width="320px" valign="top"> <span style="font-style:italic;">posts, comments, updates, etc.</span>—<br> <br> <B><a href="http://picasaweb.google.com/send2russ/BikeRidePhotosSeattleWAToPortHardyBCToMinotND6909To62909?authkey=Gv1sRgCIzTw8SjyaCcXg&feat=directlink#" target="_blank" />Picasa Web Albums - Bike Ride Photos: Seattle...</a></B><BR>Saturday, Jul 04, 09 at 04:41 AM<BR><BR><div style="font-size: x-small;"><a href="javascript:HaloScan('3591f9b2d5d7fd06');" target="_self"><script type="text/javascript">postCount('3591f9b2d5d7fd06');</script></a></div><BR><div style="clear:both;"></div><P><B><a href="http://media.russ-stein.com/jpegs/BCFerriesTsawwassenTicket.JPG" target="_blank" />BCFerriesTsawwassenTicket.JPG</a></B><BR>Friday, Jul 03, 09 at 12:49 AM<BR><img src="http://media.russ-stein.com/jpegs/BCFerriesTsawwassenTicket.JPG" align="left" width="120">How I biked across the Strait of Georgia.<BR><div style="font-size: x-small;"><a href="javascript:HaloScan('da8a772c838a0aaa');" target="_self"><script type="text/javascript">postCount('da8a772c838a0aaa');</script></a></div><BR><div style="clear:both;"></div><P><B><a href="http://www.3146miles.russ-stein.com/?p=33" target="_blank" />Who watches this garbage?</a></B><BR>Tuesday, Jun 30, 09 at 11:15 PM<BR>Overheard in a Minot, ND, truck stop this morning where I was having coffee, where they were blaring the Fox News Moron AM show–Fox New’s airhead Matt...<BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2407766277" target="_blank" />twitpic.com/8vcjk - Boxed up @ ...</a></B><BR>Tuesday, Jun 30, 09 at 06:49 PM<BR><BR><div style="clear:both;"></div>
Thanks.
Sat, 2009-07-04 18:11
#1
Can't be done!
It's pretty nigh impossible to comment on the small snippet of code you have provided. You are well advised to provide a live link to the page causing you problems and hope for feedback on that.
Regards
Sat, 2009-07-04 23:50
#2
Good call...
I was trying to hide how crude my page is... Here's the whole thing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <TITLE> russ-stein.com </TITLE> <link rel="alternate" type="text/xml" title="XML" href="" /> <script type="text/javascript" src="http://www.haloscan.com/load/ruzzill77"> </script> <style type="text/css"> body {font-family: Univers, Helvetica, Geneva, Arial; font-size: small;} a:link {color:#58a; text-decoration:none;} a:visited {color:#969; text-decoration:none;} a:hover {color:#c60; text-decoration:underline;} </style> </HEAD> <body> <table align="center" style="border:1px solid #666666;" bgcolor="#F9F9EE" width="650px" cellspacing="5" cellpadding="3"> <tr><td align="center" colspan="3"> <img WIDTH=133 style="border:1px solid #5C7FB9" src="http://lh4.ggpht.com/_fVqcc6KP2ao/ScPO3iuSWKI/AAAAAAAAFbE/ig9KmHqm2nc/s144/bannerrusssteincomw133.JPG" /> </td></tr> <tr><td align="center" colspan="3"><span style="font-size: medium; text-decoration: none; font-weight: bold;">russ-stein.com</span> (BETA)</td></tr> <tr><td width="320px" valign="top"> <span style="font-style:italic;">posts, comments, updates, etc.</span>—<br> <br> <B><a href="http://csscreator.com/node/36397" target="_blank" />CSS Creator my comment alignment problem</a></B><BR>Saturday, Jul 04, 09 at 10:54 PM<BR>Hey, I need some help with my homepage code. Each item in my feed column consists of two to four elements, from top to bottom: a title/link, a date, an item content...<BR><div style="font-size: x-small;"><a href="javascript:HaloScan('41d44416c63a10b6');" target="_self"><script type="text/javascript">postCount('41d44416c63a10b6');</script></a></div><BR><div style="clear:both;"></div><P><B><a href="http://picasaweb.google.com/send2russ/BikeRidePhotosSeattleWAToPortHardyBCToMinotND6909To62909?authkey=Gv1sRgCIzTw8SjyaCcXg&feat=directlink#" target="_blank" />Picasa Web Albums - Bike Ride Photos: Seattle...</a></B><BR>Saturday, Jul 04, 09 at 04:41 AM<BR><BR><div style="font-size: x-small;"><a href="javascript:HaloScan('3591f9b2d5d7fd06');" target="_self"><script type="text/javascript">postCount('3591f9b2d5d7fd06');</script></a></div><BR><div style="clear:both;"></div><P><B><a href="http://media.russ-stein.com/jpegs/BCFerriesTsawwassenTicket.JPG" target="_blank" />BCFerriesTsawwassenTicket.JPG</a></B><BR>Friday, Jul 03, 09 at 12:49 AM<BR><img src="http://media.russ-stein.com/jpegs/BCFerriesTsawwassenTicket.JPG" align="left" width="120">How I biked across the Strait of Georgia.<BR><div style="font-size: x-small;"><a href="javascript:HaloScan('da8a772c838a0aaa');" target="_self"><script type="text/javascript">postCount('da8a772c838a0aaa');</script></a></div><BR><div style="clear:both;"></div><P><B><a href="http://www.3146miles.russ-stein.com/?p=33" target="_blank" />Who watches this garbage?</a></B><BR>Tuesday, Jun 30, 09 at 11:15 PM<BR>Overheard in a Minot, ND, truck stop this morning where I was having coffee, where they were blaring the Fox News Moron AM show–Fox New’s airhead Matt...<BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2407766277" target="_blank" />twitpic.com/8vcjk - Boxed up @ ...</a></B><BR>Tuesday, Jun 30, 09 at 06:49 PM<BR><BR><div style="clear:both;"></div><P><B><a href="http://www.3146miles.russ-stein.com/?p=31" target="_blank" />I pulled the rip cord today. Bike trip is over...</a></B><BR>Monday, Jun 29, 09 at 10:51 PM<BR>Today was the worst day of the trip, and maybe the worst day of my life. (OK, maybe not.) I started in Stanley, ND, where I camped last night after a light Sunday...<BR><div style="clear:both;"></div><P><B><a href="http://www.3146miles.russ-stein.com/?p=30" target="_blank" />North Dakota, finally</a></B><BR>Sunday, Jun 28, 09 at 03:11 PM<BR>The last couple days I’ve been getting solid miles. The other day I hit it hard and got from Harlem to Nashua (not the real ones–the failed, all but...<BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2366946455" target="_blank" />twitpic.com/8n448 - North Dak!</a></B><BR>Sunday, Jun 28, 09 at 02:47 AM<BR><BR><div style="clear:both;"></div><P><B><a href="http://www.3146miles.russ-stein.com/?p=29" target="_blank" />The Hi Line Gambit</a></B><BR>Thursday, Jun 25, 09 at 10:42 PM<BR>Every day of this trip, it’s just been one thing after another. I’ve been battling mountains, freakish, westerly headwinds, or too much weight at the...<BR><div style="clear:both;"></div><P><B><a href="http://www.3146miles.russ-stein.com/?p=28" target="_blank" />Kalispell to Browning, MT</a></B><BR>Wednesday, Jun 24, 09 at 05:08 AM<BR>I did another 100 miles today, through the mountains, from Kalispell to Browning. Kalispell, MT, what a hick *beep*hole. I don’t know why I thought it was like...<BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2297163551" target="_blank" />twitpic.com/877cw - The last hill...</a></B><BR>Tuesday, Jun 23, 09 at 05:06 PM<BR><BR><div style="clear:both;"></div><P><B><a href="http://www.3146miles.russ-stein.com/?p=27" target="_blank" />Grrrr A blog post concerning some of the issues...</a></B><BR>Monday, Jun 22, 09 at 02:36 PM<BR>First of all, why do all these like Hell’s Pensioners, these like pseudo gangs of retired accountants on luxury motorcycles who roam from Wal-Mart to Wal-...<BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2271959518" target="_blank" />twitpic.com/8259w - It's big sky...</a></B><BR>Monday, Jun 22, 09 at 12:21 AM<BR><BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2269444426" target="_blank" />twitpic.com/81ave - Good progress...</a></B><BR>Sunday, Jun 21, 09 at 08:20 PM<BR><BR><div style="clear:both;"></div><P><B><a href="http://www.3146miles.russ-stein.com/?p=26" target="_blank" />Bum Jungle, Idaho</a></B><BR>Sunday, Jun 21, 09 at 03:46 PM<BR>The night before last I camped at a no facilities, free BLM campground about 15 miles east of Colville, and when I got up I was jonesing for coffee. Only 12 or ...<BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2257939204" target="_blank" />twitpic.com/7xzz8 - Oh, here it...</a></B><BR>Saturday, Jun 20, 09 at 10:08 PM<BR><BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2257818676" target="_blank" />twitpic.com/7xygq - There's no ...</a></B><BR>Saturday, Jun 20, 09 at 09:56 PM<BR><BR><div style="clear:both;"></div><P><B><a href="http://www.3146miles.russ-stein.com/?p=25" target="_blank" />The Republicans of Republic, WA</a></B><BR>Saturday, Jun 20, 09 at 09:25 PM<BR>Yesterday I biked from Twisp to Republic, WA, and it was pretty gnarly. In fact the whole state of Washington has been pretty damn gnarly. I’ve just about...<BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2245725781" target="_blank" />twitpic.com/7ul35 - Uh-oh!</a></B><BR>Friday, Jun 19, 09 at 11:32 PM<BR><BR><div style="clear:both;"></div><P><B><a href="http://twitter.com/russ_stein/statuses/2232751821" target="_blank" />twitpic.com/7rsdi - Hope there'...</a></B><BR>Friday, Jun 19, 09 at 03:20 AM<BR><BR><div style="clear:both;"></div><P> <p><a href="http://pipes.yahoo.com/pipes/pipe.run?_id=d99f57d76ab699b77189135128e7188c&_render=rss" rel="alternate" type="application/rss+xml" TARGET="_blank"><img src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="FEEDZ 4 LULZ!" style="vertical-align:middle;border:0"/></a> <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=d99f57d76ab699b77189135128e7188c&_render=rss" rel="alternate" type="application/rss+xml" TARGET="_blank">Subscribe in a reader</a></p> </td> <td width="10px"> </td> <td width="320px" valign="top"> <span style="font-style:italic;">picasa/twitpic photo feed</span>—<br> <br> Tuesday, Jun 30, 09 at 06:49 PM<BR><B><a href="http://twitpic.com/8vcjk" target="_blank" />twitpic.com/8vcjk Boxed up @ the Minot...</a></B><BR><img width="150" style="border:1px solid #5C7FB9" src="http://twitpic.com/show/thumb/8vcjk.jpg"><br><div style="font-size: x-small;"><a href="javascript:HaloScan('1246387792');" target="_self"><script type="text/javascript">postCount('1246387792');</script></div></a><BR> <!-- commented out! --> <hr size=1 width="92%" align=left noshade> <BR> <span style="font-style:italic;">whereabouts</span>—<br> <br> <center> <a href="http://blogloc.no5.at/" border="0"> <img src="http://geekvault.no5.at/blogloc/img?user=aaaaaa3&width=150" border="0" /> </a> </center> <br> <br> <br> <br> <hr size=1 width="92%" align=left noshade> <BR> <span style="font-style:italic;">llamadas gratis por internet!</span>—<br> <br> <!-- Skype 'My status' button http://www.skype.com/go/skypebuttons --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:russellstein?call"><img src="http://mystatus.skype.com/balloon/russellstein" style="border: none;" width="150" height="60" alt="My status" /></a> <br> <br> <br> <hr size=1 width="92%" align=left noshade> <BR> <br> <br> <br> <br> </td></tr> </table> <table align="center"> <tr><td align="center"> Powered by a bunch of web apps and <a href="http://pipes.yahoo.com/russ_stein" TARGET="_blank">my pipes</a>. </td></tr></table> <table align="center"> <tr><td align="center"> Like this site? The php I wrote for publishing a pipe in html is <a href="/feedphptohtmlforsale.html" TARGET="_blank">for sale for $5</a>. </td></tr></table> <table align="center" width="650px" ><tr><td align="right"> <!-- Site Meter --> <script type="text/javascript" src="http://s51.sitemeter.com/js/counter.js?site=s51russsteindotcom"> </script> <noscript> <a href="http://s51.sitemeter.com/stats.asp?site=s51russsteindotcom" target="_top"> <img src="http://s51.sitemeter.com/meter.asp?site=s51russsteindotcom" alt="Site Meter" border="0"/></a> </noscript> <!-- Copyright (c)2006 Site Meter --> </td></tr></table> </BODY> </HTML>
Thanks!
Sun, 2009-07-05 04:53
#3
Start by validating your
Start by validating your code. XHTML doctypes do not allow capitalized tags, for example.
Sun, 2009-07-05 15:06
#4
Ed Seedhouse wrote:Start by
Start by validating your code. XHTML doctypes do not allow capitalized tags, for example.
Looks like an HTML doctype to me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Sun, 2009-07-05 16:28
#5
validated
It validates except for minor stuff, e.g. ampersands in URLs I linked, a stray alt-less img, plus some junk in a gadget which can be commented out.
The reason I thought this was a CSS problem is because I thought I needed to style divs to group the content img + text & separate it from the comment div.
Mon, 2009-07-06 00:13
#6
A lot of material for you to think about
When I checked the code you posted, I couldn't see any differences between Firefox and IE. That said, I agree with you that yes you do have a CSS problem, or more accurately lots of them! At the risk of giving you a great deal to work on, let's make a few notes:
Your doctype does declare your document as HTML rather XHTML. But some of the elements are coded according to XHTML standards (e.g. your link statement) so you do have a mix. For other differences between the two standards see http://www.w3schools.com/XHTML/xhtml_html.asp.
One specific error you might find hard to spot is with your tags which are, well, just wrong. Some of yours are coded:
<a href="a link" />Some Text</a>
but that forward slash after the href attribute should not be there as in:
<a href="a link">Some Text</a>
But returning to CSS issues, the major problem is the conspicuous absence of an external stylesheet. You have a small amount of internal styling in the head of your document, which is barely tolerable but most of your styling is inline and embedded with the HTML. This is so much better taken out of the HTML and put into an external stylesheet. At the very least move it all up to the head of your document.
You have also written your inline styling in two different ways. Code like:
<img WIDTH=133 .... rest of the line
is deprecated and if you are to use inline styling it should be written as:
<img style="width:133px:" .... rest of the line
but you have plenty of examples where you have used this latter method. Just be consistent.
To finish then the two key recommendations are:
1. switch to using an XHTML doctype and change your code to fit that standard (i.e. all lower case elements). You will also have to be more rigorous about closing elements (not all your
elements have a closing
at present).2. move all styling into an external stylesheet.
There's a lot for you to consider but I hope it helps you progress. Regards
Mon, 2009-07-06 15:13
#7
great
but I'm not interested in general "progress." I'm looking for help with the specific comment alignment question I posted. When I said I validated it yesterday, I used the validator, which took care of the non validating stuff.
I'll do an imported style sheet or whatever, but could you please say how this best practices stuff is getting me closer to a fix rather than just being good in general?
Regards
Mon, 2009-07-06 18:23
#8
bike_headlights wrote: I'll
I'll do an imported style sheet or whatever, but could you please say how this best practices stuff is getting me closer to a fix rather than just being good in general?
The "best practices" are there to help people keep out of trouble. You didn't follow them and now you've come to us to help you out of that trouble.
But if you'd followed the practices in the first place you very probably wouldn't have gotten into trouble. Following best practices costs nothing, and saves much.
But it's your life. If you want too keep getting into unnecessary trouble feel free. At least you aren't building houses. I hope!
Tue, 2009-07-07 21:54
#9
bike_headlights wrote:but
but I'm not interested in general "progress." I'm looking for help with the specific comment alignment question I posted. When I said I validated it yesterday, I used the validator, which took care of the non validating stuff.
I'll do an imported style sheet or whatever, but could you please say how this best practices stuff is getting me closer to a fix rather than just being good in general?
Regards
That's the thing with making standards compliant sites. You have to have a solid foundation with good clean code. When you run into issues like this, it's always wise to go back and check ALL of your code. Cutting corners can save you time, but it won't save you headaches later on.