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> Quote Link to comment 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? Quote Link to comment 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; } Quote Link to comment 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. Quote Link to comment 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" ? Quote Link to comment 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. Quote Link to comment 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. 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.