CSS Formatting issue

[driveflexfuel]

I am working on a css design but I am having issues with the following design


CSS

#enclosure {
    height: 150px;
    width: 668px;
    overflow: auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    border: 1px solid #566F8E;
}

HTML

<div id="enclosure">

<table width=100%>
Bunch of rows
</table>

</div>

The content in the table is generated in a php script so i can not live without the table.

The issue is this code needs to work in all browsers and currently only works in FF. In FF the table adjusts to the width of having a scrollbar but in IE it does not and a horizontal scrollbar appears. Is there a hack or somthing i can use to prevent this.

 

[DefecTalisman]

If its a hack you looking for then do this

#enclosure {
 ...
	overflow-x:hidden;
	overflow-y:scroll;
 ...
}

 

[driveflexfuel]

That is only going to work to get rid of the horizontal scroll bar what about the content aligned right in the table that is cut off by the vertical scrollbar. If I add in a 18 px margin it looks bad.

 

[DefecTalisman]

hmm... funny, works for me in FF 3.0.14, IE 7.0.6001, GC 3.0.195.27, Opera 9.64. The vertical scroll bar doesn't cut off anything.

 

[driveflexfuel]

It works in the older versions of IE but not in IE8


I guess IE8 screwed up all kinds of functions. I have to completely redo some of my php because if the <td></td> is blank the css will not create the border it simply leaves it out. I have to enter & &nbsp; into every blank field. Which sadly means a foreach statement to check for any blank database entries.


I HATE M$ Coders

 

[misson]

You can use the empty-cells CSS property to put a border around empty cells. <= IE 7 don't support it, but it sounds like that isn't an issue.

What doctype are you using?

A hackish way of doing it is to set a right padding that's the width of the scrollbar along with the overflow-x property:

<!--[if lte IE 7]>
<style type="text/css">
.enclosure {
  overflow-x: hidden;
  padding-right: 16px;
}
</style>
<![endif]-->

 

[driveflexfuel]

You can use the empty-cells CSS property to put a border around empty cells. <= IE 7 don't support it, but it sounds like that isn't an issue.

What doctype are you using?

A hackish way of doing it is to set a right padding that's the width of the scrollbar along with the overflow-x property:

<!--[if lte IE 7]>
<style type="text/css">
.enclosure {
  overflow-x: hidden;
  padding-right: 16px;
}
</style>
<![endif]-->

I am using a .php file. I knew about the fix you listed above but if i use it in FF or any other browser i get a 16 pixel padding on the right also with IE8 it is 18px to be exact lol.

The content that loads into the div has alternating row colors so it does not look right unless it reaches the right. On the far right of the table there are several buttons for adjusting the database entries. I am thinking of using an I frame to load the content. I have always hated iframes but it is an easy solution to my problem.

 

[misson]

Did you notice the conditional comments to target <= IE 7? No mussing up presentation in FF, Safari, Chrome, Opera or what-have-you.