wrong borders on site

Martijn · Post by **Martijn** » Mon Dec 12, 2005 5:49 pm

Hello everybody,

As you probably have read somewhere, I'm working on the site www.bd-fans.com
It all looks fine in Internet Explorer, but some weeks ago I discovered that it doesn't in Mozilla Firefox, and probably not in Opera either. The borders are either not shown or are shown in the wrong colour. I asked for help on a Firefox forum, and someone helped me. Firefox needs the border code to be written in a style 'formula'.
Now, the index page is nearly fixed (the rest of the pages aren't yet). But look: almost the whole left border of the main part is not shown for the first time, but it is when you refresh the firefox browser. What can be the problem of this?
And secondly, in Internet Explorer, there is a line above the history section. How can I get rid of this?

Could anyone help me with these 2 problems?

Thanks in advance!

Alan · Post by **Alan** » Mon Dec 12, 2005 8:49 pm

Not sure about the boxes, but the space between the History is because of these lines:-

Code: Select all

<TR>
    <TD style="COLOR: #ffffcc" width="4%" height=1></TD></TR>

Delete them and it should be ok. They're at line number 311.....just below:-

Code: Select all

action and are fun for the whole family!</FONT> </P></TD></TR>

Martijn · Post by **Martijn** » Tue Dec 13, 2005 8:33 pm

Thanks Alan! Now the second problem is solved.

Is there anybody who could help me with the first problem? It's a serious problem. After this index page is correct, I can use it as a 'sheet' for all the other pages, so that they will all have the right borders.

_Tomi · Post by **_Tomi** » Wed Dec 14, 2005 8:18 pm

Let me look at it...

FrontPage generated code?! Yuck... It's not so surprising that it doesn't work!

I couldn't help myself - I've ported the whole thing to well-formed CSS layout.
Advantages:
* Content area is sooner than menu area in source code. => Content will load sooner.
* Works fine in Firefox. Should work fine in anything else.
* MUCH smaller file. (About 40% of original size.)
* No more FrontPage code. (And believe me that this is a BIG advantage.)
Disadvantages:
* No more FrontPage easy-to-use interface. (But if you don't know HTML, this may be a VERY BIG disadvantage.)

Here it is:
http://www.smnd.sk/tomi/files/martijn/martijn.html
(images don't work but they will if you'll place it in your site directory.)
You'll also need: http://www.smnd.sk/tomi/files/martijn/site.css
(this file holds all the design and layout rules of the site).
I've made just the main page, hope you'll figure out the others.

Martijn · Post by **Martijn** » Wed Dec 14, 2005 10:44 pm

Hi Tomi,

Thanks a lot! That really looks better and after all much easier to use. But well, could you explain it a bit to me? I've never worked with CSS files before...

If I understand well, there is a number of general descriptions. E.g. the description 'news' or the description 'left'. One says something about the letters, the other one says something about the borders, etcetera. But where to put this <use #left> description exactly? The menu to the left consists of a number of cells. So why don't all these cells have to call for the left code in the CSS file?

Well, if you could explain it a bit further, this could be a great solution! And I can still use Frontpage for some general site design (just typing text, linking, inserting screenshots, etc.)

Tomi · Post by **Tomi** » Thu Dec 15, 2005 5:01 pm

(read the source code of the HTML file I've posted for details.)

First, there's a problem with Frontpage that it makes loads of dirty and useless code, so I'd recommend to
a) use some better WYSIWYG - such as Mozilla Composer(?)
b) use some "HTML-friendly" editor which has quick buttons for inserting HTML tags (such as PSPad in win or Bluefish in linux; search for it on Google)

About CSS: it works like this: (Of course, I don't know what do you know, so I might tell you something you already know very well.)
HTML has two basic parts: HEAD and BODY. HEAD contains information about the page like title, used CSS/JavaScript, author, charset etc etc etc.
What we need is the CSS. There are two ways how to insert CSS:
a) <link rel="stylesheet" type="text/css" href="file.css">
b) <style type="text/css"></style>
(Note: Actually there are more ways but these are the only ones we'll need.)
CSS says how the page should look. One stylesheet contains of several "rules". Some rules specify general layout about tags (such as the H1 rule) and some specify rules about unique elements (such as #menu rule). This rule apply for every tag that has id="menu" attribute. (There should be only one. If you need more elements to use that rule, use "." instead of "#" and "class" instead of "id".) I use "div" tag, because the main purpose of "div" is to serve as a block formed with a CSS rule.
So the basic template for one page looks like this:
<html>
<head>
...HEAD stuff... (look to martijn.html source)
<link rel="stylesheet" type="text/css" href="site.css">
</head>
<body>
<h1>Page title</h1>
<div id="content"> -- this uses the #content style
<h2><a name="Introduction">Introduction</a></h2>
<p>...</p> -- p is for paragraph
<p>...</p>
<h2><a name="News">News</a></h2>
...
</div>
<div id="left"> -- the left part (= menu + ad)
<div id="menu">
...
<br><a href="#News">News</a>
...
</div>
... (ad)
</div>
</body>
</html>

Notes:
*I use <a name="..."> so I can refer to the section with <a href="#...">
*br is for line break. If possible, use this only in menu; elsewhere use p
*You may need to have specific stylesheet for each color scheme. Or, even better, use one file for general rules and several files for color schemes; then you'll include two files in each HTML. This is good because if you'll want to change the layout, you won't need to change it in each file.
*If I'll have time I'll try to find some good site about HTML (unfortunately, jakpsatweb.cz - the best one I know - is in Czech...)

> So why don't all these cells have to call for the left code in the CSS file?
There's a better way - look for "#menu a" rule. This rule applies for every a that's in #menu.

P.S. "The beauty of CSS design" -- "www.csszengarden.com", look at HTML source.

Zomis · Post by **Zomis** » Thu Dec 15, 2005 5:46 pm

Martijn: go to http://www.htmlgoodies.com
That page has some lists for HTML and CSS "commands" and tags. Highly recommended! That's where I learned most of my HTML-knowledge.

Tomi's post seems very good too, of course! But there's always more to learn.

Post by **Holger** » Fri Dec 16, 2005 12:23 am

Also a very good HTML/CSS resource: SELFHTML!

Try http://de.selfhtml.org/ (in German) or http://en.selfhtml.org/ (unfortunately, only the CSS part has been translated to English yet, but that may well be what you're looking for). Probably you can just perfectly use the German version -- the most useful parts are the examples anyway, which are indepentent of the site language.

Alan · Post by **Alan** » Fri Dec 16, 2005 2:08 pm

Martijn, the best of them all is Macromedia Dreamweaver......... getting a "copy" is another matter though.

Scan a few "sites" for it, you'll be thankful!

The CSS is seamless in DW and is all generated for you. Plus having a split view of the page and the HTML is extremely productive

Martijn · Post by **Martijn** » Fri Dec 16, 2005 3:52 pm

Hi,

Thanks a lot for that great explanation, Tomi. Now I understand how it all works, especially because you explained it for my site itself and not in general, as all the CSS websites do.

I know how HTML works, at least, I know the basics. In other words: I can rather read it than write it, especially complicated cell constructions are quite hard for me, because I've never learned HTML that much.
I used Frontpage, because my main purpose is creating a very complete BD site with very much information and not creating a masterpiece of HTML. So I built it with Frontpage, so that I could directly see what happened and could make the site as fast as I could. Now, I have been working on it for about two years. If I would have made the site in Wordpad or so, the site would have been far less developed than it is now.

So when I heard about the CSS idea, it sounded very pleasant to me. But if this all is possible in Dreamweaver, which automatically generates this for me, then there remains one option: installing Dreamweaver and going on with the site development as fast as I can! (My so-called TODO-list (a term invented by Holger btw.)

Thank you, guys, all of you, for your help and Tomi especially for his endeavours! But I want to keep it as simple as possible and I can remember that my brother has a copy of Dreamweaver, so that's no problem!

If I need further assistance, I will post it here.

Martijn · Post by **Martijn** » Fri Dec 23, 2005 12:38 pm

Now I have Chrismas holidays, I have much spare time to work on the progress of my site (you can notice that in the news part on the index site).

After I've finished the main pages (the commercial Unix clones page is only left to do now), I will concentrate myself on the border problem. There's one important thing: it has to happen as fast as possible. Because my so-called TODO list (;-)) is very big, I hope to fix this as fast as possible, because then I can go on with the things on the list.

Dreamweaver didn't work. It gave many bugs. But I read in your post, Tomi, that you generated the CSS code. What I can conclude of it, is that you know a very quick way to fix a page with the right borders. Could you tell me how you did it? That's probably the fastest way. I have about 20 pages that need the right borders. Some of them need other colours etc. (you know, the 'own pages', such as the RnD page).

I hope there is indeed an easy and quick way to do this.

Btw. my site appeared in a Dutch magazine! Cool! And the site is not even out of development yet! I got the magazine sent home.

Tomi · Post by **Tomi** » Fri Dec 23, 2005 3:05 pm

Unfortunately, I didn't use a quick way, and I don't know about any. I've just added layout things (<link> in head, style="..." in body, div-s) and changed all nasty tags into simple h2,h3,p,table,... tags. IMO it's worth it anyway, if you don't have *too* big TODO-list.
About colors: make an own CSS file for each "color set" (default, RnD, RoX, ...). And change the color values "#------" to the right values.
And btw: if your server supports PHP, I know another powerful program that makes creating and managing pages a lot easier, but it can be time-consuming if you need the site working quickly.

P.S. there is an error on the page: the program that's referred to as ConfEdit isn't really *the* famous ConfEdit, but "BMP2photomap2" - an utility to convert BMPs to Photomap2 levels.

P.P.S. very interesting site: "the strength of CSS design": http://www.csszengarden.com/ - view single HTML file with various CSS files which control its layout _completely_.

Martijn · Post by **Martijn** » Fri Dec 23, 2005 7:19 pm

Then I will try to lose myself in CSS and use your great example, Tomi. I will have a look at the link you and others gave me.

The confedit download has been changed. If there are any utilities missing on my site, please report them, so I can make it as complete as possible.

I will post eventual problems while creating the CSS files here.

Thank you!

Post by **Holger** » Fri Dec 23, 2005 10:40 pm

> Btw. my site appeared in a Dutch magazine! Cool! And the site is not even
> out of development yet! I got the magazine sent home.

Veeery cool! Congratulations!!! :-)

Martijn · Post by **Martijn** » Sat Dec 24, 2005 4:08 pm

I've started redesigning the pages (using CSS files, one for each 'own page', like Rocks 'n' Diamonds' page or RoX' page). Now I've finished 2 out of the 25 pages. But I've a question.

Tomi, I don't know how to do this. Would you please like to give an example of what to write down in the CSS file for the download table on the Commercial Java page (http://www.bd-fans.com/CommercialJava.htm) (most important, because THIS table is not shown correctly in Firefox) and the download table on the RoX page (http://www.bd-fans.com/RoX.htm)> Then I can use them as an example and change them with colours, etc.
I would really appreciate it if you could do this for me.

Thanks in advance.