|
Please read this[^] guideline before you post anything in the thread.
If you want to put any product world wide then post the article in
"Product Showcase" section of code project.
Please do not market your product or Website in discussion forum.
HTH
Jinal Desai - LIVE
Experience is mother of sage....
|
|
|
|
|
Hey everybody,
I am currently working on an embedded http server and I am serving HTML straight from my binary. Unfortunately I have spent too many years looking at NT internals and other extinct or near extinct programming languages and I am lost when I look into the eyes of CSS. (Pun intended.)
Is there a cross-browser CSS magic incantation to make a table row take up the remaining window space? In the old days... I thought you could just do: <TD height="100%"> but it looks like this is probably not standard.
What I want is three rows... first two are absolute... and third row consumes the remaining space. I was hoping to avoid javascript if possible.
Best Wishes,
-David Delaune
|
|
|
|
|
I've had mixed results using % dimensions with tables. It's always frustrating, to say the least, especially if you try to get consistent behavior across multiple browsers. If you have a target size for the viewing area, try enclosing the table in a div element of fixed height, then applying the table row height of 100%. It should fill the div element completely, even if the row contents are blank.
"A Journey of a Thousand Rest Stops Begins with a Single Movement"
|
|
|
|
|
Roger Wright wrote: If you have a target size for the viewing area, try enclosing the table in a div element of fixed height, then applying the table row height of 100%. It should fill the div element completely, even if the row contents are blank.
Right but keep in mind that I am trying to duplicate the GUI of my C++ based application. I wanted the first two rows to be an absolute pixel height and the last row to be relative to whatever space remained. I am seeing *very* inconsistent behavior when using the <TD height="100%"> tag across browsers. In fact I can change the tag behavior in IE by changing the DOCTYPE declaration.
I am hoping that HTML5 will solve some of these inconsistencies. In fact I am beginning to think HTML5 may be the future of all GUI design... even within native applications. It took me many months to design the application GUI with the C++ language... I am utilizing all of the modern techniques.... including GDI+ and dozens of advanced customized window classes.
I have only been working on the web interface for three days. I have duplicated nearly all of the GUI of my C++ application. I'm talking about a x100 difference in development time here. Wow I want to develop all my future interfaces this quickly.
As of today the Windows NT kernel (win32k.sys) is internally tracking HWNDs and device contexts and various other GDIOBJ objects associated with a application window. I think it may be time for Microsoft to reconsider the design of the window subsystem. Working with pens, brushes, device contexts, raw bitmaps and handles is overly complicated and a hindrance to designing a modern native application interface.
I apologize for the rant, but serving HTML pages from my application has really got me thinking about the current state of Windows GUI design within native applications and I wanted to get it off my chest.
Best Wishes,
-David Delaune
|
|
|
|
|
I recently came across something similar but with divs rather than tables but I think the same applies.
What you need to do, is explicitly specify that the body (the document body) has 100% height, and if there are in containers within, they also must have relative 100%.
Here's an example:
<html>
<head></head>
<body style="height:100%;">
<div style="height:100%;"
<table style="height:100%;">
</table>
</div>
</body>
keep in mind, what I meant by relative 100% is as so:
<html>
<head></head>
<body style="height:100%;">
<div style="height:50%;">
</div>
<div style="height:50%;"
<table style="height:100%;">
</table>
</div>
</body>
If the post was helpful, please vote, eh!
Current activities:
Book: Devils by Fyodor Dostoyevsky
Project: Hospital Automation, final stage
Learning: Image analysis, LINQ
Now and forever, defiant to the end.
What is Multiple Sclerosis[ ^]?
-- Modified Thursday, July 22, 2010 2:49 PM
|
|
|
|
|
Mustafa,
Thanks for the advice. Although this is not exactly what I am looking for... it appears to be the only way to get a table row to consume the remaining window space with style sheets.
It is unfortunate that I need to use ALL relative heights in order to get this working. I wanted my HTML interface to look exactly like my application GUI. My application contains a CListCtrl with exactly five rows and contains bitmaps exactly 48x48 and another CListCtrl at the bottom of the GUI which consumes the remaining window space.
I am not sure who is in charge of creating these standard W3C specifications. But in my opinion not being able to have both absolute height and relative heights is a huge barrier. I was beginning to see huge potential for using HTML in native applications for the GUI.
Best Wishes,
-David Delaune
|
|
|
|
|
Use divs, not tables
<div style="background-color:gray;height:100%">
<div style="height:100px;background-color:red;"> First row </div>
<div style="height:100px;background-color:green"> Second row </div>
Final row
</div>
Looks like:
First row Second row
Final row
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
Chris,
I cannot get the code you provided to work with W3C XHTML DOCTYPE compliance mode. As I mentioned in one of my previous responses I get different height attribute behaviors based on the DOCTYPE declaration.
Paste this into a notepad generated HTML file and observe that it does not render full screen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="background-color:gray;height:100%">
<div style="height:100px;background-color:red;"> First row </div>
<div style="height:100px;background-color:green"> Second row </div> Final row</div>
</body>
</html>
I need the XHTML DOCTYPE because without it... the HTML renders completely different across all the browsers I am testing. My generated HTML tables are mimicking the behavior of a CListCtrl... but without the XHTML DOCTYPE the my tables look completely different depending on what browser I am using.
Is there something I am missing?
Best Wishes,
-David Delaune
P.S.
Off-topic: Where is the documentation for the codeproject <code> tag? I thought there was a lang=html argument for correct code syntax highlighting.
Edit: Nevermind... its on the PRE tag.
modified on Thursday, July 22, 2010 4:06 PM
|
|
|
|
|
Is there an actual need for XHTML? What about using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> This will put you into Standards mode.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
Chris Maunder wrote: Is there an actual need for XHTML?
Yes, it appears so. I may have over-simplicated the description of my HTML GUI for the sake of brevity. I am mimicking both the CListCtrl and CTabCtrl which are skinned in my C++ GUI. They are also skinned in my HTML interface and it came out looking really good. But when I remove the HTML compliance mode... there are many render artifacts and minor visual differences when I test with various browsers.
Chris Maunder wrote: This will put you into Standards mode.
Did you test this first? If you paste the example HTML snippit I provided in my previous post and replace the DOCTYPE declaration with yours... nothing changes. From my understanding the height tag doesn't even exist in compliance mode.
Anyway some additional googling lead me to this:
100% Table Height[^]
The author provides an excellent explanation of the cause and at the bottom gives four samples which I will start playing with.
Best Wishes,
-David Delaune
|
|
|
|
|
Randor wrote: Did you test this first?
You mean apart from including the live HTML in my message[^] so you could see it in action? I'm not sure what you mean.
One caveat, though: I enclosed the DIVs inside a larger, fixed height div for display purposes. The lower div then expands to fill the height of the surrounding container.
Now, if you want the 3 DIVs to be full browser height, and not just the full height of a containing HTML element, then the following will do it. And yes, I tested in IE8, FF3.6, Opera10, Chrome and Safari. Note the lack of XHTML doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body,html{ height:100%; padding:0;margin:0; } <!-- force viewport to be height of browser window -->
</style>
</style>
</head>
<body>
<div style="background-color:gray;height:100%">
<div style="height:100px;background-color:red;"> First row </div>
<div style="height:100px;background-color:green"> Second row </div>
Final row
</div>
</body>
</html>
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
If they have done it right, any post made by CSS will be moved to this forum with a notation such as "See also ...", and any topic started by css will immediately be moved here. "Quarantine".
|
|
|
|
|
In.
Your.
Dreams.
------------------------------------
I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave
|
|
|
|
|
and, I am the first person to post in this thread and mean what I assume the forum means, cascading style sheets. How did we not have a forum for this before ?
Christian Graus
Driven to the arms of OSX by Vista.
Read my blog to find out how I've worked around bugs in Microsoft tools and frameworks.
|
|
|
|
|
Probably because it fell under web development.
Certainly when I had to make some enquiries on it that is where I went.
(OMG a serious Q and A!)
------------------------------------
I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave
|
|
|
|
|
I have to ask, why in the world do you hate CSS? I love it, though not in any amorous fashion, for the consistency it allows me when designing sites. Combining Master Pages with CSS provides so much more control over the visual effects than anything previously available that I can't imagine ever going back to inline styles.
"A Journey of a Thousand Rest Stops Begins with a Single Movement"
|
|
|
|
|
Because programming languages are consistently designed, and CSS appears to have been thrown together at random by a drunken sailor. And then it works in one browser and not another ( this is not the fault of CSS, I understand, but it's part of the overall nightmare )
Christian Graus
Driven to the arms of OSX by Vista.
Read my blog to find out how I've worked around bugs in Microsoft tools and frameworks.
|
|
|
|
|
Christian Graus wrote: How did we not have a forum for this before ?
I must have been drunk. This has been temporarily fixed.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
You mean the sobriety is momentary?
L u n a t i c F r i n g e
|
|
|
|
|
I am having trouble with CSS.
I can't decide if he is a twat or a C##t.
------------------------------------
I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave
|
|
|
|
|
Why does there have to be an OR involved?
i do believe there is something in the CSS specification that states it can be both at the same time.
|
|
|
|
|
#twat, #c__t
{
paranoia: 100%;
iq: 69;
}
I'd have made those apply to classes rather than ID's, but it's clear that CSS has no class. That's not a problem, however... elements can be stacked and nested. It's just a shame that they don't add up to much.
|
|
|
|
|
Dalek Dave wrote: I can't decide if he is a twat or a C##t.
Both!
Twunt!
|
|
|
|
|
That sir, is my new favorite word!
If the post was helpful, please vote, eh!
Current activities:
Book: Devils by Fyodor Dostoyevsky
Project: Hospital Automation, final stage
Learning: Image analysis, LINQ
Now and forever, defiant to the end.
What is Multiple Sclerosis[ ^]?
|
|
|
|
|
There is the possibility of some pleasure implied in both of those, no matter the pain required to get to it.
Opacity, the new Transparency.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
