Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

unusual behaviour of page layout in IE

Posted on 2009-04-29
5
Medium Priority
?
243 Views
Last Modified: 2013-12-12
hi
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 {
    width:550px;
    height:140px;
    border:solid black 1px;
    padding:6px;
	float:right;
	margin-left:12px;
  }
  div.items {
	width:110px;
	min-width:90px;
	height:80px;
	min-height:80px;
	margin: 0 0 10px 10px;
    float:left;
	display:inline;
 
 
	}
  div.itemwindow {
    width:110px;
    height:100px;
    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 .= "
  <td>
  \n
			
						<form method=\"post\" action=\"compsvideo.php\">\n
					  <tr>
					    <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> 
</div>
  <input type=\"hidden\" name=\"compid_{$row['id']}\" value=\"{$row['compid']}\" />
  <input type=\"hidden\" name=\"userid_{$row['id']}\" value=\"{$row['userid']}\" />
					
					 
	";
	
	
	
					$j++;
					"</form>";

Open in new window

0
Comment
Question by:mattibutt
  • 3
5 Comments
 
LVL 11

Author Comment

by:mattibutt
ID: 24258622
even its appearing fine in safari
0
 
LVL 17

Accepted Solution

by:
Chris Harte earned 2000 total points
ID: 24259411
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
http://www.positioniseverything.net/ie-primer.html
This is a good place to get started;
http://www.communitymx.com/content/article.cfm?cid=C37E0

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">
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24259459
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
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 24260260
You need to use a conditional style sheet, suggestion 3 in this article:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

plus more about setting up conditional style sheets based on the version of IE you need to fic:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

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">
<![endif]-->

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

Author Closing Comment

by:mattibutt
ID: 31575851
thanks buddy it actually worked with all the browser now but i have to change the code after removing #
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

578 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