Can't Format Table

[pchieng]

Hello,

I'm trying to add these rss/subscriber buttons on my blog: http://www.frugalshoppingideas.com/ on the right side. I'm trying to make it so the text ("Subscribe to Me") is all in one line rather than wrap around. They're in a table but there is a class/id that is limiting the width to 130px:

#sidebars table {
width: 130px;

}

I tried creating a separate class:

.table1 {
width: 300px;
}

But it's not working..

Someone else told me to change the width with local styling to override the external css..ie: <table width="200px">

But that didn't work either. I'm not sure if there are other classes/ids that are affecting this table. Can someone please take a look at the site/code and help!!

Thanks!

[Namibnat]

Hi Pchieng,

I am brand new on the forum, so you may get a better answer from someone else. I thought of a couple ways you should be able to solve it.

It seems strange that playing around with the table's width doesn't work. You could change the width of the 'td's in the table, and just make the table's width auto.

You could also just delete the table completly and just do the adjusting with div tags.

for example:
<div id="wholeBox">
<div class="eachBox">
<p><img....width, height>
<br />
text...</p>
</div>

<div class="eachBox">
<p><img....width, height>
<br />
text...</p>
</div>

</div>

for the 'wholeBox' with the css clear margins etc

and then for the 'eachBox':
clear margins,
set 'width:50%;'
set float "float:left;"

and it should work and you don't need to have it in a table or have specific widths for it at all.

[ScriptMan]

I did not look at your code but as a general rule columns and tables are included inside a container. Increasing the width of the table will have no affect unless the container size is increased by the same amount or the other divs/tables are reduced by that amount.

Think of boxes inside a bigger box. The inside boxes can not be larger than the container.

[Namibnat]

Hello,

I am sorry, you asked me for a response in a private message, but I am still to new to the forum to send a private message back. I will try to help you here instead. Please remember that I am also just a beginner

When I said 'clear margins' I meant getting rid of unwanted space. Different browsers have different defaults and so on. So often when you are working in css you do something like:

someElement{
margin:0;
padding:0;
border:0;
other_stuff:etc;
}

In your case the css file has already set all the margins to 0 (if you look near the top it says:
*{
margin:0;
padding:0;
}

I wouldn't do that but don't change it now or your site will be a mess.

Here I what I suggest you do:

1. Color the background so you can see what you are doing. If you have to work with live changes, use a sort of neutral color that doesn't look to bad. If you work with a file on your hard drive, then make it red or yellow, so you really know exactly where you are working:

#sidebar table{
background-color:#ffffaa;
}

Now you can see it and you know what you are working with.

2. Now, if you want to keep it in a table, you can change the width from a fixed width to 100%. This fills that whole space which is confined by the sidebar div tag. Now it fills the space. You can do text-align to center it, or you can add padding or right align. When you have it right, don't forget to just delete the background-color tag, which is just there to show you where your table is.

#sidebars table {
border:0;
background-color:red;
width: 100%;
text-align:center;
}

If you want more specific control, rather than set the background-color for the whole thing, rather do this:

#sidebar table td {
background-color:purple;
}

and then you can work with aligning each part of it.

3. You could get rid of the table and use various things such as a list with floats to get it right, but if you don't know css that well, it's probably easier just to stick with the table for now. It can get very messy.

Cheers