unusual behaviour of page layout in IE

Posted on 2009-04-29
Last Modified: 2013-12-12
i am displaying some videos thumbnails on the web page they are appearing finely in the Mozilla and chrome but in the internet explorer they are appearing completely different
in the mozilla they are appearing left to right and thats how i want them to be but in the IE they are appearing like top to bottom
//css code

  div#container {



    border:solid black 1px;





  div.items {





	margin: 0 0 10px 10px;




  div.itemwindow {



    border:solid black 1px;


  div.clearfix { clear:both; }

//php code

	$sql = "SELECT uniq_id, artist, video_title, yt_views, added FROM pm_videos_comp" ; 

// NEW ITEM //

$result = mysql_query($sql); 

$item = '';

$j = '1';

$alt = '1';


$item .= "<form method=\"post\" action=\"compsvideo.php\">";

$item .= "<table><tr>";

while ($row = mysql_fetch_array($result))


 $col = ($alt % 2) ? 'row1' : 'row2';

 $item .= "




						<form method=\"post\" action=\"compsvideo.php\">\n


					    <div class=\"container\">

					   <div class=\"items\">

					   <div class=\"itemwindow\">

					       <div align=\"center\" class=\"$col\" width=\"100\" ><a href=\"".makevideolinks($row['uniq_id'])."\"><img src=\"".show_thumbs($row['uniq_id'])."\" alt=\"".$row['video_title']."\" class=\"tinythumbs\" width=\"200\" height=\"200\" align=\"left\" border=\"1\" /></a></div>

  <br />

  <div  width=\"250\"><a href=\"".makevideolinks($row['uniq_id'])."\">".$row['artist']."</a></div>


   <input type=\"radio\" class=\"inputbuttons\" name=\"Vote\" value=\"{$row['uniq_id']}\" /></div> 


  <input type=\"hidden\" name=\"compid_{$row['id']}\" value=\"{$row['compid']}\" />

  <input type=\"hidden\" name=\"userid_{$row['id']}\" value=\"{$row['userid']}\" />









Open in new window

Question by:mattibutt
    LVL 11

    Author Comment

    even its appearing fine in safari
    LVL 16

    Accepted Solution

    Welcome to the box model bug. IE is famously non standards compliant (they all are but IE more than most). 

    The problem will be with your CSS, the float and borders
    This is a good place to get started;

    However, I have just noticed that you are using an id selector # instead of a class selector. Your css should be
     div.container {
    rather than,
     div#container {

    Only use # against an id. eg <div id="container">
    LVL 11

    Author Comment

    hi MunterMan

    thanks for your reply i have tried that  div.container { it actually create four different containers and plus it messes up on firefox and chorome let alone working in IE
    LVL 17

    Expert Comment

    You need to use a conditional style sheet, suggestion 3 in this article:

    plus more about setting up conditional style sheets based on the version of IE you need to fic:

    The best was to do this is in a separate style sheet with only the IE values displayed
    <!--[if  IE 6]>
    <link rel="stylesheet" type="text/css" href="/css/ie6.css">

    and remember if you set a value on the regular style sheet, it affects the IE style sheet unless you change it.
    LVL 11

    Author Closing Comment

    thanks buddy it actually worked with all the browser now but i have to change the code after removing #

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Creating an OSPF network that automatically (dynamically) reroutes network traffic over other connections to prevent network downtime.
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now