ukweb Posted October 19, 2007 Share Posted October 19, 2007 Hi I've done a site for a client (www.conwyrentals.com) and as a mac user, it is rarely that I test sites in internet explorer on PC (I know I should...) My client has stated that the site does not render correctly in IE7 on PC. I cannot see why at all, anyone know why, see my screenshots. The gaps are between images. img attributes inc "border: none; padding: 0; margin: 0;" so I cannot see why. is this a IE bug, how do I fix it? See screenshots. The site renders fine in Firefox and safari. Thanks Stephen Wright [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 I have had this problem before and have been able to correct it. Be sure to have your cellpadding set to "0" as well as cellspacing. IE7 is not forgiving on this. Firefox a lot of times will assume those values are 0 unless stated. Quote Link to comment Share on other sites More sharing options...
ukweb Posted October 19, 2007 Author Share Posted October 19, 2007 I have used Div's to make up the layout, and not used tables, so that won't work unfortunately. It's really frustrating because I just plain can't see what's up!! Thanks for the suggestion though. Quote Link to comment Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 I am looking at your source right now. Quote Link to comment Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 Check line 354. I am getting en error there. Quote Link to comment Share on other sites More sharing options...
ukweb Posted October 19, 2007 Author Share Posted October 19, 2007 the table elements on the site render correctly, its the following section with the gaps; <div id="wrapper"><img src="images/bg_r2_c3.png" width="800" height="100" class="head"><br /> <img src="images/bg_r3_c3.png" width="800" height="125" class="head" > <div id="body_wrap"> <div class="default"><img src="images/bg_r4_c4.jpg" width="220" height="25" ><img src="images/bg_r4_c5.jpg" width="40" height="25" ><a href="index.php?page_id=1"><img src="images/home.jpg" width="115" height="25" /></a><a href="index.php?page_id=3"><img src="images/about.jpg" width="125" height="25" ></a><a href="index.php?page_id=4"><img src="images/prop.jpg" width="135" height="25" /></a><a href="index.php?page_id=5"><img src="images/Contact.jpg" width="145" height="25" ></a></div></div> There are some javascript errors by PHP removing forms for when they're not needed, but I can't see any html coding errors which would cause the images not to be displayed properly Quote Link to comment Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 See if having padding set to 0 in the DIV class tag fixes anything. Quote Link to comment Share on other sites More sharing options...
ukweb Posted October 19, 2007 Author Share Posted October 19, 2007 div { padding: 0; margin: 0; border: none; } put it in, and still no luck Quote Link to comment Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 I took the code you posted earlier on and reproduced that portion of the page. The interesting thing is that the gap just below "Conway Rentals" doesn't appear! <html> <head> </head> <body><div id="wrapper"><img src="http://www.conwyrentals.com/images/bg_r2_c3.png" width="800" height="100" class="head"><br /> <img src="http://www.conwyrentals.com/images/bg_r3_c3.png" width="800" height="125" class="head" > <div id="body_wrap"> <div class="padding: 0px;"><img src="http://www.conwyrentals.com/images/bg_r4_c4.jpg" width="220" height="25" > <img src="images/bg_r4_c5.jpg" width="40" height="25" > <a href="index.php?page_id=1"><img src="http://www.conwyrentals.com/images/home.jpg" width="115" height="25" /> </a><a href="index.php?page_id=3"><img src="http://www.conwyrentals.com/images/about.jpg" width="125" height="25" > </a><a href="index.php?page_id=4"><img src="http://www.conwyrentals.com/images/prop.jpg" width="135" height="25" /> </a><a href="index.php?page_id=5"><img src="http://www.conwyrentals.com/images/Contact.jpg" width="145" height="25" ></a></div></div> </body></html> Quote Link to comment Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 Hey, can you post your head class? Quote Link to comment Share on other sites More sharing options...
ukweb Posted October 19, 2007 Author Share Posted October 19, 2007 Here's my stylesheet in its entirety: @charset "UTF-8"; /* CSS Document */ body,td,th { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; vertical-align: top; line-height: 18px; margin: 0; padding: 0; } div { padding: 0; margin: 0; border: none; } body { background-color: #FFFFFF; background-image: url(../images/bg.jpg); background-repeat: repeat-x; } a { border: none; } a:link { color: #333333; text-decoration: none; } a:visited { text-decoration: none; color: #333333; } a:hover { text-decoration: underline; color: #666666; } a:active { text-decoration: none; color: #202D5A; } img { padding: 0px; margin: 0px; border: none; } #wrapper { padding: 0px; width: 800px; margin-right: auto; margin-left: auto; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #body_wrap { background-image: url(../images/wrap_bg.png); background-repeat: repeat-y; margin: 0px; width: 780px; padding-right: 10px; padding-left: 10px; } #main { margin: 0px; width: 540px; padding-right: 10px; padding-left: 10px; background: none; margin-left: 220px; } #searchbar { margin: 0px; float: left; width: 200px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #wrapper #body_wrap td.search_bar { margin: 0px; width: 220px; padding: 0px; vertical-align: top; } #wrapper #body_wrap td.search_bar div.container { margin: 0px; width: 200px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-image: url(../images/bg_r7_c4.jpg); background-repeat: repeat-y; border-bottom: 1px #999999 solid; } #wrapper #body_wrap td.main_content { margin: 0px; width: 540px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; line-height: 18px; padding-top: 10px; vertical-align: top; min-height: 200px; font-size: 11px; } #wrapper div.default { margin: 0px; padding: 0px; width: 100%; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } .title_bar { background-image: url(../images/layout_r5_c4.jpg); margin: 0px; height: 30px; width: 770px; padding-top: 10px; padding-right: 10px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; text-align: right; font-size: 18px; } .page_img { background-color: #F2F2F2; padding: 9px; clear: right; float: right; width: 150px; margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; border: 1px solid #999999; } .gallery_img { background-color: #F2F2F2; padding: 9px; margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; border: 1px solid #999999; } .gallery_img_thumbs { background-color: #F2F2F2; padding: 9px; width: 100px; margin-top: 0px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; border: 1px solid #999999; } .featured { clear: both; border: none; width: 540px; padding-right: 0px; margin-bottom: 10px; } #wrapper #body_wrap .main_content .featured h1 { text-align: right; font-size: 18px; font-weight: normal; padding: 0; margin: 0 10px 0 0; } h3 { padding: 0; margin: 0; margin-bottom: 3px; font-size: 11px; } .feat_item { border: 1px #999999 solid; margin-right: 9px; background-color: #F2F2F2; margin-top: 10px; } td.feat_item_inside_l { width: 105px; padding: 5px 10px 9px 9px; vertical-align: top; } td.feat_item_inside_r { width: 125px; padding: 0 9px 9px 0; vertical-align: top; } tr, td { vertical-align: top; } td.feat_top { margin: 0px; padding: 2px 2px 0 2px; width: 254px; height: 34px; } #wrapper img.head { margin: 0px; padding: 0px; border: none; } Thanks! Quote Link to comment Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 It is in your style sheet. Im working on a fix for ya right now. Quote Link to comment Share on other sites More sharing options...
ukweb Posted October 19, 2007 Author Share Posted October 19, 2007 Much appreciated! Thankyou v much Quote Link to comment Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 The first gap was resolved by removing vertical-align: top; in the first section of your CSS. Try that on your end. body,td,th { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; vertical-align: top; <<<< This line caused the first gap. removing it resolved it. line-height: 18px; margin: 0px; padding: 0px; } Quote Link to comment Share on other sites More sharing options...
ukweb Posted October 19, 2007 Author Share Posted October 19, 2007 That's fixed it! Thanks v much! You don't realise how much stress you've relieved me from!! Many Thanks! Quote Link to comment Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 Did that fix them all? Quote Link to comment Share on other sites More sharing options...
ukweb Posted October 19, 2007 Author Share Posted October 19, 2007 Yep! Sure did!! Thanks again! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.