Why is this HTML text not visible at times?

[EdwardMartinIII]

I've built a little site for my wife's business, but am seeing a most peculiar thing.

The site test location is

http://mysite.verizon.net/res0b1vy/index.html

For some strange reason, the data under the "Contact Information" header is just not visible at times. I refresh the browser and sometimes it's visible and sometimes it's not. Other pages seem fine -- there's no text that becomes invisible.

I can highlight it, so it's there. The code seems clean and passes validation. I have seen the phenomenon under IE and Mozilla.

Can anyone else see the same problem I'm seeing? If so, can you offer any suggestions?

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[BillyRayPreachersSon]

Your problem appears to be the link CSS on A:link, A:visited, A:hover, and A:active... more specifically:

BACKGROUND: none transparent scroll repeat 0% 0%;

If you remove this line from those 4 CSS declarations, then all seems to work as expected.

Hope this helps,
Dan

 

[cian]

About the code, few things I noticed:

1. why do you have the left links in <h2> tags?

2. Meta tags:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>

I would use:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

3. CSS link
<link rel="stylesheet" href="SiteStyle.css" type="text/css"></link>

I would use:
<link rel="stylesheet" href="SiteStyle.css" type="text/css" />


4. Images:
<img src="KatGraphics/Katrina.jpg" width="240" height="320" alt="Katrina!"></img>

I would use:
<img src="KatGraphics/Katrina.jpg" width="240" height="320" alt="Katrina!" />




Also, I cleaned up your CSS:

body {
color: #000000;
background: #000000 url(Background_Purp.jpg);
font-family:"arial narrow", sans-serif;
font-size: 12pt;
}
a:link {
text-decoration: underline;
color: #ffffff;
background: transparent;
}

a:active {
text-decoration: underline;
color: #ffffff;
background: transparent;
}

a:visited {
text-decoration: underline;
color: #ffffff;
background: transparent;
}

a:hover {
text-decoration: underline;
color: #f33;
background: transparent;
}

h1 {
color: #ffffff;
padding: 5px;
font-family: arial, serif;
font-size: 24pt;
font-style: italic;
text-align: left;
margin-top: 0;
}

h2 {
color: #ffffff;
padding: 5px;
font-family: arial, serif;
font-size: 18pt;
font-style: normal;
text-align: left;
}

h6 {
padding: 0px;
font-size: 8pt;
font-style: italic;
text-align: center;
}

p {
color: #ffffff;
padding: 5px;
font-family: arial, serif;
font-size: 12pt;
font-style: normal;
text-align: left;
margin-top: 0;
}

p.CenteredContent {
text-align: center;
}

p.small {
font-size: 10pt;
}

img {
border: 4px solid #000;
}

img.RightJust {
float: right;
padding: 20px;
}

img.LeftJust {
border-style: none;
border-width: 0;
float: left;
padding: 20px;
}

div.MenuArea {
color: #ffffff;
background: #000000 url(Background_Purp.jpg);
float: left;
padding: 0 5px 0 0;
}

div.BodyArea {
color: #ffffff;
background: #000000 url(Background_Purp.jpg);
padding: 0 0 0 15px;
}

I think the problem is contrast. You specified a dark text colour but no background colour, so I reversed these, light on dark...
See does it work for you...

<!--#sig value=''É'' url=''

http://www.ssi-developer.net''

-->

 

[BillyRayPreachersSon]

> Also, I cleaned up your CSS

Although to be fair, both XHTML and CSS validated fine with w3C...

Dan

 

[EdwardMartinIII]

Okay, I nailed it.

The problem stemmed from declaring the background image in the DIV tags. It worked fine declared in the BODY tag, and if I don't re-declare it in the DIV tags, then all the text appears as it ought to.

It was in the CSS, but it wasn't what I expected it to be. Thanks to your suggestions, my focus was tighter on the background situation and that's how I found the problem, so muchas gracias!

Cian, I add end-tags because it looks more like XML that way and an easier read for me. I like separate start and end tags, even if they're adjacent. It's purely (pardon) a style issue. I put my menu items in h2 because I want them to stand out and be bigger.

Dan, I'm sorry, but I could not find that code in my CSS. And yes, I try to make sure all my code at least passes a validator before I bug anyone else about it (although I know that valid XHTML and CSS is no guarantee of validity or sensibleness of content ). I would be a very naughty monkey otherwise.

Thanks!

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[BillyRayPreachersSon]

You couldn't find the code in your CSS?

It's right at the top! In the CSS - the A tag declarations, right at the top.

Paste this into your text-editor "find" box and search for it on the page... You can hardly miss it!

BACKGROUND: none transparent scroll repeat 0% 0%;

Dan

 

[EdwardMartinIII]

Seriously. It's not there. I just checked again and did a search on the string. Besides, I don't capitalize my tags anyway (not legal in XHTML).

I don't know what you're reading, but it ain't my code. I even re-checked the code online (I'm not at my FTP client, so I can't update it yet), in case I somehow deleted the first line or something. Nope. It wasn't in cian's re-formatting of my CSS file, either.

Here's the CSS file (this has had the two background images removed from below, but is otherwise identical to the copy online):

body                   {
                         color: #000000;
                         background-image: url(KatGraphics/Background_Purp.jpg);
                         font-family:"arial narrow", sans-serif;
                         font-size: 12pt;
                       }
a:link
                       {
                         text-decoration: underline;
                         color: #fff;
                         background: transparent;
                       }
a:visited
                       {
                         text-decoration: underline;
                         color: #fff;
                         background: transparent;
                       }
a:hover
                       {
                         text-decoration: underline;
                         color: #f33;
                         background: transparent;
                       }
a:active
                       {
                         text-decoration: underline;
                         color: #fff;
                         background: transparent;
                       }

h1                     {
                         color: #ffffff;
                         padding: 5px;
                         font-family: "arial", serif;
                         font-size: 24pt;
                         font-style: italic;
                         text-align: left;
                         margin-top: 0px;
                       }

h2                     {
                         color: #ffffff;
                         padding: 5px;
                         font-family: "arial", serif;
                         font-size: 18pt;
                         font-style: normal;
                         text-align: left;
                       }

h6                     {
                         padding: 0px;
                         font-size: 8pt;
                         font-style: italic;
                         text-align: center;
                       }

p                      {
                         color: #ffffff;
                         padding: 5px;
                         font-family: "arial", serif;
                         font-size: 12pt;
                         font-style: normal;
                         text-align: left;
                         margin-top: 0px;
                       }

p.CenteredContent      {
                         text-align: center;
                       }

p.small                {
                         font-size: 10pt;
                       }

img                    {
                         border-width: 4px;
                         border-style: solid;
                         border-color: #000000;
                       }

img.RightJust          {
                         border-style: none;
                         border-width: 0px;
                         float: right;
                         padding: 20px;
                       }

img.LeftJust           {
                         border-style: none;
                         border-width: 0;
                         float: left;
                         padding: 20px;
                       }

div.MenuArea           {
                         color: #000000;
                         border-width: 0px 0px 0px 0px;
                         border-style: solid;
                         border-color: #000000;
                         float: left;
                         padding-left: 0px;
                         padding-right: 5px;
                         padding-top: 0px;
                         padding-bottom: 0px;
                       }

div.BodyArea           {
                         color: #000000;
                         border-width: 0px;
                         border-style: solid;
                         border-color: #000000;
                         padding-left: 15px;
                         padding-right: 0px;
                         padding-top: 0px;
                         padding-bottom: 0px;
                       }

(it's a mystery -- what code are you reading? Now I'm curious!)

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[manarth]

Cian, I add end-tags because it looks more like XML that way and an easier read for me. I like separate start and end tags, even if they're adjacent.

The W3C XHTML compatibility guidelines has this to say:

use the minimized tag syntax for empty elements, e.g. <br />, as the alternative syntax <br></br> allowed by XML gives uncertain results in many existing user agents.

I put my menu items in h2 because I want them to stand out and be bigger.

Presentation IS NOT a reason to use a h2. That said, your argument does bear merit, and has a certain validity.

HTML was originally a method for marking up document structure - not visual layout. The <hx> tags are intended to convey levels of headings within a document. It stands to reason that you cannot have a heading unless it's directly followed by pertinent content.

A common convention for menus is to use a bulleted list: <ul>. CSS will allow you to adopt the same visual presentation as you currently use with a <h2>, but the logical document markup of a list is much more germane to a navigation menu.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[ChrisHirst]

Edward, something to be aware of is the <h2><a> combination could well trigger "spam" flags for the SEs, a safer way would be to just use CSS to set the <a> styles.

and I don't see this either

BACKGROUND: none transparent scroll repeat 0% 0%;

Chris.

Indifference will be the downfall of mankind, but who cares?

 

[BillyRayPreachersSon]

Holy cow - it turns out that my default registered application for CSS, Microsoft's Visual Interdev (!) oh-so nicely inserted that before displaying it to me... What a shoddy piece of coding that is! ;o)

Here's a tip, though, Edward... Don't put that line into your code - it will screw things up even more heheh *grin*

Incidentally, it also converted most things to uppercase, removed the last semicolon of each block, and generally made it very unpleasant to read... In fact, I've just installed TextPad as my registered CSS viewer.

Dan

 

[EdwardMartinIII]

Manarth, thanks for pointing that out. Happily enough, I can do a bulk-edit and patch that one up.

It's also good to know that about the h2 tag. I'll have to specify a special class, say, "MenuList" or something like that.

Dan, your second paragraph made me laugh out loud. Thanks!

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door