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] Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/ 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. Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373188 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. Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373189 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. Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373191 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. Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373194 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 Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373198 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. Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373209 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 Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373216 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> Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373221 Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 Hey, can you post your head class? Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373225 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! Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373233 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. Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373248 Share on other sites More sharing options...
ukweb Posted October 19, 2007 Author Share Posted October 19, 2007 Much appreciated! Thankyou v much Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373251 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; } Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373256 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! Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373265 Share on other sites More sharing options...
brettpower Posted October 19, 2007 Share Posted October 19, 2007 Did that fix them all? Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373267 Share on other sites More sharing options...
ukweb Posted October 19, 2007 Author Share Posted October 19, 2007 Yep! Sure did!! Thanks again! Link to comment https://forums.phpfreaks.com/topic/73947-solved-annoying-gaps-cant-see-why/#findComment-373269 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.