Hey there,
I'm working on this website (bits.bris.ac.uk/ubsrc) and if you look to the top of the left-hand side bar (just above where it says, "The Latest" you'll see that the background image is going underneath the border of the nav bar above it. Suffice to say that this doesn't happen in Firefox or Opera. It's not a massive bug, but it is a bit irritating since I know that virtually everyone who looks at this site will be using IE.
Any suggestions?
Thanks a lot in advance,
Matcheck in firefox. you have more problems.... I can't see your problem in ie6.If you're referring to the fact that the content and nav bar starts half way up the top picture in Firefox, I know. If you just refresh the page it renders it properly. The CSS and HTML is all valid, so I'm wondering whether it's a bug with Firefox (esp since it works after a page refresh).
If you refresh the page in Firefox then you'll see what it should look like. Basically the bottom of the nav background picture (fade from dary grey to light grey) should go all the way to the black line underneath the nav bar. In IE there are a couple of lines of grey pixels ABOVE that bottom border, which are actually the background image. See the attached pictures - you made need to zoom in...
Cheers!
Mat
PS Firefox is the one on the left, IE on the rightI believe it is due to the delay in loading the iframe document.
The effect does not occur when viewing the page offline.
Why not have a div filled server side and do away with the iframe?looks to me like you've run into box model problems.
The way to resolve this is:
on #latest nest a second div inside, e.g.
<div id="latest"><div>
content
</div></div>
Then put your width and height on the first div, and your padding on the second
#latest div {
padding: 5px;
}
Does that make sense and/or help at all?
edit: that's on your ie issue.Bonjourno,
Thanks for the suggestions. Dave, thanks for that suggestion, I'll try it out tomorrow (I need to hit the hay right now!).
Fang, a couple of other people have mentioned using SSI's to fill that div. I've not used one before, so I'm not to sure of how I'd do that?
The only reason the entire page isn't PHP (like the rest of the site) is because my host requires that the front page is called index.htm. Obviously I could have a redirection, but I'm not a fan of them. If there was a way of introducing the dynamic content directly into a straightforward XHTML file that'd be great. The content is being pulled from a MySQL db, btw.
Thanks again, I really appreciate the advice,
MatIf you can use .htaccess (<!-- m --><a class="postlink" href="http://www.javascriptkit.com/howto/htaccess.shtml">http://www.javascriptkit.com/howto/htaccess.shtml</a><!-- m -->) a server side redirect or change of default page is possible.
Alternatively just have the content of the iframe page in a div. Editing the news section would not be more work than when it's in a seperate page.Morning!
Right then... Dave, chucking in that extra <div> doesn't work. Fang, I don't think it is the iframe, since if I remark the iframe out, the problem is still there. Looking more closely, the problem is actually with that nav bar (#topHead in squash.css) - none of the separators between the menu items touch that border, so I'm having a hunt through the CSS now.
W.r.t. the SSI stuff. I discovered that I can actually call that page index.php, and it'll still work fine as the directory index. That iframe is quite useful though, because it allows navigation within itself. The alternative, just thinking about it quickly, is to load all the "extended" text for a news article into dynamically created <div>'s, hide them all, and then change the contents of the new <div> appropriately (via JavaScript) to the required content of a hidden <div>. That's what the BBC does with its photo pages, incidentally...
Cheers,
Mat
Edit: Fixed the gap - IE was incorrectly (I think) including some padding from #topHead h1 in the height of the div. Got rid of the padding (didn't really need it anyway) and I lost the gap. The only decision now is about removing the iframe...
I'm working on this website (bits.bris.ac.uk/ubsrc) and if you look to the top of the left-hand side bar (just above where it says, "The Latest" you'll see that the background image is going underneath the border of the nav bar above it. Suffice to say that this doesn't happen in Firefox or Opera. It's not a massive bug, but it is a bit irritating since I know that virtually everyone who looks at this site will be using IE.
Any suggestions?
Thanks a lot in advance,
Matcheck in firefox. you have more problems.... I can't see your problem in ie6.If you're referring to the fact that the content and nav bar starts half way up the top picture in Firefox, I know. If you just refresh the page it renders it properly. The CSS and HTML is all valid, so I'm wondering whether it's a bug with Firefox (esp since it works after a page refresh).
If you refresh the page in Firefox then you'll see what it should look like. Basically the bottom of the nav background picture (fade from dary grey to light grey) should go all the way to the black line underneath the nav bar. In IE there are a couple of lines of grey pixels ABOVE that bottom border, which are actually the background image. See the attached pictures - you made need to zoom in...
Cheers!
Mat
PS Firefox is the one on the left, IE on the rightI believe it is due to the delay in loading the iframe document.
The effect does not occur when viewing the page offline.
Why not have a div filled server side and do away with the iframe?looks to me like you've run into box model problems.
The way to resolve this is:
on #latest nest a second div inside, e.g.
<div id="latest"><div>
content
</div></div>
Then put your width and height on the first div, and your padding on the second
#latest div {
padding: 5px;
}
Does that make sense and/or help at all?
edit: that's on your ie issue.Bonjourno,
Thanks for the suggestions. Dave, thanks for that suggestion, I'll try it out tomorrow (I need to hit the hay right now!).
Fang, a couple of other people have mentioned using SSI's to fill that div. I've not used one before, so I'm not to sure of how I'd do that?
The only reason the entire page isn't PHP (like the rest of the site) is because my host requires that the front page is called index.htm. Obviously I could have a redirection, but I'm not a fan of them. If there was a way of introducing the dynamic content directly into a straightforward XHTML file that'd be great. The content is being pulled from a MySQL db, btw.
Thanks again, I really appreciate the advice,
MatIf you can use .htaccess (<!-- m --><a class="postlink" href="http://www.javascriptkit.com/howto/htaccess.shtml">http://www.javascriptkit.com/howto/htaccess.shtml</a><!-- m -->) a server side redirect or change of default page is possible.
Alternatively just have the content of the iframe page in a div. Editing the news section would not be more work than when it's in a seperate page.Morning!
Right then... Dave, chucking in that extra <div> doesn't work. Fang, I don't think it is the iframe, since if I remark the iframe out, the problem is still there. Looking more closely, the problem is actually with that nav bar (#topHead in squash.css) - none of the separators between the menu items touch that border, so I'm having a hunt through the CSS now.
W.r.t. the SSI stuff. I discovered that I can actually call that page index.php, and it'll still work fine as the directory index. That iframe is quite useful though, because it allows navigation within itself. The alternative, just thinking about it quickly, is to load all the "extended" text for a news article into dynamically created <div>'s, hide them all, and then change the contents of the new <div> appropriately (via JavaScript) to the required content of a hidden <div>. That's what the BBC does with its photo pages, incidentally...
Cheers,
Mat
Edit: Fixed the gap - IE was incorrectly (I think) including some padding from #topHead h1 in the height of the div. Got rid of the padding (didn't really need it anyway) and I lost the gap. The only decision now is about removing the iframe...