competition css - entertaining and educational

  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

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.....................
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

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...
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

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........
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

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?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

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......... :shock: much appreciated :D

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 8)
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

celandine wrote:
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......... :shock: much appreciated :D

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

celandine wrote:
you're not messing with yours any more? 'ffcourse not... it's perfect 8)

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....
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

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


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.................
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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

Code: [ Select ]
<div id="textAdTopRight">
 <div>
  <p>Need hosting? Dedicated, shared hosting and colocation in the US. 24/7/365
   Support. Personalized Approach. Please visit <a href="#" rel="nofollow">3FN.NET</a>.</p>
 </div>
</div>
  1. <div id="textAdTopRight">
  2.  <div>
  3.   <p>Need hosting? Dedicated, shared hosting and colocation in the US. 24/7/365
  4.    Support. Personalized Approach. Please visit <a href="#" rel="nofollow">3FN.NET</a>.</p>
  5.  </div>
  6. </div>


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.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6807
  • Loc: Martinsburg, WV

Post 3+ Months Ago

I was just looking at that. But couldn't see anything that would cause it.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

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...
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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:

Code: [ Select ]
div#textAdTopRight {
  width: 230px;
  height:80px;
    z-index: 2;
    position:absolute;
    right:0px;
    background-color:#363636;
    padding:0px;
    outline: 1px solid #080808;
    color: #ffff99;
    margin: 0px;

    }
  1. div#textAdTopRight {
  2.   width: 230px;
  3.   height:80px;
  4.     z-index: 2;
  5.     position:absolute;
  6.     right:0px;
  7.     background-color:#363636;
  8.     padding:0px;
  9.     outline: 1px solid #080808;
  10.     color: #ffff99;
  11.     margin: 0px;
  12.     }


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

Code: [ Select ]
div#allrightcontent {
  width: 230px;
  float: right;
    clear: right;
    background-color:#051018;
    outline:1px solid #051018;
    margin: 0px;
    margin-top:80px;
    padding: 0px;
    display: inline;
    }
  1. div#allrightcontent {
  2.   width: 230px;
  3.   float: right;
  4.     clear: right;
  5.     background-color:#051018;
  6.     outline:1px solid #051018;
  7.     margin: 0px;
  8.     margin-top:80px;
  9.     padding: 0px;
  10.     display: inline;
  11.     }


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

For me everything looks fine now.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

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.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

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!
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Bigwebmaster wrote:
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.

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.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

not sure it would have done.... actually I'm going to check that out now, just out of curiosity. I mean the ad block does have a border around it in the design (or do you mean a different kind of border?) But anyway, who'd've thought to look at the ad? guess sometimes you have to look at the screen and not at the code.............................

anyhow Bigweb gone an' fixed it! Happy happy......

....still have no idea why it would have been doin' that though......... it was fixed width and everything.... and it was only affecting the icon... (well that's because the icon was the only thing floating on the other side.... but still.....)
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I think I might know what caused it. Okay on the right side you had two main div containers, the adcontainer, and the allrightcontent container which were both floated to the right. However, on the allrightcontent container you had to add:

Code: [ Select ]
clear:right


Otherwise they would just float side by side. However, when you add this "clear:right" you are in fact saying that everything floated should start below anything floated right which is definetely what you wanted for the menu, but not for the floated icon! That is why the icon was starting below the ad block even though the block didn't take up the entire width of the browser.

So with your original css if you take out the "clear:right" code on the allrightcontent container then your problem disappears, but then your menu on the right needs work again.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

of course! makes perfect sense.... sounds so simple when you say it :)

so as always it's not the machine that is faulty, but the mind..................................

thanks once again. I actually feel so much better, understanding it was a simple rule, and not some arcane and arbitrary force of nature.

I'll put up the final version of the entry now - that was the very last bug. thanks to all who helped.

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 66 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.