wrong borders on site

Martijn · Post by **Martijn** » Tue Feb 21, 2006 8:51 am

Thanks a lot!

but... I can't download them. Just opening them gives a 'method not allowed' page and saving as gives a very strange file. Could you zip it, please?

Francesco · Post by **Francesco** » Tue Feb 21, 2006 9:59 am

Yes, forgot to repeat that. My server doesn't allow external linking. From the page where it says "Method Post Not Allowed", notice that the address bar contains exactly the CSS filename. Simply put the text cursor on the address (as when you're typing it) and press enter. It will be open - just like if you typed the address manually.

See you

Martijn · Post by **Martijn** » Tue Feb 21, 2006 11:16 am

thank a lot! this looks much better!
yet, it is not flawless yet...

I updated the changes to the URL we are used to. (I did some thing a bit differently, such as the width of the left and the content table, which I had just already changed myself, coincidentally...)

- the screenshots themselves aren't centered in Firefox, but they are in IE
- the whole screenshots table is not centered in IE
- the space UNDER the screenshots is a slightly bigger than the space ABOVE them (I mean the purple space on the Diam Diam page, as an example)
- the tables on the fan stuff page are now aligned to the left!
- the screenshots on the RnD page are smaller than the screenshots on the other 'own pages' (such as High Carats, Diam Diam etc.)

Hope you can help! It's the final touch!

Francesco · Post by **Francesco** » Tue Feb 21, 2006 2:02 pm

yet, it is not flawless yet...

...and never it will be so! I mean, making a website that shows up in the same exact way in all browsers is still an utopia - the last IE lacks a lot of things, although its creators say it is perfectly W3C compliant, believe me.

[W3C = World Wide Web Consortium, they are the people who release the standards for HTML, CSS, DOM (Document Object Model), XML and so on.]

- the screenshots themselves aren't centered in Firefox, but they are in IE

Uh? RnD.htm works fine for me - looking at it on your server.
Maybe you have to check out if you have missed something:

- the screenshots on the RnD page are smaller than the screenshots on the other 'own pages' (such as High Carats, Diam Diam etc.)

Exactly. The *source* images have different size. Fix them.

- the whole screenshots table is not centered in IE

I know. I can't win againts missing CSS support of IE, so you should consider it the best solution I can provide - notice that I don't even care of IE more than providing to IE users a readable layout and a strong advice.

- the space UNDER the screenshots is a slightly bigger than the space ABOVE them

Well, not too bad. That bigger space is due to the place occupied by the table, which isn't containing the images, but is only setting their left position. Change the table.screenshots background to another color (like black) and you'll see it. It's a workaround that implies using CSS in a non-elegant way, and both browsers suffer from this (the space under wider than the space above). Maybe I could refine it, we'll see.

- the tables on the fan stuff page are now aligned to the left!

Uh? Yes, I see.

Well, you are using the same stylesheet over pages that have different structures.

In FanStuff.htm, you have to add a <div class="game"> around each table.

Hope you can help! It's the final touch!

Well, if it's final or pre-final, here I am (as long as I am here

- and I bet it will be for a while

)

Martijn · Post by **Martijn** » Tue Feb 21, 2006 2:55 pm

Hi,

1. I meant not the screenshots on the RnD page, but on the other pages (RoX etc), they are not centered! What should I change there to get them also centered?

2. I already changed the size of the RnD screenshots and now it looks fine. Haven't uploaded yet, is not so important I think. It's fine on my PC (lazy me...).

3. if not too much work for you, could you how to get the space UNDER the screenshots as big as ABOVE? otherwise, it doesn't matter really much.

4. the code you provided there (I see you have removed it now) didn't work? Do you know another solution?

5. about the screenshots table in IE: okay, I understand you can't win it from the lack of CSS support of IE, but it's a fact that most Internet users still use Internet Explorer, so it's important that it looks fine for them (although I will put a declaration on the top of my page with about these words: 'this site is best viewed in the Mozilla Firefox browser'). But I thought of a solution. what about putting the screenshots table IN another, INVISIBLE table which centers is content? then the problem is over I think.

these are really the last, very little, but still very important things! and then, I can release the site (as you maybe have seen, the current www.bd-fans.com is not correct anymore, the news section goes till december

, I accidentally removed the files because I forgot to go to the Temp directory... and I only had a backup of the old site from december).

Francesco · Post by **Francesco** » Tue Feb 21, 2006 6:00 pm

1) and 2)
The screenshots in the other pages aren't centered because they are larger. Set them at the same size of those in RnDpage, and they will look fine.

3) 5)
Don't mind about the larger border, and neither about the screenshots aligned to the left in IE, I'm going to fix it, but since it's going to be set on CSS, we can fix it a little later - these days.

4)
I removed that code because it wasn't correct. The best way is to add those game divs, otherwise you have to add a statement for each different table class (didn't tell you that before, but you're using class names in the wrong way. They are used to refer to the style of the tables, not to their content).

You have different tables (graphics, levels, music and so on) that aren't really needed, and all of them appear the same just because they are inside of those game divs. Put the FanStuff tables into game divs and they will look fine.

See you tomorrow

Martijn · Post by **Martijn** » Tue Feb 21, 2006 7:08 pm

1. I fixed the screenshot size, but they are still not centered, even if I make them very small! See what I mean:
http://www.bd-fans.com/Temp/screenshots.jpg

2. don't know what you mean here. I don't have the (incorrect) code you suggested anymore. the tables are still aligned to the left on the fan stuff page.

3. you are working on the big border and the table aligned to the left in IE, but I mention it here, so that this post is in fact enough and that everything is clear.

yes, see you tomorrow

Francesco · Post by **Francesco** » Tue Feb 21, 2006 9:20 pm

Oh, I think that there is some difference between the CSS of RnDpage and those of all other pages. Check them out.

About FanStuff, I mean that there is no CSS to change.

I've seen it on your server right now, and it doesn't show up any .game div (that is <div class="game">): add them and update the temp site, so that I can see it online.

As above:

- the tables on the fan stuff page are now aligned to the left!
Uh? Yes, I see.

Well, you are using the same stylesheet over pages that have different structures.

In FanStuff.htm, you have to add a <div class="game"> around each table.

See ya

Martijn · Post by **Martijn** » Wed Feb 22, 2006 12:31 pm

to have a review of the remaining things:

1. that's just the problem! I don't know the difference in the CSS files of the RnD page and the others. But the screenshots are not centered on the other pages, but only on the RnD page!

2. I added the .game div on the fan stuff page, but the tables are still aligned to the left.

3. (repeated from the former post, just for the review) you are working on the big border and the table aligned to the left in IE, but I mention it here, so that this post is in fact enough and that everything is clear.

4. because of adding the .game div on the fan stuff page, the upper and lower brown space has become smaller. this is not really a problem, but then it would be better if the left and the right side would also have the same proportion of space.

Francesco · Post by **Francesco** » Wed Feb 22, 2006 3:52 pm

1. that's just the problem! I don't know the difference in the CSS files of the RnD page and the others. But the screenshots are not centered on the other pages, but only on the RnD page!

Young man, CSS is nothing more than English and some boxes. Theorically, the different files should have only different color values, so opening them in two notepads should show the same outlook, but they would *only* if you did the same changes that I marked on RnD.css. I'm going to check them out.
---
In fact you didn't... If you want that all pages have the aspect of RnDpage, you must do all the changes, as said above. And you can't make larger thumbnails - like those on your server right now...

2. I added the .game div on the fan stuff page, but the tables are still aligned to the left.

Looking at it right now...
---
Ok, I don't even know why these rules are changed, but they should be like this in default.css:
Tables section:

Code: Select all

.game table {
	padding: 5px;
	width: 100%;
}

Other section:

Code: Select all

.game {  
	background-color: #553900;
	margin-left: 10%;	
	width: 80%;
}

By the way, check out if the other pages that use default.css work fine with the above changes.

3. (repeated from the former post, just for the review) you are working on the big border and the table aligned to the left in IE, but I mention it here, so that this post is in fact enough and that everything is clear.

Martijn, for me it's clear enough, to whom are you repeating it?

Maybe you want to know how many days will pass before fixing it? Don't be anxious, it's not too bad. Use the spare time to check out contents, they always need some fix/change (I am not saying bad of your contents, don't mistake my words

)

Good work

Martijn · Post by **Martijn** » Wed Feb 22, 2006 5:20 pm

problem #2 has been solved. It looks great now! I made the tables a bit larger. Have a look at the freeware windows page for example, this looks very good

about problem #1: I had a look at it again and compared your RnD.css changes with the other CSS files. And the only thing I had to change was the double 'with' statement. I removed it. The rest was about the same as the RnD.css file. You gave a certain width to the #left and the #content tables, but I had already changed this a bit, because I like it more as it is now.

uhm, I know that CSS is just English and it's not hard to understand. but... as you have much more experience with it and because you made the changes, it's easy for you to point the difference between the RnD.css file and the other CSS files. Could you tell me WHAT I have to change? As you say you've checked it out... (and thus found the problem, which I can read in your words)

Francesco · Post by **Francesco** » Wed Feb 22, 2006 6:06 pm

This is a snip of RnD.css on my server:

Code: Select all

/*-----------------------------
	Images
-----------------------------*/

table img {
	   border: none;
	   opacity: .90;
/* Changed padding to margin ----------------------------------------------------------------*/
           margin: 10px;
}

table img:hover {
	opacity:.99 
}

Notice that there are other commented changes: they are needed just like the above. Find them and apply them to all other CSS files (changing them as you need them)

See you

Martijn · Post by **Martijn** » Wed Feb 22, 2006 6:57 pm

Yes, but what I meant, that I had already added all those commented changes to the other CSS files, except for the the left menu-content menu relation, which I did a bit different. So I don't know what's wrong here.

Francesco · Post by **Francesco** » Wed Feb 22, 2006 10:47 pm

This is a snip of Rox.css currently on your server:

Code: Select all

table img {
	border: none;
	height: auto;
	width: 92%;
	opacity: .90;
	margin: 10px;
}

I wrote:This is a snip of RnD.css on my server:

Code: Select all

table img {
      border: none;
      opacity: .90;
/* Changed padding to margin ----------------------------------------------------------------*/
           margin: 10px;
}

Notice any difference? Change doesn't mean simply adding.

You could say that there isn't mention about the missing "width:", but you could notice that I have said to put it off at page 6 of this thread:

On the way for a decent workaround, remove the "width:" and the "height" rules in the statement "table img".
Make even smaller images: set to 128px the longest side .

Well, things that happen

Martijn · Post by **Martijn** » Thu Feb 23, 2006 12:33 pm

...and it works! thank you! Don't know why I didn't remove the width and height earlier. Maybe I couldn't find them in the CSS or so.

Anyway, I'm waiting for the last few things (two things or so) which you were working on and meanwhile I will still do some last things on it and then I can release the redesigned site!