Issues with my own website...

Technocrat · Fri 27/04/2012 16:52:18

<==== SORT-OF FIXED ====>

Well, I figured I ought to start making a website for all of my delightful games, but it seems to have hit rather a snag that I can't quite seem to puzzle out. It wouldn't have fit in the AGS technical forum, or the critics lounge, so maybe someone can point me in the right direction here.

technotest.uphero.com

I'm mostly an IE user, and within IE it looks absolutely fine and dandy.

But then in Firefox and Chrome, everything in the background shows up green.

I have no idea where it's getting this colour scheme from. I've checked the "inspect element" tool on Chrome, and it says

Code: ags


td[bgcolor=rgb(65, 70, 87)] {
background-color: #005000;
}

so it apparently knows it's supposed to be showing blue/grey (65, 70, 87), but suddenly leaps to that green (#005000). I'm pulling my hair out with this, and there must be a simpler answer than "rewrite the entire page in CSS" - surely it's possible to change the colour in HTML to ensure everyone sees it the right way?

Many thanks for your help.

Technocrat · Fri 27/04/2012 17:32:40

I managed a kind-of fix using other classes. It produced a bizarre situation where nothing stuck to the centre, but I think I'm getting the hang of this - slowly.

Right, I'll get back to making the rest of it work!

Khris · Fri 27/04/2012 18:54:27

The table should have this:

Code: ags

style="height: 1024px; background-color: rgb(65, 70, 87);"

Note that in your code, both semicolons are missing.

Also, stop using IE, especially if you're building websites. The newest IE versions (9, 10) are already pretty close to adhering to the current standards, so you're way better off if you build the page for Webkit/Gecko, i.e. Chrome, Safari and Firefox. Check out w3schools.com.

Another issue is using tables to layout your site. I know it's tempting, but they should only be used if two parts of the site are next to each other and supposed to be of equal height. As a rule of thumb, if making the table's border visible looks ugly, you shouldn't have used a table.

Currently, if I view the page in Firefox 12, the main content is shifted far to the right; it looks like there's an empty cell below the header, where the one holding the content should be.

In general, all the specific attributes are going to go out of the window sooner or later; these days, everything is handled in the style attribute.

Darth Mandarb · Fri 27/04/2012 19:23:30

Quote from: Khris on Fri 27/04/2012 18:54:27Also, stop using IE, especially if you're building websites. The newest IE versions (9, 10) are already pretty close to adhering to the current standards, so you're way better off if you build the page for Webkit/Gecko, i.e. Chrome, Safari and Firefox. Check out w3schools.com.

Seconded, Thirded, Fourth'd - Infinitied.

NEVER EVER EVER EVER EVER^infinity do design/layout work in IE. It is shit. Even the newest "standards" versions of IE are still shit. The world would be a FAR better place if IE died and nobody used it ever again. Do yourself a huge favor and switch to Chrome. It's the best browser available right now.

[/rant]

Victor6 · Fri 27/04/2012 19:41:27

Same thing happens on opera, tons of green, and everything's offset to the right.

(Use whatever browser you like, but test your website on as many as possible.)

Technocrat · Fri 27/04/2012 19:58:57

Quote from: Darth Mandarb on Fri 27/04/2012 19:23:30
Quote from: Khris on Fri 27/04/2012 18:54:27Also, stop using IE, especially if you're building websites. The newest IE versions (9, 10) are already pretty close to adhering to the current standards, so you're way better off if you build the page for Webkit/Gecko, i.e. Chrome, Safari and Firefox. Check out w3schools.com.

Seconded, Thirded, Fourth'd - Infinitied.

NEVER EVER EVER EVER EVER^infinity do design/layout work in IE. It is shit. Even the newest "standards" versions of IE are still shit. The world would be a FAR better place if IE died and nobody used it ever again. Do yourself a huge favor and switch to Chrome. It's the best browser available right now.

[/rant]

It all depends which computer I'm on at a given moment. I've got Chrome on most of them, except for one. I've got computers running pretty much everything except Opera for testing it.

Quote from: Victor6 on Fri 27/04/2012 19:41:27
Same thing happens on opera, tons of green, and everything's offset to the right.

Is it still green on Opera? Hm, I thought I'd gotten that ironed out a few hours ago.

Eric · Fri 27/04/2012 20:53:40

Quote from: Khris on Fri 27/04/2012 18:54:27As a rule of thumb, if making the table's border visible looks ugly, you shouldn't have used a table.

I'd go further and say if you're not arranging sortable data, then you shouldn't use a table!

Divs and floats, while there's a bit of a learning curve, are infinitely rewarding once you're capable of using them!

Technocrat · Fri 27/04/2012 21:02:25

Okay, having just gotten on to the Firefox-using machine, I can see what everyone means by "still green" and "shifted over to the right". Looks like I'd better get learning CSS!

Last time I made a site, I was using Netscape composer. Things have changed in thirteen years!

Stee · Sat 28/04/2012 03:48:59

if it helps, when I inspect element it tells me the whilst bgcolor is 65,70,87, background-color is 0,80,0 (a green).

In chrome it's not visible when loading, but if you refresh the page and keep an eye on your "advertisement" column you'll see it its green in the background before your image pattern overlay thingy (if that makes sense)

TomatoesInTheHead · Sat 28/04/2012 10:31:52

You should ditch all these 'bgcolor="rgb(...)";' attributes in the HTML code, this should (and is) all be done with CSS, and additionally, there lies your problem with the green: the rgb(...) function only works within CSS, in HTML you can only use named colors or hex values following a '#', anything else (the rgb function as well as any typo or color value missing the '#') will be interpreted arbitrarily.

Technocrat · Wed 02/05/2012 22:53:28

Phew, finally got it working. Essentially rebuilt it from the ground up, but it enabled me to make a couple of stylistic changes, and in future it should be easier to slide new pages in!

selmiak · Thu 03/05/2012 01:05:46

you don't have to write div#divname in the css file, #divname is good enough. Just to let you know, you can keep it in of course

and don't have an image called advert as my adblocking software blocks this at once even though it is not a real advert that should be blocked.

And I'd just put the #extra stuff right inside the #navigation with some
s as spacing and only have the #navigation float left and no float on the #content. But for this to work the navigation div with all the stuff inside has to be placed before the content div in the html. Alternatively you could only have the content div float right and keep the html as it is, but this would confuse me everytime I read the html as the navigation is placed after the content.