css div height problem

[Ubik]

Hello everyone
I posted this in the wrong forum so i'm putting this here. Can a mod delete the other thread ? (it's in the server-side forum)

I'm working on a new site and i'm having some troubles with my css layout.

You can take a look at it here http://www.artefakt.be/new/index.html .
In Firefox it works well but in IE my title on the left column should be at the same height as the right one. I'm using

display: table;

and

display: table-cell;
for the div content and the classes cleft and cright because the height of the content div didn't flow the content of the classes. If someone has better idea how to do this, i take it ! :)
Thanks !
Ubik

[Ankou]

Are you talking about the "la galerie du mois*" should be at the same vertical position as ".latest news"?

If so, my results are just the opposite as yours. On IE, they line up but in Firefox ".latest news" is up higher than "la galerie du mois*".


I'd say lose the display: table-cells and just let the cleft and cright divs remain block level elements. Then float both to the left - set their widths to fit (keeping in mind the box model issues that may result from borders/padding/margin), and then make sure to clear them (clear: both) with another element (an HTML tag or a non-markup clearing technique).

If that's not clear let me know and I'll give a closer look tomorrow. I'm too tired tonight (sorry).

[Ubik]

If so, my results are just the opposite as yours. On IE, they line up but in Firefox ".latest news" is up higher than "la galerie du mois*".
You're right, I inverted it when i wrote my question.

I changed the div according to what you said, it's ok in IE but not in Firefox. In Firefox, the background color of the #content div doesn't appear. I tried to clear the float but I think i didn't understand what you mean ... (-: I'm not too advanced in css. I updated the files on the server .
Thanks :)

[Ankou]

Okay... for clearing two floating divs, I'll just show you what I mean by using an HTML tag to do this. There are other methods available, but this is an easy place to begin and to see what's going on.

You have your cleft and cright DIVs floating left. When you do this you're playing with the normal flow of things. In order to set the flow back so that the element following your floats is below them, you need to use clear: both;.


<div id="content">
<div class="cleft">...</div>
<div class="cright">...</div>
<br style="clear: both;" />
</div>

That's basically what you're looking for. If you do that then your background color in Firefox will show up again.

I hope that helps. :)

[Ubik]

Thanks ! It works perfectly ! :) That helped a lot !
I have another little question if you don't mind. In my menu, the list is ok in firefox but in IE it seems that there is a padding between the item while there isn't any in the css file.

[Ankou]

The quick fix: add a line-height to #boxmenu li{} in your CSS file.


#boxmenu li{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 65%;
color: #000000;
line-height: 1.3em;
}


I saw the quick fix because it works, not because it's the right thing to do. Looking over the CSS I see no reason why Firefox and IE should display what you have differently. Even when stripping the margin and padding from the elements in question. I may have over looked something though.

There could be other things coming into play as well, but I don't have the time right now to look over everything. I did notice that your left and right are both usign float - but are never cleared (clear: both -- just like before). You're also floating boxmenu to the left which isn't really needed since there's nothing to the right of it anyway - and it's never cleared (clear: both). Most of the time if it's floated it's a good idea to clear the float when it's something that has to do with the layout of the page. Otherwise the normal flow can get out of hand or you see strange things happen (like your missing background color).


I'll try to have a more indept look later but I can't promise anything. It's near the end of hockey season and they've had too many good games on TV lately. :)

[Ubik]

Timetable decay ... and a lot of work at my job ... :)
The fix works nicely, if i understand you're giving a line-height so both IE and firefox know what to do so they don't mess if nothing is defined (but padding or margin should work isn't it ?).
I didn't know i always had to clear div when i float, things are clearer now!:thumb:


It's near the end of hockey season and they've had too many good games on TV lately. :):beer:

[Ankou]

Yeah padding and margin should work, but they weren't and I'm not sure why. I assume it may be something in the HTML and/or CSS that I was overlooking. Typically what I do if I hit a snag like that I'll just make a new UL/LI list in a new HTML document, format it so it looks the way I want (so I know it works) and then copy it into the document I'm working on. If it suddenly looks different then it's because some other code I have is messing with the layout of the UL/LI. It's a nice little trick to do if you get stuck -- or your eyes hurt from hunting through your code a million times. :)

[Ubik]

I was off for the week-end :beer: That's an handy trick indeed. Thanks for your help ! :)