Hi, I have only started using css last week and am struggling with positioning my divs.Everything in the middle section of the screen is perfect in firefox but too low down in IE! does anyone know why?? Please please someone help me. Thanks a million Much aprreciated, Colm HTML Code: <code> <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> <br> <div id = topbar> <center>Menu</center> </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> <br> <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> <br> <div id = ad1> <img src="images/rambo.jpg" width="157" height="250" /> </div> </div> <div id = ad2> <img src="images/ad.jpg" width="578" height="80" /></td> </div> <br> <div id = fowcontainer> <br> <div id = fowmenu> <table width="200" border="0" cellpadding = "0" cellspacing = "1"> <tr> <td width="129"><img src="images/viewprofile.jpg" width="129" height="20" /></td> <td width="41"><img src="images/viewtrailer.jpg" width="129" height="20" /></td> <td width="8"><img src="images/viewtimes.jpg" width="129" height="20" /></td> </tr> </table> </div> <div id = fowpic> <img src="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="images/viewprofile.jpg" width="129" height="20" /></td> <td width="41"><img src="images/viewtrailer.jpg" width="129" height="20" /></td> <td width="8"><img src="images/viewtimes.jpg" width="129" height="20" /></td> </tr> </table> </div> <div id = listing1> <img src="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="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 id = sidead> <img src="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 { padding: 0px 0px 0px 0px; 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 { 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 { padding: 0px 0px 0px 0px; position: relative; width: 157px; height: 250px; float: top left; } #ad2 { position: relative; top: -725px; left: 180px; width: 578px; height: 80px; } #fowcontainer { position: relative; top: -740px; left: 180px; color:red; font-family: tekton pro, Arial, Helvetica, sans-serif, Tekton Pro; } #fowpic { } #fowmenu { margin: 0px 0px 0px 0px; } #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: -740px; 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 { margin: 0px 0px 0px 0px; 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: -1465px; left: 780px; width: 142px; height: 736px; } </code>
Well, let's see... first you should probably include a valid doctype so IE has a CHANCE of rendering remotely like firefux and the rest of the world... axe the presentational tags like BR and CENTER, ESPECIALLY when you've got a perfectly good id around something... the use of semantic markup like header tags for headers and lists for lists (like the menu) could help clean things up a bit... in your CSS you are declaring a half dozen properties that don't even EXIST (there is no such thing as float:top), you are using relative positioning to put elements in directions they shouldn't go in the first place (in fact you are trying to use relative like most people abuse absolute - bad thing all around). and as someone who uses and abuses negative margins - I can't for the life of me figure out why you are calling them so much on the strangest of elements. Do you have a picture of what you are trying to accomplish? From what you have so far I don't dare 'tug' on anything because I can't make heads nor tails of what it's even supposed to look like.
Well as i said i only started using css last week so i don't really have a clue what you are talking about really. Originally i was using margins to postition the divs but found on the net to use position: relative; so started using that. That maybe why there are some margin tags around. If you take the code and have a look at them in the firefox even withoout the pictures, you'll see what it should look like! Your help is much appreciatted, Thanks, Colm
Best way to start is: -> mockup an image of what you want your webpage to look like -> break it down into blocks such as header, left nav, footer, content etc. And sub-blocks like left nav login etc. -> create html markup for main blocks (<div id="header"></div> etc) -> create stylesheet and use minimum code to style your elements - start with a reset. keep checking progress across different browsers. Once you got that basic foundation right then... -> go back to html page and start making sub elements (left nav login section etc) -> use minimum code to get that looking right Keep going and your there.