19 replies [Last post]
Shako
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2005-01-14
Posts: 17
Points: 0

If you go to http://www.geocities.com/pand0ra17 in mozilla firefox browser the site looks fine, besides the fact that the setup doesn't expand throughout the whole site (which if you know how to fix that, please tell me.) Also, my <span> containment effects don't show up in mozilla firefox browser, anyone know why and how to fix it, please tell me.

Anyway then open the same site in IE. It doesn't show the same way. Any ideas on how to fix this would be deeply appreciated. Also, here it does show the glowing/shadowing effect I used with <span>. So, the part that sucks is that one browser fixes one problem and creates another, the other fixes the one problem and undoes the other fix that I want, so if someone can find a way to fix this to work completely right on both browsers. Please tell me.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Mozilla FireFox and IE layout/text/coloring issues.

Use a doctype.
Validate the HTML.
Validate the CSS.

Verschwindende wrote:
  • CSS doesn't make pies

Shako
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2005-01-14
Posts: 17
Points: 0

Mozilla FireFox and IE layout/text/coloring issues.

I am using a doctype and both HTML and CSS are validated. So, umm... next solution? Tongue

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 1 year 50 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Mozilla FireFox and IE layout/text/coloring issues.

Shako; Sorry to rain on your parade, BUT I don't see a doctype and neither the html or css validates Sad
That along with some browser specific code will certainly cause the site to look different cross browser

Shako
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2005-01-14
Posts: 17
Points: 0

Mozilla FireFox and IE layout/text/coloring issues.

Well, the doctype part I can guarantee you I have. It could be the way the geocities's pagebuilder works with html. It has a dialog box that you put it on, it doesn't have it where you just load up your own .html file. It's just kinda different. But, I've double checked and I do have the doctype in the coding. Now, the validation I can't guarantee, honestly I'm not quite sure what validating the html/css means, as I am still pretty new at this.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Mozilla FireFox and IE layout/text/coloring issues.

Stop using friggin pagebuilder, it will never create valid code.

Here's the problem:

<script language="JavaScript">var PUpage="76001067"; var PUprop="geocities"; </script><script language="JavaScript" src="http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript"> var thGetOv="http://themis.geocities.yahoo.com/themis/h.php"; var thCanURL="http://us.geocities.com/pand0ra17/index.html"; var thSpaceId="76001067"; var thIP="212.219.189.245"; var thTs="1105968250"; var thCs="621e969162467c3ac3c979429bb20362";</script><noscript><link rel="stylesheet" href="http://themis.geocities.yahoo.com/jsoff.css?thIP=212.219.189.245&thTs=1105968250"></noscript>
<!-- text above generated by server. PLEASE REMOVE -->
<html>
<head>
<title>index</title>

<meta name="generator" content="Created Using Yahoo! PageBuilder 2.61.87">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=4,Transition=23)">
</head>
<body bgcolor="#FFFFFF" link="#0000FF" vlink="#FF0000" text="#000000"
 onLoad="window.onresize=new Function('if (navigator.appVersion==\'Netscape\') history.go(0);');">
<div id="root" style="position:absolute;top:0;left:0;width:668px;height:766px">
<div style="position:absolute;left:12;top:9;width:644;height:745;">
<table width=644 height=745 border=0 cellpadding=0 cellspacing=0><tr valign="top">

	<td><!-- HomeHtml -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <title>Pandora's Box</title>
<!--[if IE]>
<style type="text/css">
 h1 {
 padding-left: 10px;
 width: 750px;
 height: 45px;
 filter: shadow(color=#ccc, direction=225) glow(color=#9BAD71, strength=3);
 }
</style>
<![endif]-->

<style type="text/css">

Geosh*tties is adding more html, and head & title tags above your ones.

Use notepad to code the HTML. Then upload it via the filemanager.

As for the validation, go here:

validator.w3.org

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Mozilla FireFox and IE layout/text/coloring issues.

Also shako the DTD is an incomplete one it needs to a full one including the url otherwise browsers will render in quirks mode, although this is academic until you sort out the problem with that site creation tool and the extra tags. best advice would be to dump that and the awful geocities space and get yourself a proper web hosting account; after all it's cheap enough nowadays.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Shako
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2005-01-14
Posts: 17
Points: 0

Mozilla FireFox and IE layout/text/coloring issues.

Well, I moved my site to www.angelfire.com go to http://www.angelfire.com/droid/nvincible and tell me if everything looks ok.. please?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Mozilla FireFox and IE layout/text/coloring issues.

Much better - although the background color couldn't be much more gay. Any words - blue, yellow, etc - are bad color choices.

Verschwindende wrote:
  • CSS doesn't make pies

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 5 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Mozilla FireFox and IE layout/text/coloring issues.

Shako

Let's be a bit more positive about colour for a moment. If you like the combinations you are using now and they fit with the type of visitors you have targetted the site for, then keep them. But bear in mind that many people will have problems with them and may not stay on the site for as long as you would like.

The essential problem is how the eye perceives colour. Different colours of the spectrum focus either in front of or just behind the retina. Blues and reds (including your dark orange) are at opposite ends of the focal depth. So the eye has to keep re-focussing to the maximum extent to try to render each colour at the same time. If you stare at your menu bar for a while, you should perceive the text and background beginning to work against each other and causing almost a shimmering effect. Many people just do not like that and, although they don't know it, it causes them considerable eye-strain.

No colour is wrong. It is the combination of colours that may be wrong.

If you google for "web color combinations", you will find a wealth of information. One good site to visit is http://www.designbyjoyce.com/colors4.html not just this page but all of them. On this page you will find hex values for very many colours. Visit the page in Firefox, however and many of the colours are missing. Why? Well I've chosen this site because I'm afraid our friend Joyce has used color names. This is an IE thingy and only a few colour names are supported by other browsers. Your own code contains a lot of color names. Although the colours you are using now appear to render the same in IE and FF, if you keep up the habit of using names you will find, further down the line, your colours will not look the same in all browsers. So this page will give you the hex values to substitute for the color names you are using. There are lots of other colour charts on-line, so take your pick.

Another tip when using coloured text and fine lines is to use one of the 16 solid colours. Steer clear of the dithered ones as the colour will revert to the nearest solid colour when rendered on screen anyway.

You *should* keep a good contrast between background and foreground colours, unless you want your visitors to go away because they just can't see the words. There are several sites that let you test contrasts. The following is just one of them. Try it and see how your foreground/background combinations rate. http://www.juicystudio.com/services/colourcontrast.asp

OK school's out - sorry to go on, but colour theory is important and, it would seem, grossly misunderstood by many people. Wink
Lorraine

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Mozilla FireFox and IE layout/text/coloring issues.

Ok, maybe I was a bit harsh. But I would never visit that site again with that horrible blue background.

Pastel colours are always a good one. For example: bd8cde is a light, pastelly blue, and f7f3ef is a nice, pastelly beige that make some nice eye candy.

Verschwindende wrote:
  • CSS doesn't make pies

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 5 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

colours

Quote:
Pastel colours are always a good one.

Agreed - but then I go for girlie things (see my own current site, now undergoing a drastic colour change). Don't think pastels would suit, say, a "gamer", though. Can you point to a site where you've used them to good effect yourself?

Would you mind checking your hex value for the light pastel blue, please? I'm getting a mid-tone purple at this end. It's the #B at the start of the value that causes the colour to move into mid tone, then get progressively lighter to #F, whilst still retaining the same hue, but changing the saturation and light values
Many thanks - just interested :!:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Mozilla FireFox and IE layout/text/coloring issues.

Sorry, my mistake - it's #bdc8de.

Verschwindende wrote:
  • CSS doesn't make pies

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 5 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Mozilla FireFox and IE layout/text/coloring issues.

's awright mate, everyone makes mistakes.

Monitor reproduction of colour varies quite a lot not only between makes of monitor but also between types CRD, LCD/TFT and different resolutions can have a great impact on dithered colours. LCD/TFT is a particular pain because the tone of even solid colours varies on the screen depending on where the light source is. So not only do developers have to overcome the problems of standards compliance, they should take the opportunity to check how their colours look on a variety of monitors. People who are fortunate enough to have access to several different monitors, like those working for a large employer, youngsters at school or college have an opportunity to test. I am supposing many of the beginners on this forum are not so fortunate.

So, perhaps it's best not to be too specific - pale blue and light beige might have put the point across just as well Wink

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Mozilla FireFox and IE layout/text/coloring issues.

Yeah, I guess. It's just those were colors I used on a site and they went well together.

Really, soft pastel colours work well - unless it's something like a games website. My site retro.thew00t.com/ukcoders (if you ignore the cr*ppy php script news) is a black/dark blue scheme which I think works quite well.

Verschwindende wrote:
  • CSS doesn't make pies

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 5 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Mozilla FireFox and IE layout/text/coloring issues.

Quote:
those were colors I used on a site and they went well together.

Yes, you mentioned you had done so and that's why I asked for a link. Could you share the scheme with the forum?

Quote:
retro.thew00t.com/ukcoders

Now that I like a lot, just a very personal opinion mind you - I'm a sucker for well done monochrome and greyscale schemes. To be honest, I couldn't see any dark blue at first except in the header graphic. Then I thought, it's the laptop TFT screen and the light source, which is at the bottom of the screen, is not strong enough to reach the dark blue bits . Sure enough they are just visible on a CRT, but I have to say I prefer the design without the dark blue.

It took me a while to decipher the font in the heading graphic and I am, personally, opposed to anyone changing my chosen cursor. Glad to see you've used a Creative Commons Licence, however.

Why not put "ukcoders" up for a site check?

MikeyFan
Offline
newbie
Last seen: 15 years 35 weeks ago
Timezone: GMT-7
Joined: 2005-01-20
Posts: 1
Points: 0

Mozilla FireFox and IE layout/text/coloring issues.

Lorraine,

Thanks for pointing out that some colors were not visible (using Firefox) on my page mentioned in your above post.
( http//designbyjoyce.com/colors4.html )

However, NO COLOR NAMES were used.

What WAS missing however, were a few pound (#) signs in front of color codes and a few non-breaking spaces, which probably made the cells simply collapse.

I've now downloaded Firefox and will be sure to check pages using this browser. So many people use I.E. these days that it's sometimes easy to overlook other browsers.

Thanks a lot!
MikeyFan (Joyce)

MikeyTeutul Rocks!
http//designbyjoyce.com/mikey

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 5 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Mozilla FireFox and IE layout/text/coloring issues.

Quote:
However, NO COLOR NAMES were used.

My sincere apologies for not looking further into the code. Once my eyes were drawn to the lower cells including color names, such as honeydew as below:
<tr> 
    <td width="20%">240 255 240 </td>
    <td width="20%">f0fff0 </td>
    <td width="20%">honeydew </td>
    <td bgcolor="#f0fff0" width="40%">&nbsp;</td>
</tr> 

I regret I didn't look any further.
Hopefully, no real harm was done, lessons were learnt on both sides and I did call it "One good site to visit ... all pages."

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Mozilla FireFox and IE layout/text/coloring issues.

@Lorraine - I will gladly put it up for a site check (in fact, I thin kI already did a little while ago), except that it's unfinished.

I love the dark monochrome schemes - in fact, there's also a green scheme (matrixy), and a high contrast one.

FYI the fonts in the logo are SilkScreen (I think it's absolutely fantastic for the main title), and the tagline text is Pricedown (the GTA font). If you can suggest a better font for the tagline please do - it's been racking my brains for a while now.

Verschwindende wrote:
  • CSS doesn't make pies

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 5 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Mozilla FireFox and IE layout/text/coloring issues.

Quote:
If you can suggest a better font for the tagline please do

Now that one, I can read. I'm afraid it's a bit of a "job's worth" issue for me to *recommend* or *suggest* use of text graphics or specialised fonts. I work for a charity for visually-impaired people and teach clients and elderly people how to surf. So I'll have to pass on that one.