misbehaving div

@matstuffSep 22.2004

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 ~~[url]~~www.bits.bris.ac.uk/ubsrc/site2/home.html[/url] 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,

Mat

to post a comment

CSS

15 Comments(s) _↴

@matstuffauthorSep 22.2004 — #ps, Opera 7.11 also renders it apparently properly...

@FangSep 22.2004 — #Possibly, clear after float?

 &lt;/div&gt;
 [COLOR=green]&lt;div style="clear:both;"&gt;&lt;/div&gt;[/COLOR] 
 &lt;/div&gt; 
 &lt;/body&gt;&lt;/html&gt;

@pawkySep 22.2004 — #nah, i think your problem lies in:

<i>
 </i>div#bottomBar {
 font-family: Verdana, sans-serif;
 font-size: 70%;
 color: #666666;
 clear: left;
 [COLOR=green]float: left;[/COLOR]
 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 both

@matstuffauthorSep 22.2004 — #I'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.

@FangSep 22.2004 — #Hugs all round ?

After using [I]float[/I] you nearly always need a [I]clear[/I] (all browsers!)

[URL=http://www.complexspiral.com/publications/containing-floats/]Containing Floats[/URL]

@matstuffauthorSep 22.2004 — #Pawky, you're great too. That also works (without the additional div).

Mental note: "Clear after divs"

@Stephen_PhilbinSep 22.2004 — #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. ? ?

@matstuffauthorSep 22.2004 — #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 www.futureboogie.com - 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...

@pawkySep 22.2004 — #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 ?

@Stephen_PhilbinSep 22.2004 — #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.

@matstuffauthorSep 22.2004 — #The iframe is a php file getting dynamic content. Believe it or not given the dates on there...

@Stephen_PhilbinSep 22.2004 — #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).

@pawkySep 22.2004 — #[i]Originally posted by Mr Herer [/i]

[B]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. [/B][/QUOTE]

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 ?)

@pawkySep 22.2004 — #[i]Originally posted by Mr Herer [/i]

[B]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). [/B][/QUOTE]

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.

@Stephen_PhilbinSep 22.2004 — #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.

Also in #CSS _↴

Quicktime content scrolling outside of div boundary in Safari CSS filters Pop-up menu

Success!

Help @matstuff spread the word by sharing this article on Twitter...

Tweet This

misbehaving div

15 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

misbehaving div

15 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #CSS _↴