competition css - entertaining and educational

  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post December 27th, 2007, 11:26 am

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.....................
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 27th, 2007, 11:26 am

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post December 27th, 2007, 12:08 pm

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...
phoenix web design
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post December 28th, 2007, 1:02 am

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........
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post December 28th, 2007, 7:05 am

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?
phoenix web design
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post December 28th, 2007, 7:24 am

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)
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post December 28th, 2007, 8:04 am

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....
phoenix web design
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post December 28th, 2007, 8:19 am

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.................
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post December 28th, 2007, 8:42 am

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.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6741
  • Loc: Martinsburg, WV
  • Status: Offline

Post December 28th, 2007, 8:53 am

I was just looking at that. But couldn't see anything that would cause it.
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post December 28th, 2007, 8:58 am

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...
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post December 28th, 2007, 9:12 am

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.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post December 28th, 2007, 9:20 am

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.
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8925
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post December 28th, 2007, 10:14 am

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.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post December 28th, 2007, 10:22 am

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!
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post December 28th, 2007, 10:24 am

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.
phoenix web design
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 28th, 2007, 10:24 am

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 154 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.