Problem with table width inside DIV

http://www.scic.com/mypage
Login with
uid: demo
pwd: demo


Click on ExpandAll for All sections, My Archive, My Courses, and My Dues. Look at the tables in the MyDues section.
I can't for the life of me get that thing to size correctly.

What am I doing wrong?
LVL 26
Eddie ShipmanAll-around developerAsked:
Who is Participating?
 
MacAnthonyConnect With a Mentor Commented:
It's the button div that's forcing it to go outside of the bounds. You could either apply table-layout: fixed to the table or override the formatting of the paynowbtn class:

.paynowbtn {
  background: url("../images/paynowbtn.png") no-repeat scroll 0 0 transparent;
  height: 34px;
  margin-left: 65px;   <--- causing issues
  position: relative;
  width: 300px;   <--- causing issues
}

Open in new window

0
 
Jesus RodriguezIT ManagerCommented:
Try to right justify the text on the sections and will be easy for you, HWen the number gets bigger then will be right justify and will show any way.
0
 
Jesus RodriguezConnect With a Mentor IT ManagerCommented:
Also I see that the Table With under this section

<div class="home-services clearfix">
<table width="260" border="0" cellSpacing="0" cellPadding="3">

Is fixed to 260px, check if you can let it with 100% the table width or set it up for a width less or equal to this one
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Eddie ShipmanAll-around developerAuthor Commented:
Even when I set the table width to 300, it still does it.
0
 
MacAnthonyCommented:
Yes because that paynowbtn is still taking up 365px and not just 300px. It's going to push the right edge of the table out to at least 365px no matter what you change the width of the table to without making adjustments to the paynowbtn style or telling it to use table-layout: fixed. That will force it so that content can't resize the table.
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Then how can I make the image appear centered in the paynowbtn div if it is the background?
0
 
Jesus RodriguezIT ManagerCommented:
Crop the image to a small size
0
 
Eddie ShipmanAll-around developerAuthor Commented:
Used  background-position: center;
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.