|
FYI, CSS1 didn't really support tables well. However, CSS2 has rectified that. You could have applied styles to the td elements using class attributes. Thus, you could alternate text alignment just by changing the class attribute.
"We make a living by what we get, we make a life by what we give." --Winston Churchill
|
|
|
|
|
True,
Therefore I would make one class for my data label cells and one for the data cells, which would make it clear to anyone looking at my HTML code what was being displayed in each type of column. But the point of my comment was that it would take as much typing to say align="right" in the label cell's td tags and nothing in the data cell tags as it would to create the classes and use them. The intent of my page is to display and change the dynamic HTML attributes so I can see how they work, so self-documenting isn't that important to me in this page. However, the lessons learned about using CSS classes on different tag items is. 
Thanks again.
|
|
|
|
|
i found something strange in the IE with the javascript
and here is the case:
open this code with firefox and you shall see this character: (<)
and then try it on IE and you will see nothing.
the ie (i think) doesn't know this hexa, if you change it to other like 0x003A ,B or D...it will work fine...but not C
--------------------------------------------------------------------------------------
<html>
<head>
</head>
<body>
<div id="test">123</div>
<script language="javascript1.2" type="text/javascript">
document.getElementById("test").innerHTML = String.fromCharCode("0x003C");
</script>
</body>
</html>
----------------------------------------------------------------
why? and what is the solution?
Faris Madi
Nothing Comes Easy (N.C.E.)
|
|
|
|
|
too close to W3c?
Brad
Australian
"Keyboard? Ha! I throw magnets over the RAM chips!" - peterchen
|
|
|
|
|
what you mean too close
Faris Madi
Nothing Comes Easy (N.C.E.)
|
|
|
|
|
That was a joke,
the W3c (World Wide Web Consortium) are the people who set the standards for many web protocols (such as html etc.).
As you may have noticed, IE seems to have a thing for not doing what they say.
Brad
Australian
"Keyboard? Ha! I throw magnets over the RAM chips!" - peterchen
|
|
|
|
|
Bradml wrote: As you may have noticed, IE seems to have a thing for not doing what they say.
Cross browser compatability is like trying to heard cats! They all have a different agenda.
I'm on-line therefore I am.
JimmyRopes
|
|
|
|
|
You are putting illegal html code in the innerHTML property. The browser may choose to handle this error any way that it likes. IE chooses to ignore the broken code, while Firefox chooses to convert it to plain text.
---
It's amazing to see how much work some people will go through just to avoid a little bit of work.
|
|
|
|
|
if this is an illegal code...
so how can be this code run on IE:
document.getElementById("test").innerHTML = String.fromCharCode("0x003D");
and this is not:
document.getElementById("test").innerHTML = String.fromCharCode("0x003C");
????
Faris Madi
Nothing Comes Easy (N.C.E.)
|
|
|
|
|
Because "=" is valid html, and "<" is not.
---
It's amazing to see how much work some people will go through just to avoid a little bit of work.
|
|
|
|
|
I get it.
i made and escape function that comverts the illegal characters to other format like & to & ..etc
Faris Madi
Nothing Comes Easy (N.C.E.)
|
|
|
|
|
I'm sure this question has been asked a million times, but it's new to me since I haven't done any web development lately.
Anyway, does anyone know of a good CSS compliant way of having a real footer (ie, doesn't overlap the content) on a web page that works on all browsers including Opera?
On Firefox using divs makes the document overlap and using tables don't seem to do anything at all. I'm starting to feel like a dinosaur here.
And, I just have to get this off my chest.  This used to be so easy in HTML. Sure, there wasn't standardized way, but it worked in all browsers minus a few quirks. This XHTML thing seems to be a case one step forward and two steps back.
|
|
|
|
|
Hey Jeremy,
There are a couple of ways to do this. It really depends on how the page is structured. If you have a page that just flows (like standard html) then you simple place a div at the base of the document containing the footers.
This works fine for basic layouts, but other times you are going to need to have it positioned as part of the layout. The next method applies if you are using the "position:absolute" (or its subs) css... thing. You have to build the footer into the page. This can be really annoying but you have to position the rest of your divs so that they take into account that the footer is there. (Just btw to position something on the bottom use this: "position:absolute; bottom:0px;").
There are many other ways of doing this, but without seeing how you structure your code I could only offer abstract advice.
And as for your remarks about Xhtml, it is not the problem we are all facing. The main difference we face with Xhtml is that we have to be more careful with nested tags. CSS is the real problem as we are not able to create a single style sheet that is cross browser without spending many hours testing and using obscure hacks that mean we have to go back next time a browser is released and completely re-write that back of the sheet.
Web development has hit a dark patch as standardization is far from being obtained, and people still continue to use older browsers that we have to compensate for.
The only way standardization will be achieved is if web masters decide to shun no compliant agents (which will never happen). So I've been toying with a new web protocol that will serve exclusively to compliant agents (not that it will ever take off).
Ok well I hope that the answer to your question is somewhere in there,
Regards,
Brad
Brad
Australian
"Keyboard? Ha! I throw magnets over the RAM chips!" - peterchen
|
|
|
|
|
Howdy.
The problem I faced with absolute positioning is it will overlap the other divs when the browser is resized small enough. Also, the main reason I say it's XHTML that's driving me crazy is that it enforces the rule about not caring for the height attrib to a table whereas in HTML you could take advantage of that if CSS wasn't playing fair.
Anywho, seeing that I speak HTML better than XHTML, lemme show you the layout I'm going for with the old school way of things...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2" valign="bottom">5</td>
</tr>
</table>
</body>
</html>
Basically I always want cell 5 to act as the footer on the bottom but also have it never overlap. TIA btw.
|
|
|
|
|
Jeremy Falcon wrote: Also, the main reason I say it's XHTML that's driving me crazy is that it enforces the rule about not caring for the height attrib to a table whereas in HTML you could take advantage of that if CSS wasn't playing fair.
The table tag doesn't have a height attribute at all, it never has and it never will. It's only Internet Explorer that thinks that it has.
The reason that Internet Explorer ignores the heigth attribute when you are using XHTML, is that then it tries to follow the standards and treats it correctly.
---
It's amazing to see how much work some people will go through just to avoid a little bit of work.
|
|
|
|
|
Guffa wrote: The table tag doesn't have a height attribute at all, it never has and it never will. It's only Internet Explorer that thinks that it has.
I never said it was. For that matter, every browser in the world still reads the height attribute for tables in quirk-mode for HTML rendering, this is not just for IE. My point was XHTML is more strict and thus it won't allow it but you always could in HTML even if it wasn't a standard. The only real problem was the calculations different browsers used to determine the final height.
Guffa wrote: The reason that Internet Explorer ignores the heigth attribute when you are using XHTML, is that then it tries to follow the standards and treats it correctly.
Thanks for the reply, but I think most people that can get past "beginner's XHTML" already know this.
When standardizing XHTML, the geniuses behind it should've realized HTML was never used for what it was intended by the time it got popular. Its usage evolved and as such, core functionality should have done so too. Instead, when making a standard they take something that used to be simple and wipe it away - never mind the fact that CSS can really suck at times when it comes to positioning and compatibility.
|
|
|
|
|
Going back to your layout problem, could you post your current source so I could play around with it and see if I can get what you want?
Brad
Australian
"Keyboard? Ha! I throw magnets over the RAM chips!" - peterchen
|
|
|
|
|
What I have is based on this:
http://scott.sauyet.com/CSS/Demo/FooterDemo1.html[^]
One thing I've noticed that in FF now there's padding at the top with this "solution" (set on purpose) but once it's removed then the footer starts acting weird. If you figure something out that would be awesome, but of course I'd like to know why your changes work, etc. Ya know me, I want to learn from it. 
I just don't see how something as simple as a footer was overlooked when setting a new standard. 
TIA btw man.
|
|
|
|
|
Hey Jeremy.
I'm sorry for the lateness of this reply but I have been flat out the past couple days.
Anyway I took a look and the page there and quickly reconstucted it so i could make sure i knew exactly what it was doing (PS. The footer breaks in Dreamweaver!).
Ok here is the CSS:
<style type="text/css">
<!--
html, body, #container {
min-height: 100%;
width: 100%;
height: 100%;
}
html>body, html>body #container{
height:auto;
}
body{
font-family:Arial, Helvetica, sans-serif;
margin:0;
}
#container{
position:absolute;
top:0px;
left:0px;
}
#footer{
position:absolute;
left:0px;
bottom:0px;
width:100%;
background-color:#FFFF00;
border:0px;
padding:0px;
}
#content{
margin-bottom: 4em;
height: auto;
padding: .5em;
}
-->
</style>
So that is pretty much how that all works...
This page is an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page with Footer!</title>
<style type="text/css">
<!--
html, body, #container {
min-height: 100%;
width: 100%;
height: 100%;
}
html>body, html>body #container{
height:auto;
}
body{
font-family:Arial, Helvetica, sans-serif;
margin:0;
}
#container{
position:absolute;
top:0px;
left:0px;
}
#footer{
position:absolute;
left:0px;
bottom:0px;
width:100%;
background-color:#FFFF00;
border-top:2em;
height:auto;
}
#content{
margin-bottom: 4em;
height: auto;
padding: .5em;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="content">
This is page content.
It could contain many many many lines of code!
<br />
This is even more content!<br />
And so is this!!
</div>
<div id="footer">
This is a footer!!! <i>Brads amazing facts #451254</i>
<br />
More!!
</div>
</div>
</body>
</html>
I wonder if I should consider writing an article on this sort of thing....
What do you think?
-- modified at 11:46 Monday 18th December, 2006
Brad
Australian
"Keyboard? Ha! I throw magnets over the RAM chips!" - peterchen
|
|
|
|
|
Bradml wrote: I'm sorry for the lateness of this reply but I have been flat out the past couple days.
Now you're gonna make me feel guilty. I understand people gotta have a life. I'm just glad for the free help. No worries man.
|
|
|
|
|
Grrr. I have a new mouse with all these weird buttons that apparently submitted my other post too soon. Anyway...
Bradml wrote: This page is an example:
I opened your example up on FF 2.0 (Windows) and the footer still wasn't at the bottom of the page.
Bradml wrote: I wonder if I should consider writing an article on this sort of thing....
What do you think?
I think it would be useful if we found something that works. After searching Google forever, there's a lot of people wondering the same thing as I - that I've seen anyway.
Most of the solutions I've run across never worked for all major browsers.
|
|
|
|
|
I tested in ff2.
Let me double check the source.
Brad
Australian
"Keyboard? Ha! I throw magnets over the RAM chips!" - peterchen
|
|
|
|
|
No I checked again and it definitely worked.
Did you copy ALL the source for that page?
especially:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
If that doesn't work then take a screen shot of what it looks like and send it to me by email.
Also include:
Screen shot of the help>about Mozilla Firefox
and a complete copy of the source you are using in a text file.
Brad
Australian
"Keyboard? Ha! I throw magnets over the RAM chips!" - peterchen
|
|
|
|
|
I think we have a misunderstanding here. Let me try and be more clear about what I mean.
I'm looking for a footer that's always at the bottom of the viewport, not the document. That is to say, if there's not a lot of data/content on the page it will still be at the bottom. The version you sent me only keeps the footer at the bottom if the document contains a lot of data.
I can send you a mock-up of what I'm talking about if you want. Maybe that's the best way to make sure we're talking apples to apples.
Thanks again.
|
|
|
|
|
Oh, and even though the footer is at the bottom of the viewport, I don't ever want it to overlap content on the website.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
