FF and IE Layout problems

cododonnell · #1 (**permalink**) Nov 2nd, 2007, 12:47

Hi,
I have only started using css last week and am struggling with positionin my divs. When i open the website in ff its perfect but when i open it in IE everything in the middle column of the site is too far up hence half of the picture at the top is missing! Help Much Appreciated!
Thanks
Colm

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Dundrum Cinema</title>
<link rel="stylesheet" type="text/css" href="sitestyle.css" />
</head>
<body>
<div id = container>
    <div id = col1>


    <div id = logo>
    
    </div>

    <div id = topbar>

    Menu

    </div>
    
    <div id = background>

    <p><a href = "home.html">Home</a></p>

    <p><a href = "nowshowing.html">Now Showing</a></p>

    <p><a href = "register.html">Register</a></p>

    <p><a href = "kidsclub.html">Kids Club</a></p>

    <p><a href = "Competitions.html">Competitions</a></p>

    </div>

    <div id = topbar>

    Log In

    </div>

    <div id = background>

    <form id="form1" name="form1" method="post" action="">

     <label>Username
      <input type="text" name="username" id="username" />

      </label>

      <p>

        <label>Password

        <input type="text" name="password" id="password" />

        </label>

      </p>

      <p>

        <label>

        <input type="submit" name="Submit" id="Submit" value="Submit" />

        </label>

      </p>

    </form>
    

    </div>


    <div id = ad1>
    
    <img src="http://www.webforumz.com/images/rambo.jpg" width="157" height="250" />

    </div>

       </div>

    <div id = col2>
    <div id = ad2>
    
    <img src="http://www.webforumz.com/images/ad.jpg" width="578" height="80" /></td>
    
    </div>
    
    
    
<div id = fowcontainer>
    
    
            
    <div id = fowmenu>

    <table width="200" border="0" cellpadding = "0" cellspacing = "1">
      <tr>
        <td width="129"><img src="http://www.webforumz.com/images/viewprofile.jpg" width="129" height="20" /></td>
        <td width="41"><img src="http://www.webforumz.com/images/viewtrailer.jpg" width="129" height="20" /></td>
        <td width="8"><img src="http://www.webforumz.com/images/viewtimes.jpg" width="129" height="20" /></td>
      </tr>
    </table>    
    
    </div>
    
    <div id = fowpic>
    
    <img src="http://www.webforumz.com/images/rat.jpg" width="390" height="255" />
    

    </div>
    Film of The Week: Ratatouille

</div>



    <br>
    <br>

<div id = listingscontainer>

    <div id = listingmenu>

    <table width="200" border="0" cellpadding = "0" cellspacing = "1">
      <tr>
        <td width="129"><img src="http://www.webforumz.com/images/viewprofile.jpg" width="129" height="20" /></td>
        <td width="41"><img src="http://www.webforumz.com/images/viewtrailer.jpg" width="129" height="20" /></td>
        <td width="8"><img src="http://www.webforumz.com/images/viewtimes.jpg" width="129" height="20" /></td>
      </tr>

    </table>



    </div>

    <div id = listing1>
    
    
    <img src="http://www.webforumz.com/images/stardust(small).jpg" width="86" height="64" />
    <p class = "title" >Stardust</p>
    <p class = "description" > Claire Danes, Michelle Pfeiffer and Charlie Cox star in this fantasy adventure by bestselling author Neil Gaiman. A young man promises to retrieve a fallen star from a magical realm.</p>
    
    
    </div>

    <div id = listing2>

    <img src="http://www.webforumz.com/images/hbk(small).jpg" width="86" height="64" />
    <p class = "title" >The Heartbreak Kid</p>
    <p class = "description" > After years of running away from commitment, Eddie 
(Ben Stiller) gets married to the seemingly perfect woman. On honeymoon, he not only realises she’s a nightmare, but also meets the girl of his dreams..</p>

    </div>

</div>
</div>

          <div id = sidead>

        <img src="http://www.webforumz.com/images/sidead.jpg" width="142" height="736" />

        </div>

</div>
</body>
</html>
</code>

CSS Code:

<code>

body
{
font: 1em/1em verdana;
}


#container

{
background-color:#9999999;
padding: 0px 0px 0px 0px;
}

#col1

{

width: 157px;
}

#logo

{
background: #fff url(images/Movies@logo.jpg) no-repeat;
width: 157px;
height: 81px;
float: top left;
}

#background

{
font-size: x-small;
padding: 4px 0px 0px 0px;
background-color:#d7d7d7;
width: 157px;
padding: 5px 0px 5px 0px;
text-align: center;
}

#topbar
{
margin: 8px 0px 0px 0px;
padding: 4px 0px 0px 0px;
background-color:#84b2ff;
width: 157px;
height: 25px;
font-weight: bold;
text-align: center;
color: #cd7e9b;
}

a:link 
{ 
font-weight: bold; 
text-decoration: none; 
color: #B7A5DF;
}

a:visited
{ 
font-weight: bold; 
text-decoration: none; 
color: #D4CDDC;
}

a:hover, a:active 
{ 
text-decoration: underline; 
color: #9685BA;
}

#ad1
{
margin: 8px 0px 0px 0px;
position: relative;
width: 157px;
height: 250px;
float: top left;
}

#col2
{

margin: 8px 0px 0px 0px;

}

#ad2
{
position: relative;
top: -708px;
left: 180px;
width: 578px;
height: 80px;
}


#fowcontainer
{
position: relative;
top: -700px;
left: 180px;
color:red;
font-family: tekton pro, Arial, Helvetica, sans-serif, Tekton Pro;
}

#fowpic
{

}

#fowmenu
{

}

#qbcontainer
{

margin: -100px 0px 0px 0px;

}

#topbar1
{
margin: -283px 0px 0px 600px;
background-color:#84b2ff;
width: 157px;
height:25;
font-weight: bold;
text-align: center;
color: #cd7e9b;
}


#qbbackground

{
margin: 0px 0px 0px 600px;
background-color:#d7d7d7;
height: 255px;
width: 157px;
text-align: center;
}

#qbbackground form
{
margin: 25px 0px 0px 0px;
font-size: 12px;

}

#listingscontainer
{

position: relative;
top: -720px;
left: 180px;
width: 575px;

}

#listing1
{

background-color:#d7d7d7;
height: 140px;
width: 577px;

}

#listing1 img
{

margin: 40px 0px 0px 20px;

}

#listing1 p.title 
{

color: #59a3e8;
margin: -80px 0px 0px 120px;

}


#listing1 p.description 
{

font-size: 11px;
color: #fffffff;
margin: 10px 110px 0px 120px;

}

#listing2
{

background-color:#7c7d7c;
height: 140px;
width: 577px;

}

#listing2 img
{

margin: 40px 0px 0px 20px;

}

#listing2 p.title 
{

color: #59a3e8;
margin: -80px 0px 0px 120px;

}


#listing2 p.description 
{

font-size: 11px;
color: #fffffff;
margin: 10px 110px 0px 120px;

}

#sidead
{

position: relative;
top: -1420px;
left: 780px;
width: 142px;
height: 736px;

}

Marc · #2 (**permalink**) Nov 2nd, 2007, 15:22

Why is your CSS in <code> tags?

If it isnt in an external CSS style it should be in <style> tags...

Have you got this hosted also?

EDIT:

Also another observation... In you div id's it should look like this: <div id="myid"> and not <div id = myid>...

cododonnell · #3 (**permalink**) Nov 2nd, 2007, 15:30

sorry the code tags shouldn't be there!! dont worry there not there in the actual code. It is an external stylesheet. Have u any idea wats wrong with it?!

thanks

Colm

Lchad · #4 (**permalink**) Nov 2nd, 2007, 15:34

We can't tell you what is wrong unless we have access to the css code.
The best thing to do is upload this site to the web either to your domain or on a free webhost. We simply can't guess.

cododonnell · #5 (**permalink**) Nov 2nd, 2007, 15:54

ok i uploaded it to www.geocities.com/cododonnell/site2.html Please take a look and try help me with this very annoying problem!
thanks again
colm

Lchad · #6 (**permalink**) Nov 2nd, 2007, 18:05

Good job uploading it..

I don't see what you are seeing. I see the left column at the top, then the center column is down lower about 1 inchin IE 7 and IE6. Firefox shows the three columns aligned evenly.

Is that the problem?

Check all your top margins on the center column and check all the top paddings.
You might run into issues with all the relative positioning. You should be using floats instead. Floats are so much easier to attain the right layout than positioning.

cododonnell · #7 (**permalink**) Nov 2nd, 2007, 18:11

yeah that was the problem that the 2nd and 3rd column were not even with the first! I don't really know how to use floats to be honest as i was never thought that way! we were only thought using position:relative;.

Lchad · #8 (**permalink**) Nov 2nd, 2007, 18:39

Did you check your padding and margins for the center column?

cododonnell · #9 (**permalink**) Nov 2nd, 2007, 18:59

yeah! there's nothing on either of them!!!

AdRock · #10 (**permalink**) Nov 2nd, 2007, 22:03

You have quite a few warnings when validating your code. I am using HTML Validator add-on in Firefox and it's showing 52 warnings.

Maybe you could look for a 3 column layout and remove the header and just use the column instead

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
2 layout problems FF + IE when resizing browserwindow	tilto	Web Page Design	0	Mar 17th, 2008 08:55
sticky roll overs - two problems with a layout	artdog	Web Page Design	0	Feb 7th, 2007 12:56
problems with layout in dreamweaver 8 CSS	andyseaton2003	Web Page Design	4	Oct 2nd, 2006 17:58
Layout and template problems	The Hick Man	Web Page Design	3	Sep 1st, 2006 17:32
Problems with IE6 Layout	tiger	Web Page Design	2	Oct 14th, 2005 21:22

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
FF and IE Layout problems