[SOLVED] Differences between Firefox and Internet Explorer

DanielHardy · March 25, 2009

Hi,

I know this is quite a common and problem, and it is one that often make me want to pull my hair out!

The problem this time is that my problems arise from a database generated layout. In that, depending on how many fields are in a database, my code will display a number of small divs. When viewed in firefox it displays perfectly as I would want, but in I.E it goes all funny.

Here is the code


<?php  
   
mysql_connect("localhost", "0607197", "12345") or die("Can't connect to database server!");
mysql_select_db("db0607197") or die(" Can't select database!");

    $updated = FALSE;  
    if(count($_POST) > 0){  
        $admin = $_POST['admin'];  
        array_map('intval',$admin);  
        $admin = implode(',',$admin);  
       
        mysql_query("UPDATE seats SET admin=1 WHERE id IN ($admin)") or trigger_error(mysql_error(),E_USER_ERROR);  
       $updated=TRUE;  
   }  
   ?>  


   <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">  
   <?php  
    
   ?>  
   
  
  

  
   <?php  
$booked = "<b>Seat Booked</b>";
   
   $sql = "SELECT id,username,admin,rowId,columnId FROM seats ORDER by id ASC";  

   $result = mysql_query($sql) or trigger_error(mysql_error(),E_USER_ERROR); 


   while(list($id,$username,$admin,$columnId,$rowId,)=mysql_fetch_row($result)){
   
   

  
    


if($admin==1){ 
      



       

echo '<div style="background-color:red;align:center;width:53px;text-align:center;padding-top:5px;padding-bottom:5px;float:right;height:43px;border:2px solid #FFFFFF;"><b><font color="black">'.$rowId.''.$columnId.'</div>'."\n";    
   
   }

if($admin==0){  


       $checked = ($admin==1) ? 'checked="checked"' : ''; 
    
      echo '<div style="background-color:green;padding-bottom:5px;align:center;width:53px;font-weight:bold;text-align:center;padding-top:5px;float:right;height:43px;border:2px solid #FFFFFF;"><b><font color="black">'.$rowId.''.$columnId.'<input type="checkbox" name="admin[]" value="'.$id.'"  /></div>'."\n";  
   
   
}

}


   ?>  
   <p><div style="float:bottom;text-align:center;paddin-top:40px;"><input type="submit" name="submit" value="Book Seat" /> </div>

   </form>

Could this be solved by some simple CSS? Position:absolute perhaps or will I need a better, more efficient way of outputting the data?

Advice please.

Thanks in advance

Daniel

Yesideez · March 25, 2009

This is a HTML/CSS issue and should really be posted in the relevant forum.

Let's say Firefox displays properly and IE has its quirks that make peole have to write all sorts of patches to get things to work.

DanielHardy · March 25, 2009

Wasnt sure whether it was a CSS issue. As when I have fiddled around with php coding, the display has changed.

I will take my query elsewhere!

RichardRotterdam · March 25, 2009

This is indeed HTML/CSS related.

Your Browser (IE, Firefox etc) will not see a line of php code.

In your browser click "view source" and past the HTML and CSS which causes the problem. Do not paste the whole page which will annoy most on this forum

Yesideez · March 25, 2009

If you're using Firefox try these two plugins - invaluable!

1. https://addons.mozilla.org/en-US/firefox/addon/60

2. https://addons.mozilla.org/firefox/addon/1843

DanielHardy · March 25, 2009

I had already done this Kat. The problem is that I have a series of checkboxes within divs. When submitted, the database updates and then the same div is displayed but in red (rather than green) with no checkbox option. I have set the two different divs as the same height but in I.E they insist on being smaller.

Any Ideas?

<div style="background-color:green;padding-bottom:5px;align:center;width:53px;font-weight:bold;text-align:center;padding-top:5px;float:right;height:43px;border:2px solid #FFFFFF;"><b><font color="black">uCE08<input type="checkbox" name="admin[]" value="28"  /></div>


<div style="background-color:red;align:center;width:53px;text-align:center;padding-top:5px;padding-bottom:5px;float:right;height:43px;border:2px solid #FFFFFF;"><b><font color="black">uCE09</div>

phpretard · March 25, 2009

I always build 2 different style sheets...one for IE and one for FF.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
<![endif]-->
<![if !IE]>
<link rel="stylesheet" type="text/css" href="default-stylesheet.css" />
<![endif]>

This method does not rely on javascript, so it will work even if javascript is disabled. The <![if IE]>, <![if !IE]>, and <![endif]> tags are only recognized by Internet Explorer.

Yesideez · March 25, 2009

If you've got your website online and not working on it locally can you post a link so we can take a look?

DanielHardy · March 25, 2009

phpretard that sounds like a handy little idea. Im gonna take a look at that.Thanks.

The website is:

http://mi-linux.wlv.ac.uk/~0607197/test.php

you will need to log in. Username : d Password : d

Feel free the play around with it as I can update the database later.

NOTE: In I.E if all the divs are set as available (includes checkbox) the layout is fine.

Yesideez · March 25, 2009

I've got it in both IE and FF - I'm presuming this should be one large rectangle with no gaps and the red boxes should be looking like the green?

Yesideez · March 25, 2009

Also, what does this do?

border-left-color-ltr-source

Never seen that before!

DanielHardy · March 25, 2009

yes exactly, reds looking like the green but just without a checkbox.

Please no comments on the design by the way! I know it sucks at the moment!

Yesideez · March 25, 2009

I can see "height" is set to 43 in both green and red.

I've had this issue before and can't recall exactly how I fixed it although how about creating a 1x1pixel square transparent GIF and where you've got a red box (no checkbox) place this 1x1pixel GIF and stretch it to the same dimensions of a checkbox?

<img src="transparent.gif" alt="" width="13" height="13" />

No comment on the design? Seriously, yoiu've not seen my design skills - I have to get someone else to do that for me!

DanielHardy · March 25, 2009

Its an idea and certainly worth a shot. Let you know results soon

Yesideez · March 25, 2009

The only other thing I can think of is to convert that lot into a table - I didn't realise you were using DIVs for the whole thing!

DanielHardy · March 25, 2009

I've tried with tables and and was really struggling to be honest. Do you have a suggestion how I could do it with a table? Somehow I missed the table chapter in my HTML book all those years ago! Oh and the image didn't work. I'm enjoying your help though

Yesideez · March 25, 2009

How are you pulling the data from the database? Is this one query for everything or separate queries from separate tables?

I'm also thinking the CSS can do with a re-va,p - let me play with it in Firebug and see what I can come up with.

DanielHardy · March 25, 2009

it's just the one query :


$sql = "SELECT id,username,admin,rowId,columnId FROM seats ORDER by id ASC";

Ok thanks mate

Yesideez · March 25, 2009

I've just knocked this up - works in both IE and FF and works absolutely fine with and without checkboxes.

<html>
<head>
  <title>TEST</title>
  <style type="text/css">
    body {
      margin: 0px;
      padding: 0px;
    }
    div#container {
      width: 850px;
      font-family: calibri,arial,verdana,sans-serif;
      font-size: 0.8em;
      color: #000000;
      font-weight: bold;
      text-align: center;
    }
    div#container div#boxgreen {
      background-color: #008800;
      margin: 2px;
      padding-top: 5px;
      width: 49px;
      height: 49px;
      float: left;
    }
    div#container div#boxred {
      background-color: #ff0000;
      margin: 2px;
      padding-top: 5px;
      width: 49px;
      height: 49px;
      float: left;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="boxgreen">
      uCF125<br />
      <input type="checkbox" />
    </div>
    <div id="boxgreen">
      uCF125<br />
      <input type="checkbox" />
    </div>
    <div id="boxred">
      uCF125
    </div>
  </div>
</body>
</html>

Yesideez · March 25, 2009

Forgot to mention, to centre the lot I've added one line of CSS in each of these:

    body {
      margin: 0px;
      padding: 0px;
      text-align: center;
    }
    div#container {
      width: 850px;
      font-family: calibri,arial,verdana,sans-serif;
      font-size: 0.8em;
      color: #000000;
      font-weight: bold;
      text-align: center;
      margin: 0px auto;
    }

If you move the color attribute out of the container and into both boxgreen and boxred you can have different colored text in them - black doesn't really mix well with both.

DanielHardy · March 25, 2009

Wouldn't you know you've gone and solved it!

Any ideas where my problem stemmed from?

Is that Firebug helpful then?

May I say thanks! Can get back to some serious coding now!

Yesideez · March 25, 2009

Firebug is GREAT I can't live without it.

You can edit the CSS live and see what the changes are making on the browser as you change them. Allows for a whole lot more.

On installing it adds a little "bug" icon in the bottom right corner of the browser - click it to activate it.

Yesideez · March 25, 2009

I think the problem was stemming from all the extra CSS I saw being used - conflicting but not sure but there was LOADS of it for each cell, some I'd never seen before.

sasa · March 25, 2009

if you look source of your page it's start


<LINK rel="stylesheet" href="regal.css" type="text/css">
</head>

<BODY>



<div id="mainsite" style="text-align:center;">

<div id="toppic"><div id="topgap" style="height:70px;">




</div><div id="nav">

        	
            <div id="navgapper">
		<div class="clean22" style="padding-top:7px;padding-left:5px; font-weight:bold;border-right:2px double #FFFFFF;height:30px;color:FFFFFF;">
Hello  
<font color="#000000">
d</font>
<a href=logout.php><b>Logout</b></a>
</div>
            </div>
            
            
        	<div class="nav1">
        		<a href="regal1.php">Home</a>
        
        	</div>
            
       
         
        
        	<div class="nav1">
        		<a href="regal2.php">Events</a>
        	</div>
        
        
        
       		<div class="nav1">
       	 		<a href="regal3.php">Prices</a>
        	</div>
        
        	<div class="nav2">
        		<a href="test.php">Book</a>
        	</div>
        
       	  <div class="nav1">
        		<a href="regal4.php">Contact Us</a>
       	  </div>
        	
</div>
</div>



        <p><p>


















<HTML>
<HEAD>
<TITLE>Welcome To The Royal Regal Theatre!</TITLE>
<META NAME="keywords" CONTENT="PHP, Classes">
</HEAD>
<BODY>

<HTML>
<BODY>

</BODY>
</HTML>
</BODY>
</HTML>
       
<div id="bookings">

is it look OK for you

Yesideez · March 25, 2009

OUCH!

I forgot to mention that!

Sign In

[SOLVED] Differences between Firefox and Internet Explorer

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information