Different layout presentation in Internet Explorer and firefox

system · August 23, 2013, 12:12pm

[php]

$include

[/php]

This is the container. The $include is the following php file :

[php]require_once("…/.common/.init.php");

$db = new PDO(DBASE);
if (!isset($pos)) {$pos =0;}

print <<< START

bekijk de nieuwe spullen

START;

//advertenties
$result = $db->query(“SELECT * FROM AanbodSpul ORDER BY id DESC LIMIT 24 OFFSET $pos;”);
$teller=$pos;

// mededeling.php
foreach($result as $row)
{ extract($row);
$teller+=1;

if ($status == $statuscode)
{$lid=" Lid: $lidnr"; $w = ‘w’;}
$tekst = stripslashes($tekst);
if($teller == 1)
$lidnr = “Vakantie”;

if (strlen($lidnr) < 6)
{$plaatje="…/fotoos/".$id.".jpg";

$src="resizefoto.php?plaatje=$plaatje";
if (!is_file($plaatje)) 
{$src='../fotoos/blanco.gif';}
$info = "Spullen:$id <small>$datum</small>$lid";

echo "

$info

$tekst

";
if($teller == 12)
echo “
”;
}
else
{

echo "<div id = 'mededeling' ><h2>$lidnr</h2>Tot 19 augustus geen nieuw aanbod</div>";

}
}

$db = NULL;[/php]

The CSS :

[code]img#foto {
margin-top: 0px;
padding: 20px;
border: 0px;
vertical-align:top;
-webkit-border-radius: 12px;
border-radius: 12px;

}

div#infoblok
{
margin-top: -20px;
width : 210px;
display:block;
color: White;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, Sans-serif;
text-decoration:none;
background-color: Darkslategrey;

#localtekstblok
{
width: 210px;
display: block;
color: Darkblue;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, Sans-serif;
text-decoration:none;
text-align: left;
line-height: 100%;
background-color: white;
-webkit-border-radius: 12px;
border-radius: 12px;
}

#mededeling
{

float: left;
width: 210px;
height: 250px;
margin-top: 20px;
background-color: #00A0E3;
color: white;
font-size: 20px;
font-weight: normal;
font-family: Arial, Helvetica, Sans-serif;
text-decoration:none;
text-align: center;
margin-left: 20px;
padding-right: 10px;
padding-left: 10px;

}

#ad
{

display: table-cell;

width:340px; 
height: 280px;  
background-color: Silver;

}[/code]

In Netscape and firefox it looks like this : http://kwikweb.nl/paginas/indexbody.php

How should I edit the code that it looks the same in Internet Explorer ? As you can see the #mededeling# div in IE is aligned above the #ad divs. But the #mededeling div should be inline with the #ad divs. What should I do ?

Thanks in advance,

Farid

Topcoder · August 24, 2013, 3:51pm

It looks the same in firefox, chrome and IE 10.

It’s because you’re using certain style sheets that don’t work in older versions of IE.

It’s the

#ad { display: table-cell; }

That’s not supported in older versions of IE. So in order for you to get around it. I would just turn all those div’s into a table with rows and columns and put the images in the table cells. To emulate with the table-cell display does.

Farid · August 25, 2013, 3:42pm

Thank you for your reaction !

But I have to use display: table-cell also to make up the menu as you can see in the following CSS code :

[code]div.menu{
display:table;
}

div.menu ul{
list-style: none;
margin:0px auto;
display:table;
padding:2px;

}

div.menu li{
display:table-cell;
vertical-align: middle;
text-align:center;

}

div.menu a{
color:white;
display:block;
padding:4px 10px;
text-decoration:none;
}[/code]

I am using Internet Explorer 8! Website: http://kwikweb.nl/paginas/indexbody.php

Thanks in advance !

Topcoder · August 25, 2013, 3:53pm

Why do you have to use?

display: table-cell

You easily do the same thing with table,tr,td tags that will work on all browsers.

“table-cell” is un-supported and wont work in IE8.

If you want everything to look good in IE8 then you can come up with a different style sheet for it, by telling the browser which style sheet to use per what version of IE.

[code]

[/code]

Farid · August 25, 2013, 5:59pm

So if I want to align all the images on one line I could make a table with one row ?

Topcoder · August 25, 2013, 6:06pm

Exactly.

<table style="width:100%"><tr><td ><img /></td><td<img /></td><td<img /></td></tr></table>

Then on the

you can add styles to them to align and pad the images, to make it look like what you have right now.

Then it will render the same in all browsers and everyone will be happy… Even Safari users.

Farid · August 30, 2013, 12:09pm

Thank you for your advice !

I have another issue. I make #localtekstblok a fixed height but if the text doesn’t fit, the height should adapt.

#localtekstblok { height: 50px; width: 210px; color: Darkblue; font-size: 14px; font-weight: bold; font-family: Arial, Helvetica, Sans-serif; text-decoration:none; text-align: left; background-color: white; }

As you can see at image Spullen:2808 22-02-13 at http://kwikweb.nl/paginas/indexbody.php

phphelp · August 30, 2013, 1:51pm

If you want the height to adapt…

Change:

[php] height: 50px;[/php]

to

[php] height:auto; [/php]

Farid · August 30, 2013, 6:05pm

But I only want the height to adapt when the text exceeds the hight of 50px ?

Topcoder · August 30, 2013, 8:16pm

Then use this:

[php]min-height:50px;
height:auto;
[/php]

Farid · September 2, 2013, 12:34pm

Thnx.

Now I try to center the image in a table-cell with vertical-align: middle but it stays the same ?

And why is the second row smaller than the first one ?

Topcoder · September 2, 2013, 4:22pm

You can add a

[php]height: 355px;[/php]

To your table-cell style and that will even up the rows.

Now I try to center the image in a table-cell with

Everything looks center of my screen, perhaps you can attach a photo of what you’re talking about?

Farid · September 3, 2013, 1:02pm

If I make the height of the table-cell smaller than 280px the rows are not even. How come ?

In the attached picture you can see the content is not centered.

This is the CSS code of the table :

[code]#table
{
border-collapse:collapse;
width: 100%;
height: 100%;
}

.table-cell
{
border: solid 1px red;
padding-left: 20px;
height: 355px;
vertical-align: middle;
}[/code]

Thank you.

Topcoder · September 3, 2013, 1:54pm

The issue is not the table or table-cell css

It’s your #ad, replace it with the one below.

[php]#ad {
width: 210px;
background-color: silver;
}[/php]

You really shouldn’t use Internet explorer, it’s the worst browser to use when trying to get the STYLING right, everything is so much easier with CHROME and it’s built in developers tools for CSS. I manipulate your styles using the Chrome browser and see it live without ever touching your code.

scottlpool2003 · September 3, 2013, 2:54pm

I think that’s awful advise unless you want to instantly forget about 11.8% of your visitors!

The best thing you can do is optimize for as many versions of IE before throwing in a media query on the lowest IE you will run your website for and offer the user a download link to a newer version.

Topcoder · September 3, 2013, 3:02pm

@scottlpool2003

I didn’t mean don’t style for IE, I meant it’s the most awful browser to use when trying to get you styling set up properly, because it lacks good developer tools to help you modify CSS on the fly.

Develop using chrome/firefox - then Test in IE. Developing in IE then testing in chrome/firefox - just doesn’t make much sense to me.

scottlpool2003 · September 3, 2013, 3:14pm

Oh right, misread what you were advising. Yes IE is horrific to even browse with let alone develop on. I find it increasingly difficult to persuade people to move onto Chrome or Firefox for speed and ease-of-use.

Farid · September 3, 2013, 3:40pm

Thank you Topcoder problem solved!