wolfinu Posted October 20, 2011 Share Posted October 20, 2011 Hey everyone, im building a simple php portfolio website (header , index, footer) I have 3 pages , about , contact, portfolio If I add an image to the index page then click on my about page (no images) the whole site shifts to the right about 20px. If I remove the image and click the link everything is okay. Anyone know what im doing wrong? Code below: header <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="header"> <ul> <li><h2><a href="portfolio.php">PORTFOLIO</a></h2></li> <li><h2><a href="about.php">ABOUT</a></h2></li> <li><h2><a href="contact.php">WHAT WE CAN DO TOGETHER</a></h2></li> </ul> </div> index <?php include 'header.php'; ?> <div id="idea_container"> <a href="portfolio.php"><img src="images/logo.jpg" width="960" height="500" /></a> </div> <?php include 'footer.php'; ?> footer <div id="footer" class="footer"> <ul> <li><a href="#">TWITTER</a></li> <li><a href="contact.php">CONTACT</a></li> <li><a href="index.php">HOME</a></li> </ul> </div> </div> <!--ending div for wrapper --> </body> </html> Link to comment https://forums.phpfreaks.com/topic/249444-adding-images-causes-my-whole-php-site-to-shift-20px/ Share on other sites More sharing options...
floridaflatlander Posted October 20, 2011 Share Posted October 20, 2011 What kind of margins and padding do you have in your css for your images? Link to comment https://forums.phpfreaks.com/topic/249444-adding-images-causes-my-whole-php-site-to-shift-20px/#findComment-1280767 Share on other sites More sharing options...
wolfinu Posted October 20, 2011 Author Share Posted October 20, 2011 hey, my css is set up like this, I'm sure its wrong. body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding:0px; } img { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding:0px; } Link to comment https://forums.phpfreaks.com/topic/249444-adding-images-causes-my-whole-php-site-to-shift-20px/#findComment-1280769 Share on other sites More sharing options...
floridaflatlander Posted October 20, 2011 Share Posted October 20, 2011 Have you ever tried firefoxes fire bug? It's a "BIG" time saver and a blessing and it will tell you what css is effecting a tag and/or what css a tag is inheriting things from. But try #idea_container img { margin:0; padding:0; } But once again, I can't cheer loud enough for firebug. Link to comment https://forums.phpfreaks.com/topic/249444-adding-images-causes-my-whole-php-site-to-shift-20px/#findComment-1280776 Share on other sites More sharing options...
floridaflatlander Posted October 20, 2011 Share Posted October 20, 2011 Also check out the css on your "a" tag and you have a logo image that's width="960" height="500" ? Link to comment https://forums.phpfreaks.com/topic/249444-adding-images-causes-my-whole-php-site-to-shift-20px/#findComment-1280780 Share on other sites More sharing options...
wolfinu Posted October 21, 2011 Author Share Posted October 21, 2011 Many thanks for helping me out with this. I used firebug, which is great btw. Im getting closer.. I did some re-coding and now as long as the pages have an image it wont shift. Before, I didn't want a logo at the top of the pages, but adding one seemed to help. so I added a 300x200 px logo to my header This is so weird, this is the first time I've had this problem. I must be doing something weird in my code. I checked the a tags made them all margin 0 padding 0. That 960 x 500 wasn't so much a logo as it was an intro page showing off some of the work in the portfolio. Link to comment https://forums.phpfreaks.com/topic/249444-adding-images-causes-my-whole-php-site-to-shift-20px/#findComment-1280989 Share on other sites More sharing options...
wolfinu Posted October 22, 2011 Author Share Posted October 22, 2011 Okay, also another thing I forgot to do. (in case anyone has the same problem as me) I forgot to assign a min-height to my content div. I didn't know leaving that out would shift the whole site. Link to comment https://forums.phpfreaks.com/topic/249444-adding-images-causes-my-whole-php-site-to-shift-20px/#findComment-1281426 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.