don`t use pading. I dont have time to look it at it more.... but: IE use: broken box model ( that means that he put everything padding, borders etc in width ) Link for you: http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html Show us your code....
index.html code <? ob_start(); $mtime1 = explode(" ", microtime()); $starttime = $mtime1[1] + $mtime1[0]; $result = mysql_query(" SELECT name, total FROM cats ORDER BY id ASC"); ?> <!-- START HEADER --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- Mirrored from eljayresearch.co.uk/test/ by HTTrack Website Copier/3.x [XR&CO'2005], Sat, 03 Dec 2005 20:20:45 GMT --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Funny Videos - <?echo $pagetitle;?></title> <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW"> <META NAME="REVISIT-AFTER" CONTENT="1 DAYS"> <META NAME="KEYWORDS" CONTENT="movies, pictures, animations, games"> <META NAME="DESCRIPTION" CONTENT="Drunken Cat Daily Entertainment, movies, pictures, Flash animation, games, and more hot stuff!"> <link rel="shortcut icon" href="http://eljayresearch.co.uk/i/favicon.ico"> <link rel="stylesheet" href="global.css" type="text/css"> <style type="text/css"> <!-- .style4 {color: #999999} --> </style> <script language="JavaScript"> <!-- function SymError() { return true; } window.onerror = SymError; var SymRealWinOpen = window.open; function SymWinOpen(url, name, attributes) { return (new Object()); } window.open = SymWinOpen; //--> </script> <SCRIPT LANGUAGE="JavaScript"> function bookmark(url, description) { netscape="Netscape User's hit CTRL+D to add a bookmark to this site." if (navigator.appName=='Microsoft Internet Explorer') { window.external.AddFavorite(url, description); } else if (navigator.appName=='Netscape') { alert(netscape); } } //--> </SCRIPT> <link href="../style.css" type="text/css" rel="stylesheet"> </head> <body> <div align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr valign="top"> <td><table width="884" cellpadding="0" cellspacing="0" id="wrapper"> <tr> <td id="wrapper2"> <div id="header"> <div id="homeSearch"> <table valign="top"> <tr> <td background="images/searchbox.gif" width="219" height="62"> <table border="0"> <tr> <td width="100" style="padding-bottom:0px;padding-left:15px;padding-right:10px;"><br><br><input type="text" name="term" value="" class="txtBox" style="width:100px"/></td> <td width="25"><br><br><input type="image" accesskey="s" name="search" src="images/searchbutton.gif" alt="Search!"></form></td> </tr> </table> </td> </tr> </table> </div> <a href="http://eljayresearch.co.uk/index.htm" target="_top" style="float:left;"><img src="images/logo2.gif" alt="Miniclip - Free Games and Shows" width="350" height="64" border="0"></a> </div> <!-- END HEADER --> <!-- START TOP MENU --> <div id="content"> <div id="homeNav"> <table id="Table_01" width="623" height="62" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="13"> <img src="menuimages/menu_01.gif" width="623" height="6" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="menuimages/menu_02.gif" width="22" height="49" alt=""></td> <td colspan="2"> <img src="menuimages/menu_03.gif" width="74" height="22" alt=""></td> <td colspan="9" rowspan="2" background="menuimages/menu_04.gif" width="508" height="27"><div id="navigation"> <a href="index-2.html">Home</a> <a href="index-2.html">Best Media</a> <a href="index-2.html">Member Comments</a> <a href="index-2.html">Trade Traffic</a> <a href="index-2.html">Submit</a></div></td> <td rowspan="3"> <img src="menuimages/menu_05.gif" width="19" height="49" alt=""></td> </tr> <tr> <td colspan="2"> <img src="menuimages/menu_06.gif" width="74" height="5" alt=""></td> </tr> <tr> <td> <a href="links/movies/index.html"> <img src="menuimages/menu_07.gif" width="64" height="22" border="0" alt=""></a></td> <td colspan="2"> <img src="menuimages/menu_08.gif" width="20" height="22" alt=""></td> <td> <a href="links/pics/index.html"> <img src="menuimages/menu_09.gif" width="73" height="22" border="0" alt=""></a></td> <td> <img src="menuimages/menu_10.gif" width="22" height="22" alt=""></td> <td> <a href="links/games/index.html"> <img src="menuimages/menu_11.gif" width="57" height="22" border="0" alt=""></a></td> <td> <img src="menuimages/menu_12.gif" width="21" height="22" alt=""></td> <td> <a href="links/animations/index.html"> <img src="menuimages/menu_13.gif" width="96" height="22" border="0" alt=""></a></td> <td> <img src="menuimages/menu_14.gif" width="24" height="22" alt=""></td> <td> <a href="links/misc/index.html"> <img src="menuimages/menu_15.gif" width="42" height="22" border="0" alt=""></a></td> <td> <img src="menuimages/menu_16.gif" width="163" height="22" alt=""></td> </tr> <tr> <td colspan="13"> <img src="menuimages/menu_17.gif" width="623" height="6" alt=""></td> </tr> <tr> <td> <img src="menuimages/spacer.gif" width="22" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="64" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="10" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="10" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="73" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="22" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="57" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="21" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="96" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="24" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="42" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="163" height="1" alt=""></td> <td> <img src="menuimages/spacer.gif" width="19" height="1" alt=""></td> </tr> </table> </div> </div> <!-- END TOP MENU --> <!-- START RIGHT COLUMN --> <div id="bigAd"> <div id="iborder"> <div class="orange"><div class="nav-font"> Take A Look:</div></div> <br> <img src="../images/adrectangle.gif"><br><br> <img src="../images/ad.gif"> </div> </div> <!-- END RIGHT COLUMN --> <!-- START LEFT MENU --> <div id="homeSide"> <div class="sidebar"> <div class="orange"><div class="nav-font"> The Top 10</div></div> <ol> <li><a href="http://eljayresearch.co.uk/runescape_game.html">RuneScape</a></li> <li><a href="http://eljayresearch.co.uk/robotrage.htm">Robot Rage</a></li> <li><a href="motherload.htm">MotherLoad</a></li> <li><a href="streetluge/streetluge.htm">Street Luge</a></li> <li><a href="bigjumpchallenge.htm">Big Jump Challenge</a></li> <li><a href="monstertruck/monstertruck.htm">Monster Truck</a></li> <li><a href="sudoku/sudoku.htm">Sudoku</a></li> <li><a href="heliattack3.htm">Heli Attack 3</a></li> <li><a href="clashnslash.htm">Clash N Slash</a></li> <li><a href="http://eljayresearch.co.uk/puzzlepirates/puzzlepirates.htm">Puzzle Pirates</a></li> </ol><br> <div class="orange"><div class="nav-font"> Our Friends</div></div> <ol> <li><a href="http://eljayresearch.co.uk/runescape_game.html">RuneScape</a></li> <li><a href="http://eljayresearch.co.uk/robotrage.htm">Robot Rage</a></li> <li><a href="motherload.htm">MotherLoad</a></li> <li><a href="streetluge/streetluge.htm">Street Luge</a></li> <li><a href="bigjumpchallenge.htm">Big Jump Challenge</a></li> <li><a href="monstertruck/monstertruck.htm">Monster Truck</a></li> <li><a href="sudoku/sudoku.htm">Sudoku</a></li> <li><a href="heliattack3.htm">Heli Attack 3</a></li> <li><a href="clashnslash.htm">Clash N Slash</a></li> <li><a href="http://eljayresearch.co.uk/puzzlepirates/puzzlepirates.htm">Puzzle Pirates</a></li> </ol> </div> </div> <!-- END LEFT MENU --> <!-- START MAIN CONTENT --> <div id="mainCenter"><div id="borderbottom"> The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here <center><img src="images/line.gif"></center> The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here <center><img src="images/line.gif"></center> The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here <center><img src="images/line.gif"></center> The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here <center><img src="images/line.gif"></center> The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here The Content can go in here The Content can go in here The Content can go in hereThe Content can go in hereThe Content can go in hereThe Content can go in here <center><img src="images/line.gif"></center> </div></div> </div></td> </tr> <!-- END MAIN CONTENT --> <!-- START FOOTER --> <tr> <td id="footer"> <a href="http://eljayresearch.co.uk/contact">Contact Us</a> | <a href="http://eljayresearch.co.uk/Tos">Terms & Conditions</a> | © 2005 </td> </tr> </table></td> <td></td> </tr> </table> </div> </body> <!-- Mirrored from eljayresearch.co.uk/test/ by HTTrack Website Copier/3.x [XR&CO'2005], Sat, 03 Dec 2005 20:20:45 GMT --> </html> <!-- END FOOTER --> <script language="JavaScript"> <!-- var SymRealOnLoad; var SymRealOnUnload; function SymOnUnload() { window.open = SymWinOpen; if(SymRealOnUnload != null) SymRealOnUnload(); } function SymOnLoad() { if(SymRealOnLoad != null) SymRealOnLoad(); window.open = SymRealWinOpen; SymRealOnUnload = window.onunload; window.onunload = SymOnUnload; } SymRealOnLoad = window.onload; window.onload = SymOnLoad; //--> </script> Code (markup):
global.css code body { background:url( images/bg.gif) #036; color:#000; margin:0; text-align:center; font-family:verdana, arial, helvetica, sans-serif; font-size:10px; margin-bottom:20px; } .navigation { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 19px; font-weight: bold; color: #003366; text-decoration: none; } a.navigation { color: #003366; } a.navigation:visited { color: #003366; } a.navigation:hover { color: #9d0001; text-decoration: none} .nav-font { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000; text-decoration: none; } a.nav-font { text-decoration: none; color: #000 } a.nav-font:hover { text-decoration: none; color: #666666 } .nav-font2 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000; text-decoration: none; } a.nav-font2 { text-decoration: none; color: #ffffff } a.nav-font2:hover { text-decoration: none; color: #000000 } a { color:#036; } a:active { color:#369; } img { border:0; } table { font:verdana 10px; } form { margin:0; padding:0; } #GCMulti { background-image:url(../Images/game_cat_b_multiplayer.gif); } #GCxmas { background-image:url(../Images/game_cat_b_xmas.gif); } #GCLearn { background-image:url(../Images/game_cat_b_learn.gif); } #GCAction { background-image:url(../Images/game_cat_b_action.gif); } #GCPuzzle { background-image:url(../Images/game_cat_b_puzzle.gif); } #GCShoot { background-image:url(../Images/game_cat_b_shoot.gif); } #GCSport { background-image:url(../Images/game_cat_b_sport.gif); } #header { margin-bottom:0px; margin:0; display:block; height:70px; } #wrapper { margin:0 auto; border:2px solid #39f; border-top:none; text-align:left; height:auto; background:#39f; } #wrapper2 { background:#369; border-top:none; border-left:6px #369 solid; border-right:6px #369 solid; border-bottom:6px #369 solid; clear:both; } #navigation { margin-bottom:5px; } #banner_top { float:right; height:60px; width:468px; border:2px solid #fff; } #footer { text-align:right; padding:0 5px; } #footer img { vertical-align:-55%; } #footer a { color:#fff; } #advert { display:none; } .sidebar { width:156px; _width:140px; background:#fff; padding:5px; margin-bottom:5px; } .sidebar ol { padding:0; margin:5px 0 5px 0; color:#369; font-weight:bold; list-style-position:inside; } .sidebar li { padding:0; margin:0; } .sidebar a { margin-left:6px; font-weight:normal; } .sidebar ul.o { margin:3px 0; padding:0; list-style-type:none; } .sidebar .o li { padding-left:12px; background:url(../../images-vip.napmia.miniclip.com/Images/bullet_orange.gif) left no-repeat; } .sidebar .o a { font-weight:bold; color:#f90; margin-left:0; } .orange { background:#d10202; } .blue { background:#f90; } #footer { color:#fff; } .left, .right, .middle, .latest { background:#fff; border-top:5px solid #369; padding:0 5px 5px 5px; } .middle { border:5px solid #369; border-bottom:none; } .latest { border-left:5px solid #369; padding:0; } .latest .header { margin-bottom:5px; } .latest a img { margin:0 0 3px 0; } .latest p { width:70px; float:left; margin:0 3px 0 2px; } .latest #getToolbar { margin:7px 5px 0 5px; border:2px #39f solid; padding:2px; } .latest #getToolbar a { display:block; background: url( ../../www.miniclip.com/toolbar/images/current-toolbar.jpg); height:23px; } .latestGame { display:block; padding:0 0 0 10px; background:url(../../images-vip.napmia.miniclip.com/Images/bullet_orange.gif) 0 2px no-repeat; } #mainCenter { width:156px; _width:465px; background:#fff; padding:5px; margin-bottom:5px; } #mainCenter ul { margin:3px 0; padding:0; list-style-type:none; clear:both; } #mainCenter li { padding-left:12px; background:url(../../images-vip.napmia.miniclip.com/Images/bullet_blue.gif) left no-repeat; } #mainCenter .o { font-weight:bold; background:url(../../images-vip.napmia.miniclip.com/Images/bullet_orange.gif) left no-repeat; } #mainCenter .o a { color:#f90; } #mainCenter ul.o { background-image:none; } #mainCenter .thumb { margin-right:5px; } .bBorder { padding:3px; border:2px solid #fff; background:#369; width:156px; margin-top:5px; } .float { float:left; width:68px; margin:0 5px 8px 4px; _margin:0 2px 8px 3px; } .cashPrizes { background:#fff; padding:1px 0; font-size:9px; } .cashPrizes .header { margin:3px 5px 0 5px; } .cashPrizes .pic { background:none; padding:0; } .cashPrizes a { padding-left:10px; background:url(../../images-vip.napmia.miniclip.com/Images/bullet_blue.gif) left 3px no-repeat; } .borderBottom { border-bottom:5px solid #369; } p.solid {border-style: 5px solid} .GC { display:block; width:211px; min-height:13px; _height:13px; background:url(null.html) top left no-repeat #27c; font-size:10px; color:#fff; font-weight:bold; padding:9px 4px; text-transform:uppercase; } .GC:hover { text-decoration:none; color:#fff; } .GC:visited { color:#fff; } #iToolbar { display:none; } #toolbarAd { display:block; height:23px; background:url(../../www.miniclip.com/toolbar/images/toolbar-back.jpg) #ECECEC; } #toolbarAd a { display:none; height:23px; background:url(../../www.miniclip.com/toolbar/images/current-toolbar.jpg) left top no-repeat; text-indent:-9999px; text-decoration:none; } #skyscraper1 #skyscraper2 { border:2px solid #fff; padding:0; margin:0; } #skyscraper1 { border:2px solid #39f; border-left:none; } #ad_bottomleft { margin:0; padding:2px; background:#fff; } #homeSide { float:left; margin-right:5px; } #bigAd { float:right; width:240px; height:100%; background:#fff; color:#369; text-align:left; } #bigAd.cat { height:277px; } #bigAd728 { display:block; width:728px; height:90px; margin:5px 0; border:1px solid #fff; } #bigAd #iborder { margin:5px; } #homeNav { float:left; width:623px; height:61px; background:#fff; border-bottom:5px solid #369; } #homeSearch { float:right; } #topGameAnim { _margin-left:-3px; } #moreRetro { text-decoration:none; color:#000; display:block; background: url( ../Images/retromedicon2.gif) no-repeat; height:55px; padding:5px 5px 0 0; } .moreImage { float:left; } #moreRetro p { margin:0; padding:0; color:#000; text-decoration:none; } #moreRetro strong { color:#036; } a#moreRetro:hover { text-decoration:none; } #gcIntro { float:left; width:419px; background:#fff; } #gcIntro img { float:left; margin-right:5px; } #gcIntro h2 { text-indent:-9999em; text-decoration:none; display:block; height:51px; background:url( ../Images/gc_large_sport.gif); padding:0; margin:0; } #gcIntro #holder { padding:5px; } #gcHighlightGames { padding:5px; } #holder #getToolbar { margin:5px 0 0 0; border:2px #39f solid; padding:2px; } #holder #getToolbar a { display:block; background: url( ../../www.miniclip.com/toolbar/images/current-toolbar.jpg); height:23px; } .TextBoxHomepage { FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; width: 130px; } .TextBoxJoinUs { FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; width: 140px; } .DropDown { FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; width: 156px; margin-bottom: 0px; } table { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; } a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #003366; text-decoration: none; } a:active { color: #003366; } a:visited { color: #003366; } a:hover { color: #9d0001; text-decoration: none} .highlight { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #FF9900; } .codeGrey { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; } .codeRed { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #CC0000; font-weight: bold; } .contentWhite { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; } Code (markup): please help, it's driving me nuts
Using valid HTML and correct CSS would be a good start. If you've got invalid HTML and/or CSS, there's no way to guarantee how the site's going to look in any browser as they'll all interpret it differently.
falco85, You need to learn to create CSS and HTML that have meaning. This is a pain to debug. What editor are you using? It looks as though as you have application created CSS classes and ids. One thing all developers will tell you is to never develop CSS layouts in IE. Not just because of the box model issues but because it has a number of parsing issues that allow it to parse invalid or erroneous markup. You should use a browser such as FireFox 1.5, Mozilla, or Netscape 7 and possibly Opera. Since all of theses use the modern gecko engine (FF 1.5 as best support for CSS 2) they will not allow for sloppy or invalid code in the CSS file as they will correctly ignore errors or invalid lines. Then once you get your site working in one of these browsers you can find out what needs to be "fixed" (read Hacked) to make it view properly in IE. On a coding note, you should never use id's or classes that have limited meaning such as colors or locations on the layout. You are going to have to either have a .blue with a color of #FFFFFF if you want to change the color. There are certain exceptions such as if you have just a basic float that you use to control images in body text to float them right or left by calling the class .right or .left because you would never change the context of use. BTW what the heck are the _with attributes in the global.css for? These are invalid hacks. What are they supposed to do? IE will parse these by This is why your site is not rendering in FF as it sees the small width and doesn't parse the wider width you need to fix this. Don't use short form attributes for background or font when you are not using the required value. You should be using long form for these like font-face or background-color when that is all that is being affected. I am sure there is more but I am not going to debug a whole site that looks as though it was created in Dreamweaver or Frontpage with app created CSS. That is too much work and the reason I no longer use these apps. All the best, Jay