OZZU CSS comp tricks and tips

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I have decided that it would be easier for you all to learn from my mistakes seeing that I am the first one to start to tackle the CSS comp ... or so it seems, so I'm going to share a few things with you that I've learned through this to make it a bit easier for you ...

1. If you don't want the two divs ("headerTop" and "headerBottom") to take up 0px of vertical space (like I wanted to do), bad luck, IE6 doesn't do that, the minimum I could get a div to be was 8px, but I used 10px to be sure.

2. For the "legend" icons that show you which icon means what ("no new posts","new posts","locked forum") I used one image containing all three icons and made the padding of the list more to space the text properly

3. Fixed width (what I tried first) seems almost impossible because there is no container div for the right and the left column together ("div.left" and "div#allrightcontent") ... except if you use absolute positioning and place it all on the left hand side of the screen.

4. For some reason if you use absolute positioning for the left hand side column, the footer part moves all the way up till right under the nav-bar.

5. IE6 and FF interprets padding differently if you have a div that is 200px wide and you add 20px padding to it, it will be 240px in FF and it would still be 200px in IE with 20px padding inside ... So what I would suggest is to add the padding to the text inside the div instead of to the div itsself ...

If there are any more that I find, I will add them, and if you have any to add, please do so ...
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Good thread r_t. I really admire your effort here.

1. Have you tried display:none; ?

4. Absolute positioning removes the element from the render flow.

5. This is the infamous box-model. The one FF uses is the one that is W3C correct. It is not analogous to a real world box. For the W3C, a box is measured by it's content. Padding, border and margin all go outside the width.

I prefer IE6's, where the width is measured from the borders, but that's not the one we get moving forward. http://www.w3.org/TR/REC-CSS2/box.html



*Note*
The CSS-3 spec has been in development for nearly 10 years. Hopefully...hopefully, one day we will benefit from all that it promises. :)
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

I have a question. Why in the world can't they order the divs in the way they are on the page? How do I get the ad that's in the header up where it's supposed to be if it appears in the html after the nav?

Sorry if I made some kind of newbie mistake :D But I just can't figure it out.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Are you talking about the 3FN.net ad?, if you are, here is my solution: I used absolute positioning to make it always stay in the top-right of the page, the code looks like this:

Code: [ Select ]
div#textAdTopRight
{
width:150px;
height:80px;
float:right;
position:absolute;
top:30px;
right:40px;
}
  1. div#textAdTopRight
  2. {
  3. width:150px;
  4. height:80px;
  5. float:right;
  6. position:absolute;
  7. top:30px;
  8. right:40px;
  9. }
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Update ... Display:none; does the trick if you want to make a div 0px in height. Thanks dM ... that's good for future use ... But now I have already fixed this with a bit of a workaround ...
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Breeze wrote:
I have a question. Why in the world can't they order the divs in the way they are on the page? How do I get the ad that's in the header up where it's supposed to be if it appears in the html after the nav?

Sorry if I made some kind of newbie mistake :D But I just can't figure it out.


Like position:absolute; a float also takes an element out of the render flow. This can be managed with clear:both; in the elements that follow. Like so...
http://www.myirmo.com/bogey
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

righteous_trespasser wrote:
Are you talking about the 3FN.net ad?, if you are, here is my solution: I used absolute positioning to make it always stay in the top-right of the page, the code looks like this:

Code: [ Select ]
div#textAdTopRight
{
width:150px;
height:80px;
float:right;
position:absolute;
top:30px;
right:40px;
}
  1. div#textAdTopRight
  2. {
  3. width:150px;
  4. height:80px;
  5. float:right;
  6. position:absolute;
  7. top:30px;
  8. right:40px;
  9. }


Excelent. thanks Mr RT, sir :D

And we must not forget our friend digitalMedia :D
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

righteous_trespasser wrote:
Update ... Display:none; does the trick if you want to make a div 0px in height. Thanks dM ... that's good for future use ... But now I have already fixed this with a bit of a workaround ...


Well, the element shouldn't render at all - not just 0px in height. :)

What was your workaround?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

dM wrote:
What was your workaround?

Splitting the image up into 3 pieces vertically ... and put it into the 3 divs ...
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

I tried to use rounded corners in the Nav.
Looks good till you see it in IE. :S

FF: http://www.onyx-design.net/test/ozzu1/99.jpg
IE7: http://www.onyx-design.net/test/ozzu1/993.jpg
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

righteous_trespasser wrote:
3. Fixed width (what I tried first) seems almost impossible because there is no container div for the right and the left column together ("div.left" and "div#allrightcontent") ... except if you use absolute positioning and place it all on the left hand side of the screen.

I was stumped on this one for a while, too. Then, I tried something that I was absolutely certain wasn't going to work at all... but it did... and even validated.

I just treated the 'body' as if it were a wrapper div:

Code: [ Select ]
body{
     width:800px;
     margin-left:auto;
     margin-right:auto;
     }
  1. body{
  2.      width:800px;
  3.      margin-left:auto;
  4.      margin-right:auto;
  5.      }


I'm not sure why or how it worked, but it did the trick.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6805
  • Loc: Martinsburg, WV

Post 3+ Months Ago

Fabinator wrote:
I tried to use rounded corners in the Nav.
Looks good till you see it in IE. :S

FF: http://www.onyx-design.net/test/ozzu1/99.jpg
IE7: http://www.onyx-design.net/test/ozzu1/993.jpg


This may help you in your rounded corner venture:

http://www.cssplay.co.uk/boxes/snazzy2.html
http://www.cssplay.co.uk/boxes/chunky.html
http://www.cssplay.co.uk/boxes/snazzy.html
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

jameson5555 wrote:
I just treated the 'body' as if it were a wrapper div:

Code: [ Select ]
body{
     width:800px;
     margin-left:auto;
     margin-right:auto;
     }
  1. body{
  2.      width:800px;
  3.      margin-left:auto;
  4.      margin-right:auto;
  5.      }


I'm not sure why or how it worked, but it did the trick.


Yeah, I do that all the time :), well, not to get something to 0px, but treat body as it was a wrapper div...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

another one I forgot to mention, thanks to spork I remembered:
there is this:
Code: [ Select ]
<span class="supmodColor">Super Moderator</span>

And this:
Code: [ Select ]
a href="#" class="supModColor"><strong>ATNO/TW</strong></a>

which looks the same, but as a matter of fact isn't (notice the capitals), so the following CSS will not work
Code: [ Select ]
.supModColor
{
bla bla ...
}
  1. .supModColor
  2. {
  3. bla bla ...
  4. }

instead, you'll have to do it like follows:
Code: [ Select ]
.supModColor, .supmodColor
{
bla bla ...
}
  1. .supModColor, .supmodColor
  2. {
  3. bla bla ...
  4. }
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6249
  • Loc: Seattle, WA

Post 3+ Months Ago

Yeah, I wasn't sure if he meant to do that or not. Either way, the solution you posted is the exact one I used, so even if dM doesn't change it, it's no big deal.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Doh! That was my bad. :(

I guess you're stuck with 2 classes. Sorry.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

digitalMedia wrote:
Doh! That was my bad. :(

I guess you're stuck with 2 classes. Sorry.


lol ... that's all good, it just caught me out in the beginning, because I had the 'legend' for the colours working, but then ATNO/TW just didn't want to change colours with the rest ... and then I saw what the problem was ...

Here's a question though, I know on a windows server links aren't case sensitive but on a linux server they are, but is that different with HTML and CSS? ... I am assuming so, because it's the browser and not the host that is using/parsing these links ... Is that right?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

righteous_trespasser wrote:
Here's a question though, I know on a windows server links aren't case sensitive but on a linux server they are, but is that different with HTML and CSS? ... I am assuming so, because it's the browser and not the host that is using/parsing these links ... Is that right?


Yeah, the CSS selectors are case sensitive.

Post Information

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