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. Link to comment https://forums.phpfreaks.com/topic/127274-spacing/ 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 Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658264 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? Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658311 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! Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658346 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. Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658368 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? Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658449 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 Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658457 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? Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658471 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] Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658477 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. Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658495 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. Link to comment https://forums.phpfreaks.com/topic/127274-spacing/#findComment-658637 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.