IE - firefox layout conflict

Partizan · 04-30-2009, 12:21 PM

Hi all,

When I check this page in IE it looks different than in Firefox.

http://www.minifigtimes.com/news-legoland.shtml

In IE the main body (Images and their related text) are way down the page.

Is there something wrong with my code does anyone know?

PHP Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>The Minifig Times for all your Lego News</title>

<link rel="shortcut icon" href="http://www.minifigtimes.com/images-site/icon.ico">

<link rel="stylesheet" type="text/css" href="default.css">

<meta name="description" content="A Lego news blog providing an insight into the crazy world of deranged Legomen otherwise known as minifigs.">

<meta name="abstract" content="The Minifig Times provides Lego news from the town, city, castle, pirates, train, space, technic and western themes.">

<meta name="robots" content="index,follow">

<meta name="googlebot" content="index,follow">

<meta name="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!--Second copy of the script-->

<script type="text/javascript"> 

<!--

var img2 = new Array();

var caption2 = new Array();

var path2 = "http://www.minifigtimes.com/"

 

img2[0] = path2 + "news/2009/images/nib-city-1.png"

caption2[0] = "Politics: Emperor David has sent an open letter to the minifigs of Rulandstin expressing his sympathy after the state was devastated following a powerful hurricane last week. <br><br> The Emperor said that all government ministers in Legoland would hold a minute silence on Monday as a mark of respect for minifigs killed in the PBR. Meterologists reported that Hurricane April reached Category 5.";   

 

img2[1] = path2 + "news/2009/images/nib-minifig-alan-mcmanus-1.png";

caption2[1] = "Sport: Greentown Athletic have been sold to Green Islander businessfig Mr Alan McManus for a £45m fee. The club will play their first game under new ownership when they entertain Parma at the Athletic Ground. <br><br>Former owner, Higginsland businessfig Mr Primus Stove, is expected to use the £8.75m profit from the sale to bid for another club, with Serie B side Foggia understood to be a target.";

 

img2[2] = path2 + "news/2009/images/nib-s16c-1.png";

caption2[2] = "Sport: Organisers for the new Super 16 Conference have said that the prize monies available to the participating clubs is likely to be in the region of £160m. <br><br> Teams that qualify from the group stage are set to net £10m, with the semi finalists each earning £15m. The runners-up will land £20m whilst the overall winners will pocket £30m and a chance to earn even more in the Pan Continental Superbowl.";

 

img2[3] = path2 + "news/2009/images/nib-minifig-emperor-david-1.png";

caption2[3] = "Business: Emperor David has revealed he will not bankroll the redevelopment of the capital despite donating £45m in the last month. <br><br> Speaking to the parliament, the supreme leader of the Third Empire explained that the worsening state of the economy was also hitting his finances and he has no more money to give and in fact may soon be off to his local State Economic Bureau to collect social welfare payments. ";

 

 

// Add more images here

 

function changeIMG2(direction) {

 

  var current=document.images.nextpic2.src;

    

  for (var i = 0;i<img2.length;i++) {

    if(img2[i]==current) {

      if(direction=="forward") {

        if(i==img2.length-1) {

          swap2(0);

        }

        else {

          swap2(i+1);

        }

      }

      if(direction=="back") {

        if(i==0) {

          swap2(img2.length-1);

    }

        else {

          swap2(i-1);

        }

      }

      break;

    }

  }

}

 

function swap2(nr) {

  document.images.nextpic2.src=img2[nr];

  document.getElementById("imgcaption2").innerHTML=caption2[nr];

}

 

//-->

</script>

 

<!--End of Second Copy of Script-->

</head>

<body>

<div class="filler-menu">

  <img src="http://www.minifigtimes.com/images-site/the-minifig-times.png" alt="The Minifig Times">

</div>

 

 

<div class="pd_menu_01"> 

<ul><li><a href="/">Home</a>

</li></ul>

 

<ul><li><a href="http://www.minifigtimes.com/news-legoland.shtml">News</a>

<ul>

<li><a href="http://www.minifigtimes.com/news-legoland.shtml">Legoland</a></li>

<li><a href="http://www.minifigtimes.com/news-international.shtml">International</a></li>

</ul>

</li></ul>

 

<ul><li><a href="http://www.minifigtimes.com/football.shtml">Sport</a>

<ul>

<li><a href="http://www.minifigtimes.com/football.shtml">Serie A</a></li>

<li><a href="http://www.minifigtimes.com/football-more.shtml">Serie B</a></li>

<li><a href="http://www.minifigtimes.com/football-s16c.shtml">Super 16 Conference</a></li>

</ul>

</li></ul>

 

 

<ul><li><a href="#">Resources</a>

<ul>

<li><a href="http://www.minifigtimes.com/football-downloads.shtml">Downloads</a></li>

<li><a href="http://www.minifigtimes.com/search.shtml">Search</a></li>

</ul>

</li></ul>

 

</div>

<p>

<img src="http://www.minifigtimes.com/images-site/the-minifig-times-is-hiring.png" class="farright" alt="The Minifig Times is hiring!">

</p>

 

 <h4 class="story-headline-top">Home news</h4>       

    <div class="img right" style="border: 0px solid black; padding: 20px; float: right; width: 250px; max-width: 250px;">

       

 

<br>

<br>

<p class="section-headers-page">News in brief</p>

<img name="nextpic2" src="http://www.minifigtimes.com/news/2009/images/nib-city-1.png" class="farright" onclick="changeIMG2();" alt="LEGO news">

 <p id="imgcaption2" style="width: 100%; margin-top:0;">  

Politics: Emperor David has sent an open letter to the minifigs of Rulandstin expressing his sympathy after the state was devastated following a 

powerful hurricane last week. <br><br> The Emperor said that all government ministers in Legoland would hold a minute silence on Monday as a mark 

of respect for minifigs killed in the PBR. Meterologists reported that Hurricane April reached Category 5.

</p>

<a href="#" onclick="changeIMG2('forward');return false;" class="link-next-picture">More News in brief...</a>

<!-- MAXIMUM LENGTH OF STORY TEXT #################################################################################################### -->

 

<div class="left" style="border: 0px solid black; padding: 0px; float: left; width: 550px; max-width: 550px;">

<br>

<p class="section-headers-page">Latest society news</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-04-08-story01.shtml" class="link-news">Riot errupts in Legoland City centre after arrest...</a>

</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-03-25-story01.shtml" class="link-news">Dickus labels General Secretary an "idiot"...</a>

</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-03-10-story01.shtml" class="link-news">Council unveals proposals for capital redesign...</a>

</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-02-23-story01.shtml" class="link-news">Nation's third largest bank collapses...</a>

</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-02-20-story01.shtml" class="link-news">Calls for government to resign...</a>

</p>

 

</div>   

<!-- MAXIMUM LENGTH OF STORY TEXT #################################################################################################### -->

 

<div class="left" style="border: 0px solid black; padding: 0px; float: left; width: 550px; max-width: 550px;">

 

<p class="section-headers-page">Latest sports news</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-02-28-story01.shtml" class="link-news">Loko loses first game in charge to Lazio...</a>

</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-02-24-story01.shtml" class="link-news">Marino sack Aldridge after club slips...</a>

</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-02-23-story02.shtml" class="link-news">LFC president Hagi announces his retirement...</a>

</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-02-21-story01.shtml" class="link-news">Van Basten let go by LFC as United go top...</a>

</p>

 

<p class="no-space-above">

<a href="http://www.minifigtimes.com/news/2009/2009-02-18-story01.shtml" class="link-news">Van Basten on last legs as LFC dumped out...</a>

</p>

 

</div>  

 

  </div>

  

  

 <p>    

Recent news from Legoland is shown below and arranged in chronological order with the most recent stories first.

</p>

 

 

 

 

 

 

<div>

<div class="subwrapper news-stories-grid-top">

    <div>

        <img src="http://www.minifigtimes.com/images-2009/news/2009-04-06-p1.png" alt="LEGO news">

        <p>

        <a href="http://www.minifigtimes.com/news/2009/2009-04-06-story01.shtml" class="link-read-story">

        BFB celebrate as patron clears club's debts

           </a>

 

               </p>

       </div>

    <div class="mid">

        <img src="http://www.minifigtimes.com/images-2009/news/2009-03-25-p1.png" alt="LEGO news">

        <p>

        <a href="http://www.minifigtimes.com/news/2009/2009-03-25-story01.shtml" class="link-read-story">

        Dickus labels General Secretary an "idiot"

           </a>

               </p>

 

    </div>

     <div>

        <img src="http://www.minifigtimes.com/images-2009/news/2009-03-10-p1.png" alt="LEGO news">

        <p>

        <a href="http://www.minifigtimes.com/news/2009/2009-03-10-story01.shtml" class="link-read-story">

        Council unveals proposals for capital redesign

           </a>

               </p>

    </div>      

 

</div>      <!-- sub wrapper Div end -->

</div>

 

 

 

<div>

<div class="subwrapper news-stories-grid-top">

    <div>

        <img src="http://www.minifigtimes.com/images-2009/news/2009-03-01-p1.png" alt="LEGO news">

        <p>

        <a href="http://www.minifigtimes.com/news/2009/2009-03-01-story01.shtml" class="link-read-story">

        No butts or maybes as Boškov is shown the door

        </a>

        </p>

        

    </div>

    

    <div class="mid">

    

        <img src="http://www.minifigtimes.com/images-2009/news/2009-02-28-p1.png" alt="LEGO news">

        <p>

        <a href="http://www.minifigtimes.com/news/2009/2009-02-28-story01.shtml" class="link-read-story">

        Loko loses first game in charge to manager-less Lazio

        </a>

        </p>

    

    

    </div>

    

    <div>

        <img src="http://www.minifigtimes.com/images-2009/news/2009-02-24-p1.png" alt="LEGO news">

        <p>

        <a href="http://www.minifigtimes.com/news/2009/2009-02-24-story01.shtml" class="link-read-story">

        Marino sack Aldridge after club slips closer to drop

        </a>

        </p>

    </div>   

            

</div>      <!-- sub wrapper Div end -->

    

</div>    

 

 

 

 

 

<div>

<br>

<br>

<br>

 

<a href="http://www.minifigtimes.com/news/2009/archive-news-legoland-1.shtml" class="link-standard">Next Page</a>

    

</div>

abduraooft · 04-30-2009, 12:36 PM

Your way of creating a 2 column layout is not so good, I'd say, and there for your layout is suffering from the box model bug of IE.

To make a 2 column layout, apply a width+float on one of the column elements(preferably the smaller one), and then apply a suitable margin-right/left to the other one, depending upon the position. Also, always take care while applying width/padding/margin to he inner elements of your columns.

Refer http://bonrouge.com/2c-hf-fluid(r).php (setting a width:76%; on the #wrap would give you a layout which is almost similar to yours)

Quote:

Code:

body {/*default.css (line 17)*/
background-color:#FFFAFA;
font-family:"calibri";
font-size:90%;
margin-left:12%;
margin-right:12%;
}

Avoid setting margin/width/padding directly on the html or body tags. Add a wrapper div instead and apply those styles on it.