HTML and CSS

css not working in IE

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

Last »

•

Join Date: Jun 2005

Posts: 147

Reputation: ashneet is an unknown quantity at this point

Solved Threads: 1

ashneet

Offline

Junior Poster

css not working in IE

Aug 13th, 2007

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.

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: css not working in IE

Aug 15th, 2007

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

•

Join Date: Mar 2007

Posts: 156

Reputation: Dsiembab is an unknown quantity at this point

Solved Threads: 2

Dsiembab

Offline

Junior Poster

Re: css not working in IE

Aug 15th, 2007

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

current personal projects The H8ers Club

•

Join Date: Jun 2005

Posts: 147

Reputation: ashneet is an unknown quantity at this point

Solved Threads: 1

ashneet

Offline

Junior Poster

Re: css not working in IE

Aug 15th, 2007

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.

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: css not working in IE

Aug 15th, 2007

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.

•

Join Date: Jun 2005

Posts: 147

Reputation: ashneet is an unknown quantity at this point

Solved Threads: 1

ashneet

Offline

Junior Poster

Re: css not working in IE

Aug 15th, 2007

this is the main html of the page with any tables:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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.

Last edited by ashneet; Aug 15th, 2007 at 9:16 pm.

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: css not working in IE

Aug 16th, 2007

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

Last edited by MidiMagic; Aug 16th, 2007 at 2:13 am.

Daylight-saving time uses more gasoline

•

Join Date: Mar 2007

Posts: 156

Reputation: Dsiembab is an unknown quantity at this point

Solved Threads: 2

Dsiembab

Offline

Junior Poster

Re: css not working in IE

Aug 16th, 2007

•

Originally Posted by 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.

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.

current personal projects The H8ers Club

•

Join Date: Jun 2005

Posts: 147

Reputation: ashneet is an unknown quantity at this point

Solved Threads: 1

ashneet

Offline

Junior Poster

Re: css not working in IE

Aug 16th, 2007

•

Originally Posted by MidiMagic

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.

•

Join Date: Jun 2005

Posts: 147

Reputation: ashneet is an unknown quantity at this point

Solved Threads: 1

ashneet

Offline

Junior Poster

Re: css not working in IE

#10

Aug 16th, 2007

•

Originally Posted by Dsiembab

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.