Graphical element destroyed

[olavt]

I am redesigning my website, using CMSMS. It is all based on the
wireframe3col : wireframe3col theme, dowloaded from the cmsms site.

I want to put a search box in the left column. But it is destroyed. The various graphical elements are broken apart, and the box appears wider than it should be. It is also placed too much to the right.  You can see the result at http://www.torvund.net/guitar/index.php?page=bookstore , and this is not as it should be. I can provide the source code if needed to understand the problem.

[Dee]

The table with the form is defined 150 pixels wide:

Code: Select all

<table width="150" border="0" align="left" cellpadding="1" cellspacing="0" bgcolor="#c7002c">

The div containing the form has a width set of 20%:

Code: Select all

div#newsblock2{float:left;width:20%;padding:5px;}

I think it should be fine when you remove the width="150" from the table definition.

Regards,
D

[olavt]

Sorry, but it did not make a difference.

The design of the box i three tables inside each other. (I know that real designers don't use tables, but I did not design the box 

I seems that each table is moved to the right, including the first table (which adds a left margin that I do not want.) I have tried to go through the css files to see if there are anything in there that will reposition the tables, but I have not been able to find it.

Would there be a way to neutralize all style settings for this specific table?

[heatherfeuer]

What styles are defined for id="newsblock2" and id="news2"?  If you can paste the relative styles here it's possible I might see how to fix this.  It looks to me like the table itself is not nesting properly into the divs.  The width issue is probably not with the table but with the underlying div styles.

[olavt]

If I got it right, this is the part from the relevant css-file:

div#newsblock{float:right;width:20%;margin:0 0 10px;padding:5px;}
* html body div#newsblock{float:right;width:22%;}
div#newsblock2{float:left;width:20%;padding:5px;}
div#news, div#news2{padding:5px 8px;}

[heatherfeuer]

Well.  I tried.  I ended up downloading the template and installing it on a local test site.  Besides the table width, there are several td widths set to "148px" to deal with images that are that wide and another td width set to "112px."  I tried typing some sample text into the same place as you want the table and the text fits fine, so I suspect that table is just too wide to fit the space.

I think you are going to have to get help from Mark, the author of that theme.  Sorry I couldn't be more help.

[olavt]

Thank you for trying to help.

I have tried with another table, with no width setting. Again there are three tables inside each other, and each table is offset to the right. The source for the column in http://www.torvund.net/guitar/index.php?page=bookstore is:

Outside
outer - is it the length of the eords?mid - or will this not incluence the offset?inner

I still have not found where the offset settings come from.

It must be something with the table setting in the theme, and not this particular block. There are tables in several of the main blocks, for instance

http://www.torvund.net/guitar/index.php?page=tunings
and
http://www.torvund.net/guitar/index.php?page=tuning&tid=1

All the tables are offset to the right.

[chead]

Something's definitely adding margin to your table elements. Check this one:

div#contentbox table{margin-left:25px}

You can see the difference by disabling all margins/padding/borders with something like this:

table{margin:0px!important;padding:0px!important;border-collapse:collapse;}

[olavt]

You can see the difference by disabling all margins/padding/borders with something like this:

table{margin:0px!important;padding:0px!important;border-collapse:collapse;}

If I make a table class, for instance table.clean with the setteings above in the css file, and use this for the tables,  can this be a solution to the problem?

[chead]

It might help, but I didn't dig deeply enough to understand the cause, so couldn't say what other effects it would have. Mostly it was just to narrow it down to margin and border-collapse as why the tables have an offset. (By the way, I'm assuming that you've intentionally moved the red search box down at the bottom of your page while you debug the side table area.)

Here's a suggestion to help make the code easier to work with. It'll help while you try to sort out the layout, and help later for maintenance. Move all the HTML for the nest of tables that you were given for that searchbox into a global content block. That will isolate it so you can be sure that the code is exactly what it's supposed to be, and you'll only have to look at it when you need to edit it.

Make a JPG that's the exact size the searchbox is supposed to be for a temporary placeholder. Then, in your template, where you want the searchbox to go, just put an tag to that placeholder image. Adjust the template and CSS until that image is appearing correctly.

When you get the layout working for that, replace the tag with the {global_content} tag that holds the searchbox. Anything still going crazy at that point will be isolated to HTML or CSS that's in that block.

If you're using Firefox at all, download the Web Developer add-on. It's perfect for problems like this. You can use it to see exactly what CSS is being applied to elements, and even edit the HTML/CSS in real time to see how changes affect the layout.

[heatherfeuer]

chead said:

If you're using Firefox at all, download the Web Developer add-on. It's perfect for problems like this. You can use it to see exactly what CSS is being applied to elements, and even edit the HTML/CSS in real time to see how changes affect the layout.

Ooooooohhh!  How did I ever miss that plugin!  (New toy! New toy!) 

[olavt]

The webdeveloper was a very useful tips. But it did not solve the problem.

The strange thing is that when I look at the page in Firefox, the offset happens between the and tag. When I say that this is strange, it is because that there are no tags in the source code. There are only , and . And it did not change anything when i included a in one of the tables.

And I cannot find any definitions of in any of the css files. Ant the same thing happens when viewing in IE, Opera and Firefox.

[olavt]

I still do not understand what happens. But at least I have found some kind of a workaround.

By defining a table class with attributes like this:
{position:relative;
left:-30px}

With -30px it seems that the inner table move to far to the left, while the outer table does not move enough. The solution seems to be that each table in this chinese box of tables need it's own value. As this is a problem wit all tables, I guess I will set a left:-n value in the general table setting, and define special classes for tables inside tables. Now it is only a question of finding the right numbers ....

[heatherfeuer]

Sometimes that is what it takes to narrow down a problem.  If it were me, though, I'd go back to the providers of the code that is giving you all the problems and ask THEM to provide you with code that works better!  But that could just be me - I am a total control freak, which is why I'm more likely to come up with my own look than use someone else's theme.  If I like how a theme looks, I'm more likely to recreate a look-a-like that suits MY need... 

Good luck!

[olavt]

Sometimes that is what it takes to narrow down a problem.  If it were me, though, I'd go back to the providers of the code that is giving you all the problems and ask THEM to provide you with code that works better! 

It illusttrates one of the disadvantages of free software and free solutions. I use a free CMS which in my opinion works very well. And I have downloaded a free theme, a theme that is a good plattform to start from, but turns out to handle tables in a strange way. I cannot go back to those who has made all this available for free and demand them to correct possible errors, as I could have done if I had paid a lot of money for it. And rather than complaining about one possible error, I will say thank you to those who have saved me a lot of time (and money) by making it all available.