Hey there,
I'm trying to use a div as a big container/wrapper for the page. This container is centralised and specifies the width. I want to set the left and right padding to 15px so that I can have a background image providing a shadow. However, when I do this the image stops prematurely in Firefox (it renders ok in IE). If I give a nice green border to the div if stops after the first two 'sub' divs in the html, despite the fact it contains three further divs.
Check out <!-- w --><a class="postlink" href="http://www.bits.bris.ac.uk/ubsrc/site2/home.html">www.bits.bris.ac.uk/ubsrc/site2/home.html</a><!-- w --> to see what I mean. I'm close to pulling my hair out, this seems a completely illogical thing, is it me or Firefox?! I suspect it's me, but the HTML is definitely ok, and I can't see anything wrong with the CSS.
Any suggestions would be very much appreciated.
Cheers,
Matps, Opera 7.11 also renders it apparently properly...Possibly, clear after float?
</div>
<div style="clear:both;"></div>
</div>
</body></html>nah, i think your problem lies in:
div#bottomBar {
font-family: Verdana, sans-serif;
font-size: 70%;
color: #666666;
clear: left;
float: left;
position: relative;
width: 100%;
margin-top: 0px;
background: #990000;
padding: 2px 5px 2px 5px;
}
remove float: left;
if i understand what u are wanting, u want to remove this and it should fix it. and also, instead of clear: left just put clear bothI'm not entirely sure where Voorhout is, but I'm tempted to find it and come and hug you. But why the hell did that work? Why do i need that there? What's the rationale behind how Firefox's rendering?
Sorry for the extra questions! Big BIG thanks for the help.Hugs all round
After using float you nearly always need a clear (all browsers!)
Containing Floats (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/containing-floats/">http://www.complexspiral.com/publicatio ... ng-floats/</a><!-- m -->)Pawky, you're great too. That also works (without the additional div).
Mental note: "Clear after divs"Are those text links supposed to be underniled on hover? And are they supposed to have a dotted underline as opposed to a solid underline?
I ask only because I'm getting a glitch I've seen a few times in Mozilla now. On hovering the text links, the scrolling window on the left flickers up a duplicate of its self. So I just figured the dotted link underline might be a display glitch rather than intentional. Nice touch if it was intentional though.
God, I'm so glad you've said that. Yeah, I notice that flicker in Moz as well. The dashed underline is intentional, yes. I can't decide whether I prefer it to solid (check out <!-- w --><a class="postlink" href="http://www.futureboogie.com">www.futureboogie.com</a><!-- w --> - I quite like their links).
The flicker's a weird one - it disappeared when I made some changes and now it's come back. Doesn't happen in IE6...i am guessing that the flicker is due to the iframe that you included. Instead of using the iframe it would be better to use a div w/ overflow: auto; This will provide the scroll bar that you have. Just define the height and width and all that and you are set. It should work much better and remove that annoying flicker
No Pawky. That is a div with overflow:auto. Not a frame or iframe.
Yeah it'll only happen in Firefox and netscape Navigator. It seems to screw up divs that have overflow:auto set. I've been trying to find a way to make Mozilla play nice with them for while now but have thus far been unsuccessful.The iframe is a php file getting dynamic content. Believe it or not given the dates on there...Ah yeah. It is an iframe. I didn't see it at first. My mistake.
You could try using a div with overflow auto, but I doubt it would remedy the flicker for the reasons given above. I was rather hoping it'd get fixed by version 1.0 (even if this isn't the official full version of Firefox yet).Originally posted by Mr Herer
No Pawky. That is a div with overflow:auto. Not a frame or iframe.
Yeah it'll only happen in Firefox and netscape Navigator. It seems to screw up divs that have overflow:auto set. I've been trying to find a way to make Mozilla play nice with them for while now but have thus far been unsuccessful.
There is not a single div defined in the css w/ overflow: auto, let alone overflow: anything. The part that is flickering IS the iframe, look at his code, unless we are looking at different pages.
matstuff, try switching to a div w/ overflow: auto. It would be very easy for you to do. and if you are using php then use a ssi to add it there so u only have to change it once or whatever (i dont know php yet, so i dont know anything about ssi just going off what i have heard
)Originally posted by Mr Herer
Ah yeah. It is an iframe. I didn't see it at first. My mistake.
You could try using a div with overflow auto, but I doubt it would remedy the flicker for the reasons given above. I was rather hoping it'd get fixed by version 1.0 (even if this isn't the official full version of Firefox yet).
ok, glad u c it now ;P even if it does continue flickering though, wouldnt the div w/ overflow: auto be better? it would help with search engines and dl spd and all.Yeah the overflowing div method would most certainly still be preferable to an iframe. The flickering glitch would likely still remain though.
Still no point in sticking with the iframe though, especially if php is available.
I'm trying to use a div as a big container/wrapper for the page. This container is centralised and specifies the width. I want to set the left and right padding to 15px so that I can have a background image providing a shadow. However, when I do this the image stops prematurely in Firefox (it renders ok in IE). If I give a nice green border to the div if stops after the first two 'sub' divs in the html, despite the fact it contains three further divs.
Check out <!-- w --><a class="postlink" href="http://www.bits.bris.ac.uk/ubsrc/site2/home.html">www.bits.bris.ac.uk/ubsrc/site2/home.html</a><!-- w --> to see what I mean. I'm close to pulling my hair out, this seems a completely illogical thing, is it me or Firefox?! I suspect it's me, but the HTML is definitely ok, and I can't see anything wrong with the CSS.
Any suggestions would be very much appreciated.
Cheers,
Matps, Opera 7.11 also renders it apparently properly...Possibly, clear after float?
</div>
<div style="clear:both;"></div>
</div>
</body></html>nah, i think your problem lies in:
div#bottomBar {
font-family: Verdana, sans-serif;
font-size: 70%;
color: #666666;
clear: left;
float: left;
position: relative;
width: 100%;
margin-top: 0px;
background: #990000;
padding: 2px 5px 2px 5px;
}
remove float: left;
if i understand what u are wanting, u want to remove this and it should fix it. and also, instead of clear: left just put clear bothI'm not entirely sure where Voorhout is, but I'm tempted to find it and come and hug you. But why the hell did that work? Why do i need that there? What's the rationale behind how Firefox's rendering?
Sorry for the extra questions! Big BIG thanks for the help.Hugs all round
After using float you nearly always need a clear (all browsers!)
Containing Floats (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/containing-floats/">http://www.complexspiral.com/publicatio ... ng-floats/</a><!-- m -->)Pawky, you're great too. That also works (without the additional div).
Mental note: "Clear after divs"Are those text links supposed to be underniled on hover? And are they supposed to have a dotted underline as opposed to a solid underline?
I ask only because I'm getting a glitch I've seen a few times in Mozilla now. On hovering the text links, the scrolling window on the left flickers up a duplicate of its self. So I just figured the dotted link underline might be a display glitch rather than intentional. Nice touch if it was intentional though.
God, I'm so glad you've said that. Yeah, I notice that flicker in Moz as well. The dashed underline is intentional, yes. I can't decide whether I prefer it to solid (check out <!-- w --><a class="postlink" href="http://www.futureboogie.com">www.futureboogie.com</a><!-- w --> - I quite like their links).The flicker's a weird one - it disappeared when I made some changes and now it's come back. Doesn't happen in IE6...i am guessing that the flicker is due to the iframe that you included. Instead of using the iframe it would be better to use a div w/ overflow: auto; This will provide the scroll bar that you have. Just define the height and width and all that and you are set. It should work much better and remove that annoying flicker
No Pawky. That is a div with overflow:auto. Not a frame or iframe.Yeah it'll only happen in Firefox and netscape Navigator. It seems to screw up divs that have overflow:auto set. I've been trying to find a way to make Mozilla play nice with them for while now but have thus far been unsuccessful.The iframe is a php file getting dynamic content. Believe it or not given the dates on there...Ah yeah. It is an iframe. I didn't see it at first. My mistake.
You could try using a div with overflow auto, but I doubt it would remedy the flicker for the reasons given above. I was rather hoping it'd get fixed by version 1.0 (even if this isn't the official full version of Firefox yet).Originally posted by Mr Herer
No Pawky. That is a div with overflow:auto. Not a frame or iframe.
Yeah it'll only happen in Firefox and netscape Navigator. It seems to screw up divs that have overflow:auto set. I've been trying to find a way to make Mozilla play nice with them for while now but have thus far been unsuccessful.
There is not a single div defined in the css w/ overflow: auto, let alone overflow: anything. The part that is flickering IS the iframe, look at his code, unless we are looking at different pages.
matstuff, try switching to a div w/ overflow: auto. It would be very easy for you to do. and if you are using php then use a ssi to add it there so u only have to change it once or whatever (i dont know php yet, so i dont know anything about ssi just going off what i have heard
)Originally posted by Mr Herer Ah yeah. It is an iframe. I didn't see it at first. My mistake.
You could try using a div with overflow auto, but I doubt it would remedy the flicker for the reasons given above. I was rather hoping it'd get fixed by version 1.0 (even if this isn't the official full version of Firefox yet).
ok, glad u c it now ;P even if it does continue flickering though, wouldnt the div w/ overflow: auto be better? it would help with search engines and dl spd and all.Yeah the overflowing div method would most certainly still be preferable to an iframe. The flickering glitch would likely still remain though.
Still no point in sticking with the iframe though, especially if php is available.