Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How do I set the width of a table cell in IE 7+

Posted on 2011-05-05
7
Medium Priority
?
305 Views
Last Modified: 2012-05-11
I have created a table to summarize data for a report. The report specifies that the data must be in a table. There is a lot of data so I have set specific table widths for the cells with more content. The formatting works fine in Chrome and in Firefox, but I.E completely ignores the width reference. Why?

Below I will attach the Code for one table with my styles as well.
<html>
<head>


<style type="text/css">
body{background-color:#FFF}
p{color:#000}

table.prePro 
{
	background-color:#F5F5F5;
	width:1000;
	border-color:#000;
	border-style:solid;
	border-width:1px;
	padding:3;

}

td.prePro
{
	font-size:8pt;
	text-align: inherit;
	font-family: Verdana, Geneva, sans-serif;
    background-color:#FFF;
    color:#000;
	border-color:#333;
    border-style:solid;
    border-width:1px;
	padding:10px; margin:10px;
	   
}
	
ul.prePro
{	
list-style:none;
margin-left:-25px;
}

tfoot.prePro
{
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:10pt;
	text-align:center;
	color:#000;
}

th.prePro 
{
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:11pt;
	color:#000;
}

th.prePro a {
	color:#000;
}

th.prePro a:hover {
	color:#03F;
	
}
</style>
</head>

<body>


<table class="prePro" width="1000px" align="center" >

<thead style="width:1000px"> 
<th class="prePro" colspan="1000">
 
<a href=" http://sctnet.sunway.edu.my/"> School of Computer Technology at Sunway University </a>
</th>   

<tfoot class="prePro"  width="1000px" align="center" >
    <td colspan="1000"> The buttons are easy to locate, descriptive, and nicely presented. The pictures in the slideshow are big and the text descriptions contrast the background well. The web page is longer than it is wide, and most users will miss the Events and Activities form because it is positions so low in the page. </td>
<td width="0"></tfoot>
	
    <tbody>
		<tr align="center" >
			<td class="prePro" width="94">Horizontal Menu Bar</td>
			<td class="prePro" width="114">Drop Down/Pop Up Menu</td>
			<td width="77" class="prePro" >Sliding Menus</td>
			<td width="92" class="prePro" >Logo </td>
			<td width="85" class="prePro" >Colour Scheme</td>
            <td class="prePro" width="320">Main Content</td>
		</tr>
		<tr>
			<td class="prePro" width="94">
            <ul class="prePro">
            <li> <b>Home </b> </li> 
            <li> <b>Programmes</b> </li>
            <li> <b>Research</b> </li>
            <li> <b>Staff</b> </li>
            <li> <b>Students</b> </li> 
            <li> <b>Resources</b> </li> 
			<li> <b>News</b> </li>
            <li> <b>Events</b> </li>
            <li> <b>Showcase</b> </li>
            <li> <b>About</b> </li>
            <li> <b>Links</b> </li>
            </ul>
            </td>
			
            <td class="prePro" width="114">
            <ul class="prePro">
            <li> <b> Programmes:</b> <u>Drop Down Menu to:</u> 
					post graduate, undergraduate bachelor,  			
                    undergraduate diploma 
            </li>
             	<li> <b> Research: </b> <u>Drop Down Menu to:</u> 
					Industry Collaboration , Research Groups, 	
                    Collaboration Opportunity            
             	</li>
            <li> <b> Staff: </b> <u>Drop Down Menu to:</u> 
					Management, Academic, Administrative            
            </li>
                
                <li> <b> Students:  </b> <u>Drop Down Menu to:</u> 
					Internship, First Year Project, Testimonials, SCT 		
                    Student Council            
             	</li>
            <li> <b> Resources:  </b> <u>Drop Down Menu to:</u> 
					Academic, Timetable , Download Forms          
            </li>
             	<li> <b> News & Events: </b> <u>Drop Down Menu to:</u> 
                Job Centre, Workshops, Request Interns 
             	</li>
             <li> <b> About: </b> <u>Drop Down Menu to:</u> 
                Contact Us, Vision & Mission, Recruitment
             </li>
            </ul>
            </td>
            
			<td class="prePro" >
            <ul class="prePro">
            <li> <b> Research:</b>   Drop Down - <i>Industry 
            Collaboration:</i> <u> horizontal slide to</u> CCC Lab </li>
            
             <li> <b> Research:</b>   Drop Down - <i>Research Groups:</i> <u> 
             horizontal slide to</u> Intelligent Systems Robotics </li>
            
			<li> <b> Research:</b>   Drop Down - <i>Timetable:</i> <u> 
             horizontal slide to</u> Class, Lecturer, Exam </li>            
            </ul>
            </td>
            
			<td class="prePro" >
            A combination logo resides in the banner representing Sunway 
            University, followed to the right by a letter mark logo for the School 		    of Computer Technology. Both logos link the home page of the School of 			Computer Technology 
            </td>
			
            <td class="prePro" >
            The banner is blue, the font is white, and light blue throughout the 
            webpage, the background is turquoise,  and the forms are either dark 
            green or white. The three main colours in use are blue, green and 
            white
            </td>
            
            <td class="prePro" width="320">
            <ul class="prePro">
        <li> A JavaScript slideshow sits at the top of the main content area and 				
        	includes photographs and text descriptions advertising  the School of 			
        	Computer Technology <br/> </li>
		
        <li> <br/> A  JavaScript Form sits below the slideshow and is split into 3 		        	columns describing announcements, events and news. <br/> </li>
	
    	<li> <br/> The user can rearrange the placement of the slideshow and text 
            form by selecting dragging up and down with the mouse. <br/> </li>
		
        <li> <br/> An events and Activities form sits below everything and is 		
           organized in a table with photographs, short descriptions of each 	
           event, and links to more information.<br/> </li>
           </ul>

            </td>
		</tr>
	 </tbody>  
</table>
</body>
</html>

Open in new window

0
Comment
Question by:Black-Scout
  • 3
  • 3
7 Comments
 
LVL 2

Expert Comment

by:seanyc111
ID: 35698253
I.E is brutal and should't be used anymore! but it is! so maybe set an overall width for a table and use tables within tables. or could be got to do with css compatibility you could try it with basic html.
hope i helped
0
 

Author Comment

by:Black-Scout
ID: 35698636
I tried nesting the table within a DIV, and setting the absolute positioning of the DIV, along with Width and Height. Still the table formatting is messed up when I preview in I.E.

I don't understand it. I did a little searching on the internet and I noticed a couple people mention that there is a bug in I.E 7 that is concerned with table widths and setting the colspan property. I haven't found a work around yet.
0
 
LVL 3

Expert Comment

by:eugenbv
ID: 35698696
Your problem is having colspan set to 1000 for the 'th' element and for the bottom row (tfoot/td).
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Black-Scout
ID: 35698764
If I remove that my table head only takes up one cell, how can I stretch the table header, and footer the width of the entire table without using the colspan property?

Thanks for the suggestion
0
 
LVL 3

Expert Comment

by:eugenbv
ID: 35698776
Setting the colspan to 6 in both cases should do the trick.
Also try not to use the same name for td class 'prePro' and for the li. It messes up with your padding.
0
 
LVL 3

Accepted Solution

by:
eugenbv earned 2000 total points
ID: 35698811
here's the fix
<html>
<head>


<style type="text/css">
body{background-color:#FFF}
p{color:#000}

table.prePro 
{
	background-color:#F5F5F5;
	width:1000;
	border-color:#000;
	border-style:solid;
	border-width:1px;
	padding:3;

}

td.prePro
{
	font-size:8pt;
	text-align: inherit;
	font-family: Verdana, Geneva, sans-serif;
    background-color:#FFF;
    color:#000;
	border-color:#333;
    border-style:solid;
    border-width:1px;
	padding:10px; margin:10px;
	   
}
	
ul
{	
list-style:none;
margin: 0;
/*margin-left:-25px;*/
}

tfoot.prePro
{
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:10pt;
	text-align:center;
	color:#000;
}

th.prePro 
{
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:11pt;
	color:#000;
}

th.prePro a {
	color:#000;
}

th.prePro a:hover {
	color:#03F;
	
}
</style>
</head>

<body>


<table class="prePro" width="1000px" align="center" >

<thead style="width:1000px"> 
<th class="prePro" colspan="6">
 
<a href=" http://sctnet.sunway.edu.my/"> School of Computer Technology at Sunway University </a>
</th>   

<tfoot class="prePro"  width="1000px" align="center" >
    <td colspan="6"> The buttons are easy to locate, descriptive, and nicely presented. The pictures in the slideshow are big and the text descriptions contrast the background well. The web page is longer than it is wide, and most users will miss the Events and Activities form because it is positions so low in the page. </td>
<td width="0"></tfoot>
	
    <tbody>
		<tr align="center" >
			<td class="prePro" width="94">Horizontal Menu Bar</td>
			<td class="prePro" width="114">Drop Down/Pop Up Menu</td>
			<td width="77" class="prePro" >Sliding Menus</td>
			<td width="92" class="prePro" >Logo </td>
			<td width="85" class="prePro" >Colour Scheme</td>
            <td class="prePro" width="320">Main Content</td>
		</tr>
		<tr>
			<td class="prePro" width="94">
            <ul class="prePro">
            <li> <b>Home </b> </li> 
            <li> <b>Programmes</b> </li>
            <li> <b>Research</b> </li>
            <li> <b>Staff</b> </li>
            <li> <b>Students</b> </li> 
            <li> <b>Resources</b> </li> 
			<li> <b>News</b> </li>
            <li> <b>Events</b> </li>
            <li> <b>Showcase</b> </li>
            <li> <b>About</b> </li>
            <li> <b>Links</b> </li>
            </ul>
            </td>
			
            <td class="prePro" width="114">
            <ul class="prePro">
            <li> <b> Programmes:</b> <u>Drop Down Menu to:</u> 
					post graduate, undergraduate bachelor,  			
                    undergraduate diploma 
            </li>
             	<li> <b> Research: </b> <u>Drop Down Menu to:</u> 
					Industry Collaboration , Research Groups, 	
                    Collaboration Opportunity            
             	</li>
            <li> <b> Staff: </b> <u>Drop Down Menu to:</u> 
					Management, Academic, Administrative            
            </li>
                
                <li> <b> Students:  </b> <u>Drop Down Menu to:</u> 
					Internship, First Year Project, Testimonials, SCT 		
                    Student Council            
             	</li>
            <li> <b> Resources:  </b> <u>Drop Down Menu to:</u> 
					Academic, Timetable , Download Forms          
            </li>
             	<li> <b> News & Events: </b> <u>Drop Down Menu to:</u> 
                Job Centre, Workshops, Request Interns 
             	</li>
             <li> <b> About: </b> <u>Drop Down Menu to:</u> 
                Contact Us, Vision & Mission, Recruitment
             </li>
            </ul>
            </td>
            
			<td class="prePro" >
            <ul class="prePro">
            <li> <b> Research:</b>   Drop Down - <i>Industry 
            Collaboration:</i> <u> horizontal slide to</u> CCC Lab </li>
            
             <li> <b> Research:</b>   Drop Down - <i>Research Groups:</i> <u> 
             horizontal slide to</u> Intelligent Systems Robotics </li>
            
			<li> <b> Research:</b>   Drop Down - <i>Timetable:</i> <u> 
             horizontal slide to</u> Class, Lecturer, Exam </li>            
            </ul>
            </td>
            
			<td class="prePro" >
            A combination logo resides in the banner representing Sunway 
            University, followed to the right by a letter mark logo for the School 		    of Computer Technology. Both logos link the home page of the School of 			Computer Technology 
            </td>
			
            <td class="prePro" >
            The banner is blue, the font is white, and light blue throughout the 
            webpage, the background is turquoise,  and the forms are either dark 
            green or white. The three main colours in use are blue, green and 
            white
            </td>
            
            <td class="prePro" width="320">
            <ul class="prePro">
        <li> A JavaScript slideshow sits at the top of the main content area and 				
        	includes photographs and text descriptions advertising  the School of 			
        	Computer Technology <br/> </li>
		
        <li> <br/> A  JavaScript Form sits below the slideshow and is split into 3 		        	columns describing announcements, events and news. <br/> </li>
	
    	<li> <br/> The user can rearrange the placement of the slideshow and text 
            form by selecting dragging up and down with the mouse. <br/> </li>
		
        <li> <br/> An events and Activities form sits below everything and is 		
           organized in a table with photographs, short descriptions of each 	
           event, and links to more information.<br/> </li>
           </ul>

            </td>
		</tr>
	 </tbody>  
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:Black-Scout
ID: 35698880
Thank you, such a simple fix. I got stuck because the formatting error only occurs in I.E.

Thanks again.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question