css not working in IE

[ashneet]

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.

[autocrat]

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%.

[Dsiembab]

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

[ashneet]

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.

[autocrat]

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.

[ashneet]

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.

[MidiMagic]

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

[Dsiembab]

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.

[ashneet]

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.

[ashneet]

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.

[autocrat]

...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!)

#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.

[Dsiembab]

i have to agree with autocrat. Tables are for eating on.

[ashneet]

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

[autocrat]

Arg - Validate man, Validate :)

http://validator.w3.org

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 :)

[ashneet]

Arg - Validate man, Validate :) http://validator.w3.org 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.

[autocrat]

hmmm, must have forgotte html coding...
I thought things like had to be either..
or ???

Still... here we go....

[autocrat]

Link


Link


Link


Link


Link


Link


Link


Link

Test content goes here.

Content Footer content

 

Page Footer content

[autocrat]

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!

[Dsiembab]

hey autocrat my website is having problems, can you code the whole thing for me too? just kidding.

[ashneet]

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...