CSS issue

April 3rd, 2006, 2:53 am

Hey,
I believe I've got a CSS problem, which makes that one of my tables are getting messed up.
Have a look at [url removed because topic looks dead]
At the right, there are 3 tables, the last one should be RSS Feeds, but due to some weird problem the table is appearing on the right side of the second table, instead of under the second table. Mind you that I'm only getting this glitch in Firefox, in IE it works fine.
So I'm not sure this is a CSS issue, but I think it is.
In case you need it, here's the CSS file:
[url removed because topic looks dead]

Thanks!

April 3rd, 2006, 3:41 am

add margin-top:150px; to that div, itll do it....150 is a proximate, and its not a real solution. im sorry, your code is just mess, it doesnt help you use same value for class and id, adress same elements on differnt parts of your css logic of which is hard to follow, or differentiate between elements only by number sufix its really hard to see whats what.

April 3rd, 2006, 4:03 am

orcrist wrote:

add margin-top:150px; to that div, itll do it....150 is a proximate, and its not a real solution. im sorry, your code is just mess, it doesnt help you use same value for class and id, adress same elements on differnt parts of your css logic of which is hard to follow, or differentiate between elements only by number sufix its really hard to see whats what.

It's indeed not a real solution, I'm sure there's something better...

And just to let you know, the reason why the third table is getting messed up is because for the second table I'm using <ul><il>..... and it appears that if I don't use any <ul> <li>, everything gets positioned in the right way.

This is the second table:

Code: [ Download ] [ Select ]

<div class="moduletable1">
    <h3>Categories</h3>

Browse a category:
<ul class="column-list">
<li><a class="readon" href="#">All</a></li>
<li><a class="readon" href="#">Technology</a></li>
<li><a class="readon" href="#">Programming</a></li>
<li><a class="readon" href="#">Graphics</a></li>
<li><a class="readon" href="#">Links</a></li>
<li><a class="readon" href="#">Gaming</a></li>
<li><a class="readon" href="#">Videos</a></li>
<li><a class="readon" href="#">Flash</a></li>
<li><a class="readon" href="#">Hardware</a></li>
<li><a class="readon" href="#">Software</a></li>
<li><a class="readon" href="#">Ebay</a></li>
<li><a class="readon" href="#">Web_Comics</a></li>
<li><a class="readon" href="#">Science</a></li>
<li><a class="readon" href="#">News</a></li>
<li><a class="readon" href="#">Blog</a></li>
<li><a class="readon" href="#">Sports</a></li>
<li><a class="readon" href="#">Music</a></li>
<li><a class="readon" href="#">Fun/Humor</a></li>
<li><a class="readon" href="#">Movies</a></li>
<li><a class="readon" href="#">General_Interest</a></li>
<li><a class="readon" href="#">Everything_Else</a></li>
<li><a class="readon" href="#">Tutorials</a></li>                      
</ul>


            </div>

1. <div class="moduletable1">
2.     <h3>Categories</h3>
4. Browse a category:
5. <ul class="column-list">
6. <li><a class="readon" href="#">All</a></li>
7. <li><a class="readon" href="#">Technology</a></li>
8. <li><a class="readon" href="#">Programming</a></li>
9. <li><a class="readon" href="#">Graphics</a></li>
10. <li><a class="readon" href="#">Links</a></li>
11. <li><a class="readon" href="#">Gaming</a></li>
12. <li><a class="readon" href="#">Videos</a></li>
13. <li><a class="readon" href="#">Flash</a></li>
14. <li><a class="readon" href="#">Hardware</a></li>
15. <li><a class="readon" href="#">Software</a></li>
16. <li><a class="readon" href="#">Ebay</a></li>
17. <li><a class="readon" href="#">Web_Comics</a></li>
18. <li><a class="readon" href="#">Science</a></li>
19. <li><a class="readon" href="#">News</a></li>
20. <li><a class="readon" href="#">Blog</a></li>
21. <li><a class="readon" href="#">Sports</a></li>
22. <li><a class="readon" href="#">Music</a></li>
23. <li><a class="readon" href="#">Fun/Humor</a></li>
24. <li><a class="readon" href="#">Movies</a></li>
25. <li><a class="readon" href="#">General_Interest</a></li>
26. <li><a class="readon" href="#">Everything_Else</a></li>
27. <li><a class="readon" href="#">Tutorials</a></li>                      
28. </ul>
31.             </div>

Looks great when I don't use <ul> and <li>:

Code: [ Download ] [ Select ]

<div class="moduletable1">
    <h3>Categories</h3>

Browse a category:
BLAH BLAH


            </div>

1. <div class="moduletable1">
2.     <h3>Categories</h3>
4. Browse a category:
5. BLAH BLAH
8.             </div>

Does anybody see what's wrong?

April 3rd, 2006, 4:32 am

uts not to du with ul or li's, tho you might wanna try to anull default paddings of ul.

its more with the thing your both divs are in same class, and i havent saw any specific css positioning that would distinged one from other.

it may also be (if, maybe, havent looked) that floats in ul (or later) are colapsing parent element. IE disregard that and wrap them all, FF dont.

and the example you gave is perfect illustration of what i meant: you dont have to have all that code above, you could just do
.column-list a {this:that;}
instead of assigning class to <a>
again, i apologize for being too lazy to help you, its just your css isnt very friendly to an outsider.

edit:

http://img87.imageshack.us/img87/2804/untitled8oj.jpg
this is what i mean, your elements have 15 parents on average, all named left1 left2 left3 or something like that

April 3rd, 2006, 6:52 am

Sorry, it's just that I don't understand you very well..
Anyway, I've added float:left, and now the third table is under the second one.
But have a look, there's still something messy.

April 3rd, 2006, 8:48 am

Could you perhaps expand a bit on "messy"?

It looks like "mission accomplished" from here ...

April 3rd, 2006, 9:01 am

SugarKane wrote:

Could you perhaps expand a bit on "messy"?

It looks like "mission accomplished" from here ...

This is what I mean:

April 3rd, 2006, 9:03 am

I don't see big red circles like that ...

April 3rd, 2006, 9:08 am

SugarKane wrote:

I don't see big red circles like that ...

LOL I drew those circles myself to show you where the glitch is. Don't you see...?

April 3rd, 2006, 9:10 am

Ah ... so it's true, Belgians have no sense of humour .. lol


I was kidding.

April 3rd, 2006, 9:12 am

SugarKane wrote:

Ah ... so it's true, Belgians have no sense of humour .. lol


I was kidding.

LOL I surely do, but not now I guess, because I'm trying to fix the glitch for hours now, so I'm getting quite pissed =/

April 3rd, 2006, 9:21 am

Make your div.moduletable1 h3 248px wide.

Should fix it ...

April 3rd, 2006, 9:25 am

SugarKane wrote:

Make your div.moduletable1 h3 248px wide.

Should fix it ...

Oh my god, finally, it works! Thanks, god will bless you, lol

April 3rd, 2006, 9:33 am

I already had a slight feeling... in IE it doesn't look good anymore. The category links are all under each other... (it looks good when I don't add the width:248px).
Got any solution for this?

April 3rd, 2006, 11:46 am

Dagnamit ... I should have checked IE


I have no immediate answers for you though. I can get it perfect in IE or FF ... but not both. When this happens there is often some conflict going on in the css ... usually with paddings and margins.

I find your site incredibly awkward to work with ... my brain hurts now. It seems needlessly over-complicated, which makes finding solutions that bit harder.

What I would do is to remove every single padding, margin, width and float from any bit of css that affects the right hand column ... totally wipe it out. I would then build it back from the ground up (without referring to what I had before). Doing this will likey remove much of the problem. Drastic ... but necessary perhaps.

As a further task, I would also scrap the markup for the right column and redo that too. It could take one div and a few lists to comlete ... nice and clean.


Anyway, there are some clever folks at Ozzu who may see what I can't ...