competition css - entertaining and educational

ok - please guys, it obviously takes a brain larger than mine. How can this be happening? (this, incidentally, is the new-and-slightly-tweaked-but-not-yet-alpha version of my css comp entry. And the weird thing happens only in FF, in case someone is viewing in IE and wondering what I'm going on about)

the first of the icons is being pushed down by something. goshdarned if I know what it could be. the thing that's really twisting my brain is - since everything is defined in css, and all things that define that first icon also define all of the other icons under it - why is only that first one being messed up? (well the second one too, but that's because the first one is pushing it)

I know I can get it to go away through blind jiggling, as I did before - but I want to UNDERSTAND the bugger. what's wrong with it?

....also there's the magical one pixel that's still giving me the horizontal scrollbar in FF....... but I've all but given up on that.....................

I think the horizontal scrollbar has something to do with how you set so many of your divs' widths to auto. A quick fix would be to just set the body to width:99%. (I tested it out and it worked for FF)

I'm still trying to figure out that icon thing...

thanks jameson, I'll try that out now!

but if anyone can illuminate me as to the magical behavior of the Errant Icon, I'll be most grateful........

I must've spent an hour yesterday trying to figure out why that icon is lowered like that and I still can't figure it out. I went through all the divs and classes, checked all the margins and paddings, and put borders around everything.. so strange how it's doing that.

The entry you already submitted in the comp didn't have that issue, right? What did you do different in this new version?

eureka, I've found it! hahahha still none the wiser as to how to fix it.............. you know what it is? in .forumrowborder, margin-top has to be set to about 30px. then it clears up. if the top margin is smaller than that, it skews. it's bizarre! nothing I've heard about css or html or anything explains this....

what happened is that the previous version (the one I submitted first) was all too loose and wasting too much space, so I wanted to tighten it up a little... now I've put that margin back in, and it's giving me a gap I don't want, but it's not a disaster as such.... and I've got everything else working (sorted out that one pixel thing - I took out all the width:auto, but it was still there (no matter - they were superfluous code and it's good I got rid of them - thanks for that) so then I just started deleting chunks to see which bit was doing it.... turns out it was the 1px outline around the text ad and the right-side content. when I was suffering from box sizing problems I replaced all the 'borders' with 'outlines', cuz I read somewhere that outlines don't take up any physical space on the page. well that was obviously wrong.... because as soon as I set the outline back to border the horizontal scroll disappeared.

ahh all part of the joys of web design, right? hahahah thank you so much for helping out - it means a lot when you don't feel youre all alone - just you and rampant code......... much appreciated

anyhow I'll do some more jiggling to see if I can reduce that 30px gap in some other way - and if anything new occurs to you, do drop a line....

the thing is, now I'd really really REALLY want to know what's going on with it. curiosity, you know?

ah.....

you're not messing with yours any more? 'ffcourse not... it's perfect

That's the beauty of having a place like ozzu to hang out. If we team up against the code, sometimes we might win.


I wouldn't say perfect, but nope, I'm not messing with mine anymore. I feel like I've spent so much time messing with it already- time to get back to my poor neglected clients!

My new battle is with CSS dropdown menus in IE6, but that's a story for another post....

yeah, I've decided to call in the cavalry. I'm PM-ing every moderator online. HAAAAALP..... :) this is just beyond me.....

good luck with the menus, though I'm no help in that department I'm afraid..... I'll just go back to chewing on my keyboard now.................

I just did a quick look and test to locate the problem.



If you take that piece of code out of your html the problem goes away, so that means the problem is related to the CSS that defines this area most likely.

I was just looking at that. But couldn't see anything that would cause it.

Thanks guys. that at least gives me a finite number of things to dig through. If anyone gets a sudden flash of inspiration relating to making it go away, I'll be here...

Well I have a solution, it doesn't really *fix* your problem, I just went about things slightly different by using some absolute positioning instead.

I modified two CSS sections. Here are the new parts:



For the above I changed the position to absolute and added a right position of 0.



Here I added margin-top of 80 pixels to offset the absolute positioning of the textAdTopRight block.

For me everything looks fine now.

yessssssssssssssssss! Works like a charm. can you tell me why it was doing that? so I understand the principle for next time......

thank you so much. my headache has just cleared up.

I have no idea why it was doing that. When you were using relative positioning even though you had a fixed size on the ad block floated to the right, the forum icon was going below the ad block as if it was the full width of the browser. I didn't see anything that would cause that, so that is why I just decided to take the entire ad block out of the regular flow of the document by giving it the absolute position and adjusting the right column (that is in the regular flow) by giving it the margin top offset. It was necessary to give that offset since the ad block wasn't in the regular flow anymore which pushed the rest of the column down normally. Not sure if any of that makes sense, hopefully a bit.

it all makes perfect sense, except the part where Mozzilla thinks that the add box extends for the full width of the screen..... I do understand what you did - you shifted the ad to a different 'level', so the icon doesn't see it any more. and if you hadn't given the right column the 80px offset, it would have crawled up above (or below) the ad, because it wouldn't 'see' it above itself any more. the solution is elegant and very understandable - it's the problem that's confusing

once again - thank you! things like this teach me to think outside the box.... if you can't beat them - join them!

So that's why it was doing it! The ad was taking up the whole width and pushing the image down. I didn't even think to check that. I bet just sticking a border around the ad would have shown me the problem right away.