ngreenwood6 Posted October 6, 2008 Share Posted October 6, 2008 I have the following page: index.html: <html> <head> <link href="includes/main.css" rel="stylesheet" type="text/css" /> <title><?php echo $sitename; ?></title> </head> <body> <div id="container"> <div id="header_image"> <img src="images/header_image.gif"> </div> <div id="navigation"> <a href="#">Home</a> | <a href="#">Banking</a> </div> <div id="footer"> Copyright © </div> </div> </body> </html> I then have this css file: body { margin:0px; background-color:#000000; } a { text-decoration:none; color:#0000FF } #container { position:relative; margin: 0 auto; width: 800px; height: 600px; border:1px solid #000000; margin-left:200px; margin-right:200px; background-color:#FFFFFF; } #footer { border-top:1px solid #000000; height:50px; postion:absolute; bottom:0; width:800px; margin-top:20px; } #navigation { background-color:#000000; border-bottom:1px solid #000000; } However, it is not working how I want it to. Below the image there is a space before the navigation background which leaves it white. Also, there is about 1cm of white space from the right side. If anyone has any suggestions on how to fix this that would be great. Thanks in advance. Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 6, 2008 Author Share Posted October 6, 2008 bump this is really frustrating me lol Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 6, 2008 Author Share Posted October 6, 2008 ok so now this is my css file: body { margin:0px; background-color:#000000; } a { text-decoration:none; color:#0000FF } #container { position:relative; margin: 0 auto; width: 800px; height: 600px; border:1px solid #000000; margin-left:200px; margin-right:200px; background-color:#FFFFFF; } #footer { border-bottom:1px solid #000000; border-top:1px solid #000000; position:absolute; bottom:0; width:800px; } #navigation { background-color:#F62985; border-bottom:1px solid #000000; border-top:1px solid #000000; width:800px; margin-top:0px; height:20px; } it displays exactly how I want it to in firefox but in internet explorer there is a space between the header_image. Also the footer is at the bottom but it is pushed over about 150px it looks like. Any suggestions at all? Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 6, 2008 Author Share Posted October 6, 2008 I have figured out what was causing the footer. now I still cannot figure out why there is whitespace between the image and the navigation bar. PLEASE SOMEONE HELP! Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 6, 2008 Author Share Posted October 6, 2008 the edit button isnt showing up so I am going to make a new post. Just so it makes sense. the image is at the very top of the container. there is about 1 cm of whitespace between it and the navigation bar, but the weird part is that it displays correctly in firefox. If I add this to the navigation box: margin-top:-3px; and then it displays correctly in internet explorer, but then it doesnt display correctly in firefox. this is giving me a headache. please if anyone has any suggestions to offer I am open to anything at this point. Quote Link to comment Share on other sites More sharing options...
DarkWater Posted October 6, 2008 Share Posted October 6, 2008 Can we see a link to the page, or a small scale re-creation of the page in order to visualize it? Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 6, 2008 Author Share Posted October 6, 2008 Yeah it is on my personal website but try to go here: http://71.200.87.112 forgot to say login with user = nick pass = nick Quote Link to comment Share on other sites More sharing options...
DarkWater Posted October 6, 2008 Share Posted October 6, 2008 The image and nav bar are correctly positioned for me. Mozilla Firefox 3.0.3 Want a screenshot? Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 6, 2008 Author Share Posted October 6, 2008 I know it is working in firefox but why isnt it displaying correctly in internet explorer. I have attached a screenshot. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
DarkWater Posted October 6, 2008 Share Posted October 6, 2008 Make an IE-only stylesheet. @_@ Sometimes you have to. Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 7, 2008 Author Share Posted October 7, 2008 Ok i will do that but how would i make it look correctly in IE. 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.