Hello,
I have uploaded a test page on http://test.eezs.com/
The problem is that the content part of the page is not touching the bottom of the page.
I have run this site in FireFox and it displays the way I want it to display but in IE it wont work.
Thanks
If you need anything else such as css tell me I will post here.
Well... part of the problem may be using tables.... you may want to look into DIVS etc instead!
That aside... it will depend on whether you have applied a height to the HTML, Body and the TABLE of 100%.
IE and firefox you gotta love the way they dare to be different from each other in the way they set their margins and padding differently from each other, such individuals. Why tables? have you tried putting in the data cells that are not working the way you want them too. I'm just trying to help I'm more of a floater and positioner than a table man. I find with tables the constant repetitious HTML gives me a head ache. good luck
well the tables is not my concern as only reason I need it is so that I have somewhere i can put navigation which can be controlled easily rather then flying all over. The table is inside a div which whenever I set its height to 100% the scrollbar comes and you are actually able to move it up and down on a empty page.
okay...
Pleasedefine what you want the page to do.
I am assuming that Header at the top, then contents/nav and footer below the content/nav section.
so, are the content and nav to be seperate from each other, or is it to look like a single entity, and the white bg is to allways reach down and touch the footer?
If that is the case, try applying the background0image/styling the the container div, not the content div.
Taht said, if your Nav and Cotent are seperate from each other, and you are not clearing after the end and before the Cotent ends, then they will break out of the container in Mozilla.
As for tables isntead of Divs... it is a preferance, but with only a little effort, you can achieve exactlt the same result, but it will be a little more sensible to screen-readers.
this is the main html of the page with any tables:
<div id="header"><img src="images/head.gif" height="100"></div>
<div id="main">
<table class="content">
<tr>
<td rowspan="2" class="navi">
+++++++navi here+++++++++++++++
<td>
<td class="data">main content here+++++++
</td>
</tr>
<tr class="footer">
<td>++++++footer++++++td>
</tr>
</table>
</div>and the css for this is:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ABCDEF;
margin: 0px;
padding: 0px;
border: 0px;
height: 100%;
max-height: 100%;
}
#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
text-align: left;
background-color: #ABCDEF;
}
#main {
position: absolute;
top: 101px;
bottom: 0px;
right: 0px;
left: 0px;
}
#main .content {
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
#main .data {
vertical-align: top;
}
#main .footer {
vertical-align: bottom;
text-align: center;
color: #0099FF;
background-color: #FFFFFF;
border-top-width: thin;
border-top-color: #ABCDEF;
border-top-style: dotted;
}ok I want the nav and the content to look like a single identy which I was not able to do so with just divs and want footer, nav and main content touch the bottom of the page until there is more content on the page then that can be displayed on the screen.
if you say you can split up the nav and content and have them beside each other with same height regardless the content then please tell me.
You are asking for the impossible. It might fit YOUR browser, but the following items will change the final size of any page:
- Different video card screen resolutiuons
- Different browser window sizes
- Different browser base font
- Different font assortment available on computer
- Different VIEW menu font adjustments
- Different settings on what to do with oversize images
well the tables is not my concern as only reason I need it is so that I have somewhere i can put navigation which can be controlled easily rather then flying all over.
You can position div inside a div and float it or position it wherever you want. just use a universal class * to set the margin to 0 and the padding to 0. then you can set the divs individually where you want them. Almost like a table but with out the restrictions.
You are asking for the impossible. It might fit YOUR browser, but the following items will change the final size of any page:
All the things you mentioned are correct. its just that I expect the scrollbars to help me when the screen resolution gets small.
This is why the header image is 770 in width. so that there are less chances of getting a horizontal scroll bar.
You can position div inside a div and float it or position it wherever you want. just use a universal class * to set the margin to 0 and the padding to 0. then you can set the divs individually where you want them. Almost like a table but with out the restrictions.
I will try that see what happens.
...MidiMagic...
I think you "overead" into what he seems to want - a simple two column layout with Header and Footer... nothing complicated nor impossible with that.
...ashneet...
What you are asking for is possible... but it is fair easier, simplier and more reliable to "cheat".
Due to certain Browsers not following the guidelines, and others doing their own thing... things like "equal height columns" across all browsers are a pain.
So isntead,there are a couple of techniques... but "faux columns" is the most reliable.
This is basically makig a container that has a bg image, then two divs inside the container.
An alternative is to use the Ruthsarian layout... kind of Equal columns with some extras (though more complicated!).
So... simple version (try this one first!)
<div id="container">
<div id="content">
<div id="leftcol">
</div>
</div>
</div>
#container
{
float: left;
clear: both;
#zoom:1; /*IE Bug Fix */
}
#contents
{
margin-left: 200px;
}
#leftcol
{
margin: 0 -1px 0 -200px;
width: 200px;
float: left;
position: relative; /* IE Bug Fix */
#display: inline; /* IE Bug Fix */
}
Give that a go.
If you have a fixed width design, it is a simple case of applying the BG to the Container.
If it is fluid... then make 2 Containers (container1/container2), and make 2 iamges... one almost the fullwiddth of a normal resolution, with only one edge, the second make around the same size, but with the other edge on it... and apply a bit of padding.... so container1 has bg1 and padding-left 20px, container2 has the pther image, and is prevented from overlapping due to the paddig :)
Seriously - noe of it is complicated (one you figure the logic behind CSS)... and you can do a damn site more than with tables.
i have to agree with autocrat. Tables are for eating on.
Thanks autocrat that help me get rid of tables.
now the tables are gone but two issue still remain.
1) the container wont touch the bottom even when I set height to 100% - Ignorable issue.
2) the nav is not the same height as content.
I made the modifications at http://test.eezs.com
Arg - Validate man, Validate :)
That will show you a whole bunch of issues with the code...
Still, as you are willing to make the effort - so will I.
Keep an eye on her, I will paste you some code :)
Arg - Validate man, Validate :)
That will show you a whole bunch of issues with the code...
Still, as you are willing to make the effort - so will I.
Keep an eye on her, I will paste you some code :)
I validated the page all those errors are from yahoo pasting a small script at the end of the page. that should not cause any problems.
hmmm, must have forgotte html coding...
I thought things like <img> had to be either..
<img> </img> or <img /> ???
Still... here we go....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://test.eezs.com/ -->
<html>
<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="test_files/main.css" type=text/css rel=stylesheet>
<meta content="MSHTML 6.00.2900.3157" name=GENERATOR>
</head>
<body>
<!-- Header Section -->
<div id=header>
<img height=100 src="test_files/head.gif" />
</div>
<!-- Main Section -->
<div id="container">
<div id="content">
<div id="leftcol">
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
</div> <!-- leftcol -->
<p>
Test content goes here.
</p>
</div> <!-- content -->
<div id="contentfooter">
Content Footer content
</div> <!--contentfooter-->
<div class="clear"> </div>
</div> <!-- container -->
<!-- Footer Section -->
<div id="pagefooter">
Page Footer content
</div> <!--pagefooter-->
<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->
<script language="JavaScript" src="test_files/geov2_001.js"></SCRIPT>
<script language="javascript">geovisit();</SCRIPT>
<noscript>
<IMG height=1 alt=setstats src="test_files/visit.gif" width=1 border=0>
</noscript>
</body>
</html>
/* You didn't include HTML */
html
{
margin: 0;
padding: 0;
height: 100%;
/* Font-size set in PX will not Resize in IE! */
/* Instead, you could go for text-size: 75%; */
font-size: 11px;
/* helvetica goes before arial, as arial is the more common modern font */
font-family: helvetica, arial, sans-serif;
}
body
{
MARGIN: 0;
padding: 0;
height: 100%;
background-color: #abcdef;
}
#header
{
height: 100px;
background-color: #abcdef;
text-align: left;
float: left;
width: 100%;
}
#container
{
margin: 0;
padding: 0;
clear: both;
float: left;
width: 100%;
background-color: #ffffff;
min-width: 770px;
position: relative;
/* IE Bug Fix - # Hack may only work for IE 5/6 - 7 doesn't need it */
#zoom: 1;
}
#content
{
margin-left: 150px;
/* IE Bug Fix - prevents 3px Jog */
#display: inline-block;
}
#leftcol
{
float: left;
margin: 0 -1px 0 -150px;
padding: 0;
width: 150px;
background-color: #EEEEEE;
text-align: center;
/* IE Bug Fixes - # Hack may only work for IE 5/6 - 7 doesn't need it */
#display: inline; /* Stops IE implimenting the Double MArgin Float Bug */
#position: relative; /* Stops IE from botching negative placement */
}
#leftcol ul
{
/* Wheres the other value ??? you have three... which means T R B... no Left! */
margin: 5px;
padding: 0;
border: #cccccc 1px solid;
list-style: none;
background-color: #ffffff
}
#leftcol a, #leftcol a:visited
/* As there is no difference between a Link and a Visited:Link, you can put them together! */
{
margin: 0;
padding: 0;
color: #000000;
text-decoration: none;
display: block;
width: 138px;
vertical-align: bottom;
line-height: 2em;
}
/*
There really should be a difference when interacting with a Link.
This permits people to "know" that they are workig with a Link.
Though changing BG is okay... you may want to think about those with color-vision issues.
- Focus is used so that keyboard-users can use the "Tab Key".
- Active is used as IE doesn't work with Focus.
#leftcol a:active, #leftcol a:hover, #leftcol a:focus
{
background-color: #abcdef;
text-decoration: underline;
}
*/
#contentfooter
{
position: absolute;
bottom: 0;
left: 150px;
}
img
/* IE Bug Fix - Images in the markup withany space after results in a "gap" in IE */
{
display: block;
}
.clear
/* This is to handle floats being contained.
Thechnically, a float is no longer part of the normal document flow - so they can overlap!
By placing a div within the parent, after the floated children - and making it clear:both, it forces the parent to "stretch" :) */
{
clear: both;
font-size: 1px;
line-height: 1px;
}
p
{
margin: 0;
padding: 5px 0;
}
INPUT {
FONT-SIZE: 11px
}
.center {
TEXT-ALIGN: center
}
.center TABLE {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
.center DIV {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
.right {
TEXT-ALIGN: right
}
.right TABLE {
MARGIN-LEFT: auto; MARGIN-RIGHT: 0px
}
.right DIV {
MARGIN-LEFT: auto; MARGIN-RIGHT: 0px
}
FORM {
MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px
}
#error {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: left
}
#error .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-DECORATION: underline
}
#error UL {
FONT-WEIGHT: lighter; MARGIN: 0px auto; COLOR: #990000; LIST-STYLE-TYPE: square
}
#login {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#login .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#login TR {
VERTICAL-ALIGN: baseline
}
#login .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#login .forget {
FONT-SIZE: 10px; TEXT-ALIGN: left
}
#login .forget A:link {
COLOR: #ff0000; TEXT-DECORATION: none
}
#login .forget A:visited {
COLOR: #ff0000; TEXT-DECORATION: none
}
#active {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#active .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#active TR {
VERTICAL-ALIGN: baseline
}
#active .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#forget {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#forget .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#register {
FONT-SIZE: 11px; WIDTH: 618px; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
#register .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#register .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#register .note {
FONT-SIZE: 10px; COLOR: #ff0000
}
#register .school TR {
VERTICAL-ALIGN: baseline
}
#register .school {
BORDER-RIGHT: #cccccc 2px solid; TEXT-ALIGN: right
}
#register .teacher TR {
VERTICAL-ALIGN: baseline
}
#register .teacher {
BORDER-RIGHT: #cccccc 2px solid; TEXT-ALIGN: right
}
#class {
FONT-SIZE: 11px; WIDTH: 100%; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
#class .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-DECORATION: underline
}
#class .add {
FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
Okay - I've only done those that needed doing to get the layout correct.
Please pay attention...
1) You have a habbit of the last bit of CSS for each ID not having a closing ; - which means MozFFwill have issues!
2) You should make things in "lowercase" whenapply them... so not FONT-SIZE, but font-size!
3) In "most" cases, instead of using Padding-top/padding-right/padding-bottom/padding-left... try just padding: 0 0 0 0;!
4) Similarly - try to follow the order of Top-Right-Bottom-Left... even when doing a line each!
5) Also note that "0" does not ahave a measurement unit... so it is 0, not 0px :)
6) For somethings, making similar entries are not needed - such as you ahving no difference between Lik and Lik:visited... so you can put them together (see CSS).
Still.... you are making the effort, and the above should help.
Keep it up, you've already made some headway, and some of the commetns should help you get over the more annoyig bugs!
hey autocrat my website is having problems, can you code the whole thing for me too? just kidding.
Thanks a lot autocrat.
I will fix them up as soon as I can.
btw how do you know how to fix bugs in ie...
well I have fixed the layout for now will fix rest of the css later.
is ther any way to get the nav to be same size as the content unless there is more stuff in nav then content is the same size as nav.
^sorry for lousy wording; cant think of any way to explain this :D
so far I have tried to set min-height and height to 100% but there is no effect.
well anyway I changed the css and is now working on the test web.
looks like my last post bugged now I tried posting it again and my last one is now there.. so its all good.
... Dsiembab ...
ROFLMFAO :D
Still - It took me more than 6 Months straight learning from HTML and sodding Tables to XHTML and pure CSS - and the bugs drove me mad...
so if I see someone who is not lazy and willing to make the shift up on learnig, then I will do alittle to give them a leg up.
I put a few questions on here, webdev... even sitepoint (which I personally do not recomend).
Only fair a return the favour...
And havig an example like that to refer to is always a big help!
... ashneet ...
Not a problem - you seem willing to learn - so I'm willing to help, plus you ever asked me to do it,
"ask for, don't get; don't ask, don't want"
- one of my Mothers many odd and completely insensical sayings :) )
Let us know if it helps/works etc.
As for the Bugs, a lot of trial and error and research and swearing profusely because peolpe describe bugs differently :)
I myself am not keen, but will use a Hack if I have to, and to be honest, I'd rather use IE only hacks and a little invalid css than either ignore the most prominent browser and uset clients, or use umpteen style sheets (makes it nigh on impossible to alter later on!).
How can I get nav height to be same as the content.
I have tried many ways but they dont work.
Try this:
<html>
<head>
<title>Nav & Content</title>
<style type="text/css">
.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0px; border: none; padding: 0px;}
.wfl {width: 100%;}
.wlf {width: 33%; margin: 0px; border: none; padding: 0px; float: left;}
.wrt {width: 66%; margin: 0px; border: none; padding: 0px; float: left;}
img {padding: 12px;}
body {background-color: #ccffcc; padding: 5%;}
</style>
</head>
<body>
<div class="wfl">
<div class="wlf">Navigate 1</div>
<div class="wrt">Content 1</div>
</div>
<div class="wfl">
<div class="wlf">Navigate 2</div>
<div class="wrt">Content 2</div>
</div>
<div class="wfl">
<div class="wlf">Navigate 3</div>
<div class="wrt">Content 3</div>
</div>
<div class="wfl">
<div class="wlf">Navigate 4</div>
<div class="wrt">Content 4</div>
</div>
</body>
</html>Thanks MidiMagic,
but that wont work. since I dont have multiple navigation and contents. I just have 1 content box and one navigation box. basically using php I will be modifying the contents of the navigation and content box.
I think I figured it out but it may cause some trouble.
I made this change to css:
#leftcol {
float: left;
top: 0;
bottom: 0;
margin: 0 -1px 0 -150px;
padding: 0;
width: 150px;
background-color: #EEEEEE;
text-align: center;
/* IE Bug Fixes - # Hack may only work for IE 5/6 - 7 doesn't need it */
#display: inline; /* Stops IE implimenting the Double MArgin Float Bug */
#position: relative; /* Stops IE from botching negative placement */
position: absolute;
}is is alright to have two positions. since I am not sure as other one is a IE hack.
As far as I know, it isn't really possible.
There are waysto make it look that way (e.g. altering the BG image as I mentioned earlier?)... but otherwise no.
By putting in two positions like that, and in that order, it will take the last one only - that being :absolute.
Also, if I apply absolute to the leftcol, it just positions itself to the top left of the screen ?!?
regarding "height"
CSS "inherits", and "cascades".
If you have two items, outer and inner... and apply height 50% to each, thenthe outer will be50% of the screen, the inner wil be 50% of the outer.
If you only apply height 50% to the inner, and no height (or auto) to the outer, then it should not do anything, as it has no parent-height to refer to (if that makes sesnse - it has to way to tell how tall it should be!)
I understand what you mean its just the when I set height 100% for the container the page gets too big and the scroll bar comes even if there is no content in the page.
Why display a scroll bar when you are not suppose to see it.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.