(OT) CSS Question, was Re: CSS question about using float
[Apologies to Greg, this was sent to him direct (and truncated) rather than to the list first time.] On 11 June 2011 19:05, Greg Thomas <Greg@thethomashome.co.uk> wrote:
Well, I consider myself a pragmatist rather than a purist, but yes, I think what you have meets both the spirit and letter of the standards (if you tidied it up a bit to make it 100% HTML compliant ;)).
That's a good start then! Yes, I need to tidy up the code a bit but I was just playing at 1am so I will forgive myself for laziness when I really should have been in bed :-)
However,
#menu, #content { display:table-cell; }
may give you problems with IE7 (which doesn't support it) and IE8 (which does, but requires a proper !DOCTYPE).
Yes, I was aware of this, but I'm hoping that since the structure in the HTML isn't too far removed from more typical attempts at table layout in CSS, I should be able to have an alternative stylesheet to fall back to for IE. My latest experimental version is here: http://www.more-solutions.co.uk/alug.html - I'd appreciate comments about the approach I'm taking (aside from the issue of IE6/7 for now). Basically it's for what will become a web application so controlling the layout makes sense, and the right hand "content" pane will likely be loaded using AJAX and it makes sense that it should scroll independently from the (tree) menu on the left which could get quite long if all nodes are opened. I'm a long way from being a CSS expert and I'd really like to try and learn how to do this "correctly" as far as I can. -- Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG
On 11 June 2011 21:47, Mark Rogers <mark@quarella.co.uk> wrote:
My latest experimental version is here: http://www.more-solutions.co.uk/alug.html - I'd appreciate comments about the approach I'm taking (aside from the issue of IE6/7 for now). Basically it's for what will become a web application so controlling the layout makes sense, and the right hand "content" pane will likely be loaded using AJAX and it makes sense that it should scroll independently from the (tree) menu on the left which could get quite long if all nodes are opened. I'm a long way from being a CSS expert and I'd really like to try and learn how to do this "correctly" as far as I can.
If you're looking at AJAX, I'd suggest investing some time looking at a JavaScript framework. I'd suggest jQuery, others are available. If nothing else, it simplifies some of the cross-browser problems you're going to encounter - for example, you're getting the height of the window, that could be done with jQuery using something like $(window).height() will give the height (http://api.jquery.com/height/). But it will really pay dividends if you're going to use AJAX. For comparison, the jQuery equivalent of your function would be something like (remembering to include the jQuery library at the top) ... function autoHeight() { var h = $(window).height() - $("#header").outerHeight(true) - $("#footer").outerHeight(true); $("#menu").height(h); $("#content").height(h); } $(document).ready(function(){ autoHeight(); } ); $(window).resize(function(){ autoHeight(); } ); Also, your "test" link adds a scroll bar that allows me to scroll up and down one pixel (FF 3.6.17); That's because the link remains selected which adds to the height (until you click elsewhere to unselect it). I'd suggest adding this.blur() before calling autoHeight on the link to prevent that and confusing you (it did me for a while, anyway). Greg
On 12 June 2011 12:51, Greg Thomas <Greg@thethomashome.co.uk> wrote:
If you're looking at AJAX, I'd suggest investing some time looking at a JavaScript framework. I'd suggest jQuery, others are available.
Picking a framework was on my "todo" list, and to be honest it pretty much just had jQuery on it even though it's not something I've used much.
For comparison, the jQuery equivalent of your function would be something like [...]
Thanks, that's a great starter into jQuery for me, and it worked perfectly for me: http://www.more-solutions.co.uk/alug.html
Also, your "test" link adds a scroll bar that allows me to scroll up and down one pixel (FF 3.6.17); That's because the link remains selected which adds to the height (until you click elsewhere to unselect it). I'd suggest adding this.blur() before calling autoHeight on the link to prevent that and confusing you (it did me for a while, anyway).
Thanks for the tip. The link shouldn't have been there (and its gone now) but the diagnostics are still useful. -- Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG
On 15 June 2011 22:29, Mark Rogers <mark@quarella.co.uk> wrote:
Thanks, that's a great starter into jQuery for me, and it worked perfectly for me: http://www.more-solutions.co.uk/alug.html
Oddly, that fails miserably for me on FF4.01, but it's fine in IE8. Also, at the risk of turning the list in to a jQuery one, there's one more jQuery'ism you should probably be aware of. If you applied a class to both of your menu and content divs, e.g. class="fullHeight", then you could apply the correct height to both (and any other elements with the fullHeight class) in one statement; $(".fullHeight").height(h); Greg
On 16/06/11 16:28, Greg Thomas wrote:
On 15 June 2011 22:29, Mark Rogers<mark@quarella.co.uk> wrote:
Thanks, that's a great starter into jQuery for me, and it worked perfectly for me: http://www.more-solutions.co.uk/alug.html Oddly, that fails miserably for me on FF4.01, but it's fine in IE8.
Strange, I'm testing in FF4.0.1 as my main browser.
If you applied a class to both of your menu and content divs, e.g. class="fullHeight", then you could apply the correct height to both
Good idea, done, thanks! -- Mark Rogers // More Solutions Ltd (Peterborough Office) // 0844 251 1450 Registered in England (0456 0902) @ 13 Clarke Rd, Milton Keynes, MK1 1LG
participants (2)
-
Greg Thomas -
Mark Rogers