wrong borders on site

Francesco · Post by **Francesco** » Fri Feb 24, 2006 10:41 am

Ok these last two things are solved, now there is the search bar to fix - as you asked by mail. For that, put this chunk *inside* the "form", at the bottom of the page (it should replace just the table):

Code: Select all

<div style="background: #663300; text-align: center; max-width: 80%; margin-left: 10%; margin-right: 10%; width: 100%;">
  <table bgcolor="#FFFFFF" style="text-align: center; width: 100%; border-spacing: 0px;">
    <tbody>
      <tr>
        <td style="margin: 5px; height: 50px;"><font face="Trebuchet MS">&nbsp;
        <a href="http://www.google.com/"><img src="Logo_25.gif" alt="Google" border="0" height="32" width="75" style="float: none; padding-top: 6px;"></a>
	</td><td>
<input name="q" size="45" maxlength="255" value="" type="text" style="margin: 5px;">
	</td><td>
<input name="sa" value="Zoeken" type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font>
        </td>
      </tr>
    </tbody>
  </table>
</div>

No CSS change needed and no "center" element around the form needed.
I set all using inline styles.
I had to change the Logo_25.gif url, and now I don't know its path. Fix it.
It will work fine in FF, but will look bad on IE, well, it's a first step.
Paste the above and update the site, I'll have a look in the afternoon.

Francesco · Post by **Francesco** » Fri Feb 24, 2006 11:38 am

Ok, I must be a bit out-of-phase.

You didn't ask for the search bar in a mail, you asked for the ads box in a PM... ...anyway, the above fixes the search bar.

I'm going to check out the ads under the menu.

Francesco · Post by **Francesco** » Sat Feb 25, 2006 12:14 pm

I've seen that. The ad box is set by JavaScript, I've noticed that there are some variables to change, in the Html. You could try to change them (ie. making it larger). Try that, if it doesn't work, I'll have a look at the script - by the way, you should find out if your ad provider allows changes in its code.

Martijn · Post by **Martijn** » Mon Feb 27, 2006 7:42 pm

I will use your code for the Google Search tomorrow, as I don't have time today. Anyway, thanks for it.

I also added the ; sign which I forgot to add and now the screenshot tables on the individual game pages look good, as you can see on the updated (temporary) site. Also thanks for this.

But could you have a look at the game tables (those tables with a game description and a screenshot etc.) and the tables on the fan stuff page?
They are not centered. I tried setting the padding to 20px instead of 15px in the default.css file, but this didn't fix the fan stuff tables.
What do I have to change for this? Working with pixels instead of percents seems a bit clumsy to me, as the tables need to be centered in Firefox as well as Internet Explorer, and because they also need to be centered in non-maximized windows.

By the way, talking about non-maximized windows: did you notice that the pages look very strange when the window is too small? Is there a solution to this? Otherwise, just leave it as it is. But if there's no decent solution (without having to change the whole code again), maybe it's an idea to set a minimum size for the window, if possible? I mean, that the user cannot resize the window smaller than a certain value of width and height so that the site will always look good.

Tomi · Post by **Tomi** » Tue Feb 28, 2006 1:00 pm

As I know, there was a min-width property* for setting minimal element width (which could be set to <body>), but as many things, it didn't work in IE...

* - or it was just min-height? I'm not sure, someone check this please.

Martijn · Post by **Martijn** » Tue Feb 28, 2006 6:25 pm

Something else,

I would like to enhance the Google Search code by adding an option to search within the site. This is the code the Google site generated:

Code: Select all

The code has been deleted because it's not needed anymore.

Could you give me the code for this in the way you did it, Francesco? (Don't look at the colours and size, that's just standard by Google).

And could you also have a look at what Tomi said, please?

Francesco · Post by **Francesco** » Wed Mar 01, 2006 11:30 am

Lately, here it is:

Code: Select all

[The code has been deleted. Not needed anymore.]

Again, I've changed the path of the image.
I've also added a rule to quit the spaces between cells into IE.

About the adbox, I'm waiting for a direction (read the earlier post here above).

About the windowsize, Tomi is right: add a "width" or a "min-width"
rule to the body statement, you should set it around 768px. Best "width", because "min-width" isn't supported by IE.

By the way, I can't find a solution for making it behave nice when resized
*and* look correct in IE. IE box model is faulty, I am looking for a workaround/hack,
gathering informations about that on the web.

I have found half a solution, but it works only for fixed-size boxes.
You are wishing for a resizing layout which I'm not so sure I'll be able to achieve.

Now by now, if you set the above to "min-width: 400px", for example,
resizing the windows will still mess up the screenshots table.
That table is sort of an obstacle to the resizing behaviour.

We'll see...

Martijn · Post by **Martijn** » Wed Mar 01, 2006 5:00 pm

Well, the Google Search code doesn't work. It looks like this: http://www.bd-fans.com/Temp/index.html

Thanks for your comment, it's indeed not allowed to change the code of the Google Search nor the Google Ads... so the changing search code is probably not allowed either... Then, maybe it's better to remove the whole Google Search from my website. But I want to keep the ads. But I may not change the variables... Do you know another way to get the ads centered?

Thank you, Tomi, for your solution. I set the width of the window on all the pages and it works perfectly!

And I hope you could fix the IE problem...

See you!

Francesco · Post by **Francesco** » Wed Mar 01, 2006 5:39 pm

Just taken a look to the link: I think that you have pasted the code in the
wrong way. Paste it manually in a notepad, replacing all Html of the "center"
tag (center tag included) - just tried it copying the code from my own post,
and it worked good (apart of the image).

In effect we aren't changing anything in the search bar code (only its
appearance) so it should be allowed, but you said something about the
adbox ... are you sure that you can't change neither the variables in the
Html? They have no sense outside of the js file, other than allowing you to
change them... in this case Google's technicians would be very stupid. I've
also noticed that your page raises a lot of errors (try to open the Javascript
Console in FF, clear it and then refresh your page): most of them are inside
Google scripts...

I'll investigate...

Martijn · Post by **Martijn** » Wed Mar 01, 2006 6:12 pm

Hi,

Indeed, you were right. Now I pasted it well and it looks fine. I don't think they will make a problem of the current appearance of the Google Search.

About the Google Ads: I tried to change the width with certain values, but it won't help to get it centered. So I'm afraid that we would need another solution...

Francesco · Post by **Francesco** » Wed Mar 01, 2006 9:02 pm

Ok, seems that we have thrown away the problem about resizing - having set the body to a fixed width. Good choice, it solves a lot of problems.

Here is the code that fixes the adbox:

code wrote:<div style="float: left; text-align: center; width: 210px; height: 1100px;">
<script type="text/javascript"><!--
[...snip...]
<iframe [...snip...]
height="800" [...snip...]>
</iframe>
</div>

Notice the highlighted changes.
"height: 800" in the "iframe" tag is needed to avoid IE cutting the adbox.
To match the above, and to fix the menu size in IE, change to 210px the width of #left, on CSS (percentage values are superfluos, now).

To make this page a little more readable, delete the codes on the above posts (we'll save little space on Holger's server, also

) just like I did.

Martijn · Post by **Martijn** » Thu Mar 02, 2006 3:43 pm

Hi,

I changed the ads and it works perfectly in Firefox! Thanks for that!
But I don't understand why you mention the iframe here. The iframe code is somewhere else on the page!

But in IE, the ads aren't centered... do you know a solution?

Francesco · Post by **Francesco** » Thu Mar 02, 2006 5:00 pm

The ads are the same in FF and in IE. The thing that changes is the menu, you forgot to do this:

To match the above, and to fix the menu size in IE, change to 210px the width of #left, on CSS

About the iframe, I don't know why it isn't on your page anymore, but it was just after the ads code, in the page I've edited on my PC. It showed another ad (something about hurricane victims), which pushed down the standard ads. Anyway, you have removed it, so there is no need to set its height.

Seem that you're ready to complete the new release of your site, good work!

By the way - notice how FF puts the text "google", while IE puts the image... it's due to the wrong slashes "Images\Logo.gif" instead of "Images/Logo.gif"

Have to run, see you.

Francesco · Post by **Francesco** » Thu Mar 02, 2006 5:40 pm

By the way, why don't you add "background-attachment: fixed;" to the body?
I *should* result in a smoother scrolling for slow PCs like the one I'm using right now (~500MHz).

Try that to see if you like it.

Martijn · Post by **Martijn** » Thu Mar 02, 2006 8:29 pm

The ads look alright now in Internet Explorer. But in Firefox, the space between the menu and the content has become smaller and the ad box is not completely centered anymore. If you know a better solution, it would be better, but otherwise, just leave it as it is. It's not really disturbing or so.

I read your post probably too fast so that I missed it. I'm sorry for that. But now, it has been solved!

I also fixed the wrong slash. Thanks. And the background is set to fixed now as well. I didn't know this, but it's better indeed! Thanks for that!

Well, the site is nearly ready. Yet, there is one remaining thing:
See http://www.bd-fans.com/Temp/game_tables.jpg
In Internet Explorer, the game tables have a smaller space to the left than to the right. Is there a way to fix this? The same on the Fan Stuff page.

And wouldn't it be possible that the description text in the game tables (see screenshot above for an example) would have a very small padding or something like that to the right? A padding as big as the cell borders of the cells (with game name, year of publishing etc.) above? So that the end of a line of text would fall together with the end of the yellow field above?