<li> Alignment Issue

[TheMovieman]

Ok, I'm having a browser compatibility issue again. On my review page, I have a list (<li>) to display certain info about the DVD (special features, technical info, etc). Well, even though the other text displays in the right place on both browsers, for some reason the bullets are further over on FF bleeding into a table I have set up.

 

Compare in both IE and FF:

http://www.moviemansguide.com/reviews/DVD/...=untraceable-bd

 

Here's the code:

>    <TR>
<TD>
<TABLE WIDTH="100%" BORDER="0">
    <TR>
	<TD WIDTH="150" VALIGN="top">
	   <TABLE WIDTH="100%" class="frameborder">
		<TR>
		   <TD ALIGN="center" class="ratingsblock">
		      <img src="../../files/transparent.gif" height="5"><BR>
<?php

$safequery7 = sprintf("SELECT amazon, dvd_cover, rating_film, rating_features, rating_audiovideo, rating_overall, 

rating_video, rating_audio FROM dvd_reviews WHERE id='%s'", mysql_real_escape_string($id));
$ratings = @mysql_query($safequery7);

while ($ratingtbl = mysql_fetch_array($ratings)) {
$amazon = $ratingtbl['amazon'];
$cover = $ratingtbl['dvd_cover'];
$film = $ratingtbl['rating_film'];
$features = $ratingtbl['rating_features'];

$av = $ratingtbl['rating_audiovideo'];
$display_av = ($av)?"<span class='ratingheads'>A U D I O &<BR>.:: V I D E O ::.</span><BR><img 

src='../../images/stars/set03/$av.gif' border='0'><BR><HR COLOR='gray'>":"";

$video = $ratingtbl['rating_video'];
$display_video = ($video)?"<span class='ratingheads'>.:: V I D E O ::.</span><BR><img 

src='../../images/stars/set03/$video.gif' border='0'><BR><HR COLOR='gray'>":"";

$audio = $ratingtbl['rating_audio'];
$display_audio = ($audio)?"<span class='ratingheads'>.:: A U D I O ::.</span></font><BR><img 

src='../../images/stars/set03/$audio.gif' border='0'><BR><HR COLOR='gray'>":"";

$overall = $ratingtbl['rating_overall'];
echo "
		      <A HREF='http://www.amazon.com/exec/obidos/ASIN/$amazon/moviemsguidet-20' class='inframe2' 

target='_blank'><img src='../../images/posters/dvd/dvdcover_$cover.jpg' border='1' width='130' alt='Buy this DVD from 

Amazon.com!'></a><BR>

		      <span class='ratingheads'>.:: F I L M ::.</span><BR>
		      <img src='../../images/stars/set03/$film.gif' border='0'><BR>
		      <HR COLOR='gray'>

		      <span class='ratingheads'>S P E C I A L<BR>.: F E A T U R E S :.</span><BR>
		      <img src='../../images/stars/set03/$features.gif' border='0'><BR>
		      <HR COLOR='gray'>

		      $display_av

		      $display_video

		      $display_audio

		      <span class='ratingheads'>.:: O V E R A L L ::.</span><BR>
		      <img src='../../images/stars/set03/$overall.gif' border='0'><BR>";
}
?>
		   </TD>
		</TR>
	   </TABLE>
	</TD>
	<TD WIDTH="410" VALIGN="top">
	   <TABLE WIDTH="100%" BORDER="0">
		<TR>
		   <TD CLASS="crewinfo">
<center><strong><font size="4">.::MOVIE INFORMATION::.</font></strong>
<HR COLOR="gray" WIDTH="90%"></center>

<?php

$safequery8 = sprintf("SELECT director, writer, cast, theater_releasedate, supplemental_features, discs, chapters, 

screenformat, audio_english, subtitles FROM dvd_reviews WHERE id='%s'", mysql_real_escape_string($id));
$crewdvdinfo = @mysql_query($safequery8);

while ($movietech = mysql_fetch_array($crewdvdinfo)) {
$director = htmlspecialchars($movietech['director']);
$writer = htmlspecialchars($movietech['writer']);
$cast = htmlspecialchars($movietech['cast']);
$theaterdate = htmlspecialchars($movietech['theater_releasedate']);
$specialfeatures = $movietech['supplemental_features'];
$discs = $movietech['discs'];
$chapters = $movietech['chapters'];
$format = htmlspecialchars($movietech['screenformat']);
$audio_english = htmlspecialchars($movietech['audio_english']);
$subtitles = htmlspecialchars($movietech['subtitles']);
echo "

<strong>Director:</strong> $director<br />
<strong>Writer(s):</strong> $writer<br />
<strong>Cast:</strong> $cast<br /><br />

<strong>Theatrical Release Date:</strong> $theaterdate<br /><br />

<center><strong><font size='4'>.::DVD INFORMATION::.</font></strong>
<HR COLOR='gray' WIDTH='90%'></center>

<strong>Supplemental Material:</strong>
$specialfeatures<br /><br />

<strong>Technical Information:</strong>
<ul><li>Number of Discs: $discs</li><li>$format</li><li>$audio_english</li><li>Subtitles: $subtitles</li></ul>";

}
?>
		   </TD>
		</TR>
	   </TABLE>
	</TD>
    </TR>
</TABLE>
</TD>
   </TR>

 

It's your basic split columns with one column having a table inside and the other just displaying info.

 

Probably something simple, but a fresh pair of eyes would help

[TheMovieman]

I tried posting an update, I removed a couple li's from the technical info, but still didn't change anything. Also, I wanted to post some screen caps.

 

Anyway, I get an error trying to post.

 

"This program cannot read this webpage format"

 

I even just tried adding the image link. No luck.

Edited May 12, 2008 by TheMovieman

[TCH-Andy]

The problem looks to be because of various incorrect html statements within the code, which is being interpreted differently in the different machines.

 

I'd suggest running it though a validator and correcting the 157 errors, which should then also correct the error you are seeing.

[TheMovieman]

Well, I did and I can't discipher what's going on. It makes no sense to me. I even started over from scratch and have the basic code and it's still doing that with the bullets. And I know that I have no open ended TDs or TRs since other than that section (the ratings table and movie info sections), I didn't use a table. All the rest of the stuff are just divs.

 

Also, even looking through the 150+ errors, one of them says: "end tag for element "td" which is not open". Well, I looked and there is a corresponding <td> with a </td>. It's not out of order and looking above, in case that's where the error was, everything was proper, so I have no idea why this one is coming up.

 

The whole is frustrating. I might give it a break for a while. Yeah, it doesn't look good in FF but with 90%+ of my users still using IE, I have to move on.

 

Thanks for the help anyway

[TCH-Andy]

Looking at the code for the specific error you say it is;

>39#  <td class="otherinfo" />
40# Sony
41# || R - 101 minutes - $38.96 || May 13, 2008 </td>

Note that you close the 'opening' "td" tag with a slash within the command on line 39. Therefore there is no opening tag corresponding to the close tag on line 41. Hence it is giving you the error 'end tag for element "td" which is not open'.

 

Most of your errors are due to the opening / closing of tags like this.

[TheMovieman]

Yeah, I noticed that, but that was put in there after all this.

 

I did find the solution for the bullets alignment issue. I put in "list-style-position:inside;" and that fixed it. I'm still going to go through the code and fix it.