8 replies [Last post]
etrilliat
Offline
newbie
Yorkshire,UK
Last seen: 14 years 23 weeks ago
Yorkshire,UK
Joined: 2004-06-09
Posts: 10
Points: 0

Hi everyone, pulling out whats left of my hair here. I am a newbie, and looking through all the threads I am sure I am doing something wrong, but at this point I do not fully understand all the issues surrounding different hacks.

My test site is how I want it in IE6, but when I view in FF my content div drops below my sidebar. If I set the width down to 500px it comes back up again in FF, although still not lined up. Dare not think what is happening in macs/IE5.5 etc . I presume therefore I have something wrong with the width settings but I do not know what, they appear to be right.

My site is at http://www.a.preece.dsl.pipex.com/test/testcss1.html
and the CSS is http://www.a.preece.dsl.pipex.com/test/testcss1.css

Appreciate any help, or I will have to go back to tables! Sad

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Works in IE6 but all over the place in FF

Hi there you havn't allowed for the padding on the two main divs, remove the 10px padding on the divs and it corrects itself if you can, set the padding on whatever is defining the text i.e <p> also if you set height:100% in the body and in the divs they should equalize to the viewport area if that's what you would like.

Hope that's of some help,

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

etrilliat
Offline
newbie
Yorkshire,UK
Last seen: 14 years 23 weeks ago
Yorkshire,UK
Joined: 2004-06-09
Posts: 10
Points: 0

Works in IE6 but all over the place in FF

thanks hugo, has sorted the problem out.

ref "also if you set height:100% in the body and in the divs they should equalize to the viewport area if that's what you would like."

thats my next problen to solve, I want the sidebar to match the height of the content div which will of course vary depending on the users text setting. i have read somewhere it can be done, but dont really understand the issues. presently manually setting height to match but as already mentioned, as soon as someone ups the text size it is all out of sync again.

again, thanks for your help.

Root
Offline
Enthusiast
Brighton UK
Last seen: 15 years 42 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Works in IE6 but all over the place in FF

This could be very tricky. The traditional foprmula for a fixed width design is to use a bg graphic. If it is set up in the container (not the menu) it will tile all they way down. With a completely flexible layout which holds its positioning regardless of font size however it is difficult to get a satisfactory result with the menu width. The reason is you the bg will obviously not widen as the text increases in size. To my knowledge it can't be done. Sorry.

No class, little style and a lotta division.

etrilliat
Offline
newbie
Yorkshire,UK
Last seen: 14 years 23 weeks ago
Yorkshire,UK
Joined: 2004-06-09
Posts: 10
Points: 0

Works in IE6 but all over the place in FF

hi root

thanks for your help, however i have, thanks to hugo, sorted the width issues out and i understand them much better. My problem is as above, getting the heights of the sidebar and contect divs to stay in sync. Depending on a, how much content there is and b, what text setting is used means the content div goes up and down like a yo yo. I just want the sidebar to stay in sync. Presently doing it manually by renaming sidebar and content divs on individual pages with set pixel heights that clear the content in the content div (if this makes sense?).

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Works in IE6 but all over the place in FF

etrilliat I think you may need to use the 'Faux columns' effect to achieve this where you use a repeating image to make up for the unequal height, it's explained here:
http://www.alistapart.com/articles/fauxcolumns/

Have a read and post back if it's still unclear,

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Root
Offline
Enthusiast
Brighton UK
Last seen: 15 years 42 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Works in IE6 but all over the place in FF

Its the bit where you say *vary according to the users text settings*
is the addiditional specification making this more complex than it need be. If you use faux columns but have them fixed in pixels in size that will do it. It will however rule out a completely flexi ems based design.
A compromise might be to use Ryan Brills negative margin layout with a fixed but wide menu and the remainder in ems.

I used it for a WordPress template called http://www.atthe404.com/maximus Maximus

My http://www.atthe404.com/fujiyama Fujiyama WP template is completely flexible but it can not use the tile menu bg. You see the difference ? HTH. Just my 2c.

No class, little style and a lotta division.

etrilliat
Offline
newbie
Yorkshire,UK
Last seen: 14 years 23 weeks ago
Yorkshire,UK
Joined: 2004-06-09
Posts: 10
Points: 0

Works in IE6 but all over the place in FF

thanks for your help guys, just off to london for a couple of days so will look at it more closely on my return. in answer to root, my client wants to have his new site completely compatible with new usability and accessability legislation which will mean ems and not px as the text will have to resize on users whim. cheers.

Root
Offline
Enthusiast
Brighton UK
Last seen: 15 years 42 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Works in IE6 but all over the place in FF

Well that is fine but it will then limit some of the styling choices which follow. It will rule out our old stand by faux cols.

No class, little style and a lotta division.