Different results in IE and FF

[leeboycymru]

I have a php output from a database that is being controlled with css also to create a list.

Its fine in Mozilla, but not in IE. Can anybody see why.

ul {
list-style-type: none;
margin: 7px;
padding: 0;
}
li {
/*border-right: 1px solid #777;*/
float: left;
margin: 0 .3em 0 -.3em;
padding: 0 .6em 0 .6em;
}


and here is the link:

http://www.checksafetyfirst.com/en/hotel1.php?Id_Hot=1047

cheers

Lee

 

[leeboycymru]

Sorry, probably good idea I point out what im on about;

Its the list you can see in Mozilla under 'Tour Operators' near the bottom, but nothing at all in IE

 

[traingamer]

Your page is a mess. You have <td> tags with no enclosing <table> or <tr> tags.

You have open <ul> tags.

It might or might not be related to those items.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[monksnake]

That's some crazy code there, there's a lot in that code that is considered "bad practice", but I'll tell you of some obvious things that may be causing the problem:

1. You have the following tag: <span class="bigweblinks">. Spans are inline elements and they are NOT supposed to contain block elements. (such as UL) Change your span to a div.

2. You need to put your bunch of lists into a <td> element.

Snippet:

                                      <td align="left" valign="bottom" ><strong class="bodybold1">Tour Operators: </strong><span class="bigweblinks">
                                        <table>
                                         <tr>
[!]<td>[/!]
<ul id='navlist'><li class="middletext"><a href="[URL unfurl="true"]http://www.mytravel.com"[/URL] class="bigweblinks">My Travel</a></li>
</ul>
<ul>
<li class="middletext"><a href="[URL unfurl="true"]http://www.peacocksafaris.com"[/URL] class="bigweblinks">Peacock</a></li>

Don't forget the closing tag </td> at the bottom either.

3. At the very bottom of the UL lists, you have an opening <UL> and no closing one.

<ul>
<li class="middletext"><a href="[URL unfurl="true"]http://www.marmara.com"[/URL] class="bigweblinks">Groupe Marmara</a></li>
</ul>
[!]<ul>[/!]
                                          </tr>
                                        </table>

I see more, but I recommend you validate your HTML, here

http://validator.w3.org/

I'm sorry to say, but this coding is not very good.


<.

 

[leeboycymru]

Thanks for your help, but I will be honest and say that I have been thrown in the deep end here, as this is an old site and they wont it updating.

The PHP is very new to me, and Im trying to fix a problem they have so that the outputted data lines vertically not horizontally.

The PHP is below, I know this is the wrong forum but im trying to work around it.

<?php
$cnt = 0;
echo "<td>";
echo "<ul id='navlist'>";
while($cnt < $top_count) {
$qw=mysql_query("select * from tbl_touroperators where Nom_Top = '$top_array[$cnt]'") or die (mysql_error());
$rw=mysql_fetch_assoc($qw);
echo "<li class=\"middletext\"><a href=\"

http://"

. $rw[Web_Top] . "\" class=\"bigweblinks\">" . $top_array[$cnt] . "</a></li>\n";
echo ($cnt % 1 === 0 || $cnt === $top_count - 1) ? "</ul>\n" : "";
echo ($cnt % 1 === 0 && $cnt < $top_count) ? "<ul>\n" : "";
$cnt = $cnt+1;
}
?>

As you can see, its not nice to look at, and im really in honesty just trying to get it to work so I can move away from it.

I am honestly a developer, but in this case its taken me back a bit.

http://www.accend4web.co.uk

 

[leeboycymru]

sorry aligns horizontally not vertically

 

[monksnake]

I'll highlight some things I see:
(I'll be honest, I've never written a PHP script in my life, but I can understand this)

<?php
$cnt = 0;
echo "<td>";
//[!] The line below only gets printed once, not sure if this is meant, but as id='navlist', should be class='navlist'[/!]
while($cnt < $top_count) {
$qw=mysql_query("select * from tbl_touroperators where Nom_Top = '$top_array[$cnt]'") or die (mysql_error());
$rw=mysql_fetch_assoc($qw);
echo "<ul [!]class[/!]='navlist'>";
echo "<li class=\"middletext\"><a href=\"

http://"

. $rw[Web_Top] . "\" class=\"bigweblinks\">" . $top_array[$cnt] . "</a></li>\n";
echo ($cnt % 1 === 0 || $cnt === $top_count - 1) ? "</ul>\n" : "";
//[!]Remove code here that reprints a <ul>[/!]
$cnt = $cnt+1;
}
[!]echo "</td>";[/!]
?>


<.

 

[leeboycymru]

Hi, I changed that code over and yes your comments make sense, and it stayed the same in Mozilla but in IE the list at least came into view but travelled right across the screen.

I have tinkered with the css to no avaial:

ul {
list-style-type: none;
/*margin: 7px;*/
padding: 0;
display:inline;
}
li {
/*border-right: 1px solid #777;*/
float: left;
margin: 0 .3em 0 -.3em;
padding: 0 .6em 0 .6em;
}

What I did fnd though is when i take away the float: left; code the two browsers at least match up so thats a sort of good start.

Cheers

Lee

 

[bam720]

Your PHP is making each Tour Operator its own <ul> with only a single <li>. You want the entire list of Tour Ops to be in on <ul>

monksnake's code fixed:

<?php
$cnt = 0;
echo "<td>";
[red]echo "<ul class='navlist'>";[/red]
while($cnt < $top_count) {
  $qw=mysql_query("select * from tbl_touroperators where Nom_Top = '$top_array[$cnt]'") or die (mysql_error());
  $rw=mysql_fetch_assoc($qw);
  echo "<li class=\"middletext\"><a href=\"[URL unfurl="true"]http://"[/URL] . $rw[Web_Top] .  "\" class=\"bigweblinks\">" . $top_array[$cnt] . "</a></li>\n";
  $cnt = $cnt+1;
}
[red]echo "</ul>\n";[red]
echo "</td>";
?>

Monksnake close, but the script would have printed an open <ul> tag every time because it was in the loop. I moved it outside and above as seen in red.

 

[bam720]

<?php
$cnt = 0;
echo "<td>";
[red]echo "<ul class='navlist'>";[/red]
while($cnt < $top_count) {
$qw=mysql_query("select * from tbl_touroperators where Nom_Top = '$top_array[$cnt]'") or die (mysql_error());
$rw=mysql_fetch_assoc($qw);
echo "<li class=\"middletext\"><a href=\"

http://"

. $rw[Web_Top] . "\" class=\"bigweblinks\">" . $top_array[$cnt] . "</a></li>\n";
$cnt = $cnt+1;
}
[red]echo "</ul>\n";[/red]
echo "</td>";
?>

 

[monksnake]

Actually, your code is better than what I made cause it puts all <li>'s in one <ul>, which it should.

But my code did work, it just created a <ul> for each <li> that's what I originally saw, so I modified the original PHP based on that.

I'll highlight the opening and closing <ul> tags, both in the while loop:

<?php
$cnt = 0;
echo "<td>";
// The line below only gets printed once, not sure if this is meant, but as id='navlist', should be class='navlist'
while($cnt < $top_count) {
  $qw=mysql_query("select * from tbl_touroperators where Nom_Top = '$top_array[$cnt]'") or die (mysql_error());
  $rw=mysql_fetch_assoc($qw);
  [!]echo "<ul class='navlist'>";[/!]
  echo "<li class=\"middletext\"><a href=\"[URL unfurl="true"]http://"[/URL] . $rw[Web_Top] .  "\" class=\"bigweblinks\">" . $top_array[$cnt] . "</a></li>\n";
  [!]echo ($cnt % 1 === 0 || $cnt === $top_count - 1) ? "</ul>\n" : "";[/!]
//Remove code here that reprints a <ul>  
  $cnt = $cnt+1;
}
echo "</td>";
?>

Perhaps it is sloppy code cause the following:

[!]echo ($cnt % 1 === 0 || $cnt === $top_count - 1) ? "</ul>\n" : "";[/!]

was writing the </ul> every time. (evaluating as true)

Thanks though bam for setting me straight on the PHP.



<.

 

[bam720]

I'm just confused on the triple === . I am an intermediate php programmer and I have never seen that before. What does it mean? If you are trying to do a comparison then wouldn't it be just a double == ?

 

[monksnake]

I know it Javascript === shows equality not only on value but data type as well.

A (String 4 === integer 4) is false where

(String 4 == integer 4) is true

<.

 

[bam720]

Good to know Thanks. I'm not sure it applies in Php so I think you if statement would work with a double == instead.

 

[Vragabond]

The example monksnake showed works exactly the same in PHP as well.

 

[bam720]

Vragabond, thanks again... It does indeed apply to php in the same manner. I'm learning a lot today.

 

[leeboycymru]

Morning all,

Sorry I couldnt get involved in that conversation. But this morning I tried the code, and it pulls the data out no problems, and its the same in IE as Mozilla, but what I was trying to do was get it to tile horizontally until it reached the end of the table then it continued to tile horizontally down the page.

Is it the case that this code is fine to allow me to do this, and now I need to control it via CSS.

Cheers

Lee

 

[leeboycymru]

This is the css code im using which produces perfect results in Mozilla, but in-different results in IE.

ul {
list-style-type: none;
margin: 7px;
padding: 0;
display:inline;
}

li {
float:left;
margin: 0 .3em 0 -.3em;
padding: 0 .6em 0 .6em;
}


And this is the link:

http://www.checksafetyfirst.com/en/hotel1.php?Id_Hot=1047

lee

 

[leeboycymru]

sorry to keep posting, but the css below is producing much better results:

.navlist
{
list-style-type: none;
margin: 0;
padding: 0;
}

.navlist li
{
float: left;
line-height: 1.1em;
margin: 0 .5em 0 -.5em;
padding: 0 .5em 0 .5em;
}

but again its doing something not right in IE

 

[leeboycymru]

It seems in IE now that it doesnt wrap the wrod to the next line if it doesnt fit in one line, opting rather too put the second part of the link beneath it.

Lee