Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

How Do I "UnDisplay" certain button on InvisionFree Forums?


  • Please log in to reply

#1
Bantymom

Bantymom

    New Member

  • Member
  • Pip
  • 5 posts
I am working on skinning this forum: BantyTest3

On that page, you will see several default buttons (report, edit, quote, profile, PM, email).

I have two questions:

1) if the images of the buttons were gone, would there still be a link there and would it be marked by a word (that would then take on the characteristics of my TABLE properties)?

2) if so, is there a way to remove the images in the Admin CP, in the CSS with something like
.codebuttons {display: none;}
(I tried that one, but it didn't work, so it's only an example here), or a script I could put in my Board Wrappers?

On that same page you can see that I've replaced the "Add Post", "New Topic:", and "New Poll" images with new images that fit my board, but I didn't have to do anything with the link. I don't really want to make new images for every one if there is a simple way to just not display the images and let the text for the link speak for itself.

Thanks so much for your help,
BantyMom

*offers cookies*


CSS
overflow-x: hidden; overflow-y: auto; } 

form { display:inline; }
img  { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #BCB886; margin:30px 10px 30px 10px;background-color:#E4E1BE; background-image: url(http://209.85.48.9/14610/156/upload/p31974.jpg); background-position: center top; }

TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #BCB886; }
a:link, a:visited, a:active { text-decoration: none; color: #BCB886 }
a:hover { color: #9A9664; text-decoration: none }

.backgroundtable {
width: 850px;
background: #E7E3BB;
background-image: url(http://209.85.48.9/14610/156/upload/p32151.jpg);
border: 3px dotted #FAFBEA;
}

fieldset.search { padding:6px; line-height:150%; border: 2px solid #FAFBEA}
label { cursor:pointer; }

img.attach { border:2px outset # EBEBD1;padding:2px }


.googleroot  { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: # EBEBD1; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:# EBEBD1; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:# EBEBD1 }

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help	{ padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:# EBEBD1 }
.caldate   { background-color: #E4E1BE; color:#9A9664; font-size: 18px; font-family: CygnetRound, Cursive, Serif; vertical-align:middle; text-align: left; padding-bottom:2px;margin:1px}

.warngood { color:green }
.warnbad  { color:red }

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-family: CygnetRound, Cursive, Serif; font-size:32px; font-weight:bold; color: #9A9664}
#profilename img { display: none; }

#calendarname { font-family: CygnetRound, Cursive, Serif; font-size:32px; font-weight:bold; color: #9A9664 }
#calendarname img { display: none; }


#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg   { text-align:center; margin-top:15px } 

#ucpmenu	{ line-height:250%;width:22%; border-right:2px solid #FAFBEA; border-botton:2px solid #FAFBEA; border-left:2px solid #FAFBEA; background-color: #E4E1BE }
#ucpmenu p  { line-height:150%;padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #E4E1BE; border-right:2px solid #FAFBEA; border-botton:2px solid #FAFBEA; border-left:2px solid #FAFBEA; line-height:250%; width:auto }
#ucpcontent p  { line-height:150%; padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }

#logostrip { background-color: #F2F1DF; background-image:url();padding:0px;margin:0px; }
#submenu   {font-size:10px;margin:3px 0px 3px 0px; font-weight:bold; }
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; }
#submenu img { display: none; }

#userlinks { border:1px solid #EBEBD1; background-color: #F2F1DF }

#navstrip  { font-weight:bold;padding:6px 0px 6px 0px; }
#navstrip img { display: none; }

.activeuserstrip { color: #FAFBEA; background-color:#E4E1BE; padding:6px }

.pformstrip { background-color: #F2F1DF; color:#D4D0A0; font-size: 10px; vertical-align:middle; padding-bottom:2px;margin:1px }
.pformleft  { background-color: #D4D0A0; color:#9A9664; padding:6px; margin-top:1px;width:25%; border-top: 1px solid #E4E1BE; border-right: 1px solid #E4E1BE; }
.pformleftw { background-color: #D4D0A0; color:#9A9664; padding:6px; margin-top:1px;width:40%; border-top:1px solid #E4E1BE; border-right: 1px solid #E4E1BE; }
.pformright { background-color: #D4D0A0; color:#9A9664; padding:6px; margin-top: 2px;border-top:1px solid #E4E1BE; }

.post1 { background-color: #F4F4E5  }
.post2 { background-color: #F4F4E5  }
.postlinksbar { color: #FAFBEA; background-color:#E4E1BE;padding:7px;margin-top:1px; font-size:10px; font-weight: bold; background-image: url() }

.row1 { background-color: #FAFBEA }
.row2 { background-color: #EBEBD1 }
.row3 { background-color: #EBEBD1 }
.row4 { background-color: #EBEBD1 }

.darkrow1 { background-color: #D4D0A0; color:#FAFBEA; }
.darkrow2 { background-color: #E4E1BE; color:#FAFBEA; }
.darkrow3 { background-color: #EBEBD1; color:#9A9664; }

.hlight { background-color: #E4E1BE }
.dlight { background-color: #EBEBD1 }

.titlemedium {
font-weight: normal;
font-size: 10px;
text-transform: lowercase;
color:#D4D0A0;
padding:2px;
margin:0px;
background-image: url();
background-color: #F2F1DF;
}
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: underline; color: #FAFBEA }

.maintitle {
font-family: CygnetRound, Cursive, Serif;
vertical-align:middle;
text-align: center;
font-size: 26px;
color:#FAFBEA;
letter-spacing:1px;
padding:3px 3px 3px 3px;
background-color: #D4D0A0;
background-image:url();
background-repeat:repeat-x;
background-position:bottom; 
border-bottom: 2px dotted #FAFBEA;
border-top: 2px dotted #FAFBEA;
}
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active, .maintitle a:hover  { text-decoration: none; color: #FAFBEA }
.maintitle img { display:none; }

.plainborder { border:2px solid #FAFBEA;background-color:#E4E1BE }
.tableborder { border:0px solid #FAFBEA; background-color:#F2F1DF; padding:0px; margin:0px; width:100% }
.tablefill   { border:1px solid #EBEBD1;background-color:#FAFBEA;padding:6px;  }
.tablepad	{ background-color:#EBEBD1;padding:6px }
.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }

.wrapmini	{ float:left;line-height:1.5em;width:25%; }
.pagelinks   { float:left;line-height:1.2em;width:35% }

.desc { font-size:10px; color:#C3C090 }
.edit { font-size: 9px }

.signature   { font-size: 10px; color: #9A9664 }
.postdetails { font-size: 10px }
.postcolor   { font-size: 12px; line-height: 160%; color: #9A9664 }

.normalname { font-size: 12px; font-weight: bold; color: #9A9664}
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #9A9664; text-decoration:none;}

.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #9A9664; background-color: #EBEBD1; border-left: 1px solid #E4E1BE; padding: 10px}
#CODE { font-family: Verdana, Arial; font-size: 11px; color: #9A9664; background-color: #EBEBD1; border-left: 1px solid #E4E1BE; padding: 10px}


.credit { background: #F2F1DF; border: 1px solid #E4E1BE; padding: 4px 4px 4px 4px; width: 500px; text-align: center; font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 10px }

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12p; color: #9A9664}

.row4 div.row4 {border: none! important}
div.row4 {border-color: #9A9664; border-right: 1px solid #E4E1BE; border-bottom: 1px solid #E4E1BE!important; border-top: 1px solid #E4E1BE!important; border-left: 1px solid #E4E1BE!important; }
div.row4 {border-color: #E4E1BE!important; background-color: #F2F1DF;}

.codebuttons  { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }


.forminput, .textinput, .radiobutton, .checkbox  { color: #9A9664; background-color: #FAFBEA; font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #E4E1BE;border-bottom:1px solid #E4E1BE }
	
.purple { color:purple;font-weight:bold }
.red	{ color:red;font-weight:bold }
.green  { color:green;font-weight:bold }
.blue   { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold } FFFFCC }


HEADER
<table class="backgroundtable" align="center">
<tr><td>

<table width="750" align="center">
<tr><td valign="top">
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>

<center><div class="credit">"Glass Slippers and Fairy Godmothers" skinned by Bantymom of <a href='http://forums.redcarpetrebellion.net/index.php?'> RC&R</a><br>thank you to antique acc!dent of  <a href='http://forums.redcarpetrebellion.net/index.php?'> RC&R</a> for this box and for helping with the one below</div></center>

FOOTER
<script type='text/javascript'>
/* Puts the categories in the Profile one under the other
Profile page mod created by CrAzY_J
do not redistribute or edit this code without the creator's permission*/

if(/showuser=/.test(this.location.href)){
   var tables = document.getElementsByTagName('table');var arr = [];
   for(var t=0;t<tables.length;t++){
	  if(tables[t].cellSpacing == '2' && tables[t].getElementsByTagName('table')[3]){
		 tables[t].style.display = 'none';
		 for(var x=0;x<tables[t].getElementsByTagName('table').length;x++)
			arr.push(tables[t].getElementsByTagName('table')[x].cloneNode(true));
		 var ntable = document.createElement('table');
		 ntable.align = 'center';ntable.cellPadding = '0';ntable.cellSpacing = '2';ntable.width = '100%';
		 var nbody = document.createElement('tbody');
		 var nrow = document.createElement('tr');
		 var ncell = document.createElement('td');
		 ncell.className = 'plainborder';ncell.width = '100%';ncell.align = 'center';
		 for(r=0;r<arr.length;r++)
			ncell.appendChild(arr[r]);
		 nrow.appendChild(ncell);
		 nbody.appendChild(nrow);
		 ntable.appendChild(nbody);
		 tables[t].parentNode.insertBefore(ntable,tables[t]);
		 break;
	  }
   }
}

</script>

</td></tr></table>
</td></tr></table>

<script type="text/javascript">
<!--
/*
Remove Delete Cookies Set Section
Coded By Greg/Moose
Don't edit or repost
*/
var div = document.getElementsByTagName('div');
for(d=0;d<div.length;d++){
if(div[d].align == "right" && div[d].getElementsByTagName('a').length == 2 && div[d].getElementsByTagName('a')[0].href.match(/CODE=06/) && div[d].getElementsByTagName('a')[0].innerHTML.match(/^Delete cookies set by this board$/) && div[d].getElementsByTagName('a')[1].href.match(/CODE=05/) && div[d].getElementsByTagName('a')[1].innerHTML.match(/^Mark all posts as read$/)){
div[d].style.display = "none";
break;
}}
//-->
</script>

Edited by Bantymom, 30 September 2009 - 01:41 PM.

  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
I really don't want to get too involved in this for several reasons, but will try to answer about the image links. There are a few ways to make images a link. One is to surround the image tag with the link tags. The other is to take an entire background image with link text on it and make it an image map which makes the text hotspots.

I took a quick look at the code generated by InvisionFree for your page. As with a lot of code used at MySpace and other social networks/forums, there is a lot of tables being used and really, really bad coding. I could show you the problems using the w3c.org's validators, but I'm sure you aren't interested in correcting all those mistakes. :)
  • 0

#3
Bantymom

Bantymom

    New Member

  • Topic Starter
  • Member
  • Pip
  • 5 posts
You underestimate me. *sniffles*

:)

I'm know that skinning a little forum seems really, I don't know, silly? Especially as all I have to do is play with the CSS as opposed building my own site from scratch with HTML.

However, I'm absolutely brand new at this. This is my very first try at even attempting one of these skins, or any coding at all. But I will fix stuff if it's pointed out to me and if I can figure it out. If someone shows me something, I'll try to learn it, even if I'm slow. (It's taken me weeks to figure this out on my own, going from one site to another, trying one thing at a time, refreshing the site, and going back to make one change at a time) Some of the errors were mine, which I didn't catch because they didn't show up on the skin. Some were invisionfree's I guess, because they were in parts of the code that I hadn't touched. Anyway, it's all fixed now. Neat and tidy coding is certainly my preference.

*point with pride to the certification now posted at the bottom of the main page* (which you can get to by clicking the blue INVISIONFREE image at the top)

:)

So, I'm really hoping that you'll have another go at this as you seem to be one of the major problem solvers here. *looks hopeful*

From your answer, I can't tell if you misunderstood my question or not, because it sounded like you were telling me that if I wanted to use images for links, there would be several ways to do it. However, it's also possible you were telling me that you couldn't answer my question because there was no way to know which of the several possible ways ImageFree used to set up the links in the first place.

So I'm going to try to explain myself again (Not your fault, I have to do that often because, as you can clearly see, I tend to ramble).

I'm really trying to avoid using images for the links. The forums come with default images, which are easy to see because they are blue and ugly on the skin (on the page in the link in the first post).

There is a page the Admin can get to where all the images are stored and where they can be changed. That's what I did with the little gifs I made for "Add Post", "New Topic", and "New Poll". However, if there were a way to remove the images that would leave the links in place with words marking the spot instead, that is what I would prefer. I don't have a need to clutter thing up by uploading a bunch of images if they aren't needed. I did the three that I did because I wanted to use the fancy font, but for the rest of them, I would be happy just to leave them in the default set for text at the beginning of my CSS.

(Hmmm, would it have been more correct to say that "I would be happy if they just inherited the values set in the TABLE"? Well, if not, that's the way my brain thinks of it now.)

At the top of the main page, under the line where the INVISIONFREE image resides, are a row of links for the submenu. Those came with blue default images beside them. I removed them with
#submenu img {display : none;}
, and the links (the words) still work. But in that case, the words were the links and the images seemed to be only decoration. If I do the same thing to remove the logostrip img, the link is gone.

:)

So, my question is:

Is there a simple way to remove the ugly images using either the CSS or with a simple line of code in the Page Wrapper and still have the links there in the form of plain text?

Possible Answers (and any one is fine with me, I just want to know):

a) No, it isn't possible. It's somewhere in the rest of the HTML that you can't get to, so just go change the images to images of words
b) Yes, it's possible, but it would take a lot of java script and it would be just as easy (or easier) and much more neat and tidy in a coding sense to just replace the images with images of words
c) Oh yes, of course, piece of cake. And this is how you would do it:

...

So, thank you for taking the time to read my ramble again and for any help you can give me, even if it's just to tell me that I'm just going to need to make new images. If it comes with a little bit of explanation, I'll learn something as well.

Cheers,
Banty
:)

Oh, and now you've got me reading about the advantages of CSS and structural markup over nested tables and spacer gifs.

(a little while later...)

Ha!!! It makes sense. I'm beginning to think I can understand it.

Edited by Bantymom, 01 October 2009 - 12:58 AM.

  • 0

#4
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
I may not get to all questions at one time. I see the CSS is nice and clean. Great job there. These are the HTML errors: HTML Errors Only 16 critical ones. I just had someone who had over 922 HTML errors and 700+ warnings. There CSS had 68 errors so you can see why I was hesitant in trying to tackle this.

Using "display: none;" removes the content from the document flow. Not a good idea in many cases. If you need to maintain the layout, try using "visibility: hidden;" instead.

With a standard image link, the image code can always be removed and replaced by a Text Link. Examples:
<p><a href="URL path to external link" title="Mouseover Description"><img style="width: XXpx; height: YYpx; border: 0;" src="Path to image" alt="Text Description"></a></p>

<p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
If that image link is similar to what your pages have and you have access to the code, then you can just remove the image tag and add a text link description where the image tag was. If they inserted the alt="" attribute in the image tag and you deleted the image, that text in the "alt" attribute should show if image can't load. If the link works with that text, you can always just change the "alt" text to whatever link description you need to use.

A lot of HTML is generated by PHP and some of it is not editable. All the PHP, I believe, can not be deleted. Think you get a warning box on saving changes.

You are missing a document type which is a serious no-no. It puts browsers in Quirks Mode which doesn't help to parse your pages the way you want them. Missing the open body tag after the closing head tag. Lots of closing "div" tags which have no opening "div" tag. One empty set of link tags. Not allowed since the "href" attribute is empty. Empty set of bold tags. Not allowed. Plus, bold tags are outdated. Some others are nitpicking ones that come up a lot and validator flags them. All ampersands MUST use the character entity for itself.

Probably missed something, but it would be nice to see what the image links look like to you in the admin panel. I see ones on the HTML like this:
<div align='left' class='darkrow3' style='float:left;width:auto'>
		<a href='http://z6.invisionfree.com/BantyTest3/index.php?act=Msg&amp;CODE=04&amp;MID=1'><img src='http://209.85.62.23/style_images/1/p_pm.gif' border='0' alt=''></a><a href='http://z6.invisionfree.com/BantyTest3/index.php?act=Mail&amp;CODE=00&amp;MID=1'><img src='http://209.85.62.23/style_images/1/p_email.gif' border='0' alt=''></a>
		</div>

  • 0

#5
Bantymom

Bantymom

    New Member

  • Topic Starter
  • Member
  • Pip
  • 5 posts
You are very patient with me and I appreciate the time you take to answer any of my questions that you are able to get to. You inspire me to work on this more and give me confidence that I can eventually understand it. I am happy to try to make all the corrections myself if I can get to them. That Validation link is amazing!

I see the CSS is nice and clean. Great job there.


*beams*

There are still a ton of warnings, all of which have to do with using the same color or background color in two places.

Same colors for color and background-color in two contexts #CODE and .googlebottom


If those are really problems, I want to fix them, but I need to understand why; what is the potential problem if two things have the same color. I ran a few other of these kinds of forums and found that having the same color or background color in two contexts is far and away the most prevalent warning.

Thanks for the "display:none;" vs "visibility: hidden;" information. I understand the difference now and will add it to my arsenal. So far, the things I removed I wanted completely removed and for the other things in that line to move over, but there are things I hadn't removed yet because I didn't want things to move. Now I have the solution.

On to the link question...

This was a great lesson for me. It helped me get into looking at the source and made me determined to really look at it and understand it (CSS is easier for me than html).

With a standard image link, the image code can always be removed and replaced by a Text Link.


That sentence alone solidified what I vaguely figured had to be the case. I mean, we make links all the time now using just words. I just couldn't figure out how to get to the image code to replace it. And looking at your examples really helped.

I found the place in my source code that you used as an example and found it in the source for another forum like mine that was using only text. I had tried that before coming here, but didn't know how to apply what I was seeing. As you said, my HTML was generated by InvisionFree (I guess) and basically I can't go in and edit it directly. However, I am provided with a place I can change the link to all the images and after reading what you said and after hitting my head for being so slow on the uptake, I went there and fixed it:
Posted Image

This is my Image Control Panel and here you can see what the links look like to me in the admin panel.

The first, third, and fourth boxes show the default information with the links to the default images. (The second one there should have given me a clue! it's just a simple bit of text, though it isn't used as a link.) The code in the defaults didn't look exactly like what was in either of your examples, but it seemed to all be inside the all-important image tags, so I took a chance and just replaced the whole thing with the text I wanted. Bingo! Who knew it could be so easy!

But I didn't like the look of it just taking the values of my TABLE. Bravely, I went to my CSS, made a new class (.buttons) to change the look and put padding between each one. I didn't know whether to use "span class" around the words or "div class" but looked at the other forum's code and saw that they had used a new div for each word. I did the same, saw that they needed to be displayed inline, and Voila! it worked.

They do sit higher in the row than I want them to, and everything I've tried (vertical-align: bottom, padding, margins, floating) did nothing to fixing it, and the other forum had them in the same place, so I just left them there. At this point it's good enough.

*does the happy dance*

These are the HTML errors: HTML Errors Only 16 critical ones.... You are missing a document type which is a serious no-no. It puts browsers in Quirks Mode which doesn't help to parse your pages the way you want them. Missing the open body tag after the closing head tag. Lots of closing "div" tags which have no opening "div" tag. One empty set of link tags. Not allowed since the "href" attribute is empty. Empty set of bold tags. Not allowed. Plus, bold tags are outdated. Some others are nitpicking ones that come up a lot and validator flags them. All ampersands MUST use the character entity for itself.


Below are images of the two other places that allow me access to the coding. The first is the CSS window (the overflow thing is still there because I took the screen cap from a skin I just started to work on and it comes that way from InvisionFree). The second is called BOARD WRAPPERS and it's my only way to access the html. To the left of both of them, you can see most of the rest of the admin panel.
Posted ImagePosted Image
Through the Board Wrappers, I can add html(?) directly, or I can add javascript to change things already there that I otherwise can't get to directly. I have one in there currently to change the profile page from four boxes arrayed 2x2, and instead putting the four boxes one below the other. You can see part of it there. Others have been written to pick up and use information from various places to display somewhere else. There are pages and pages of those kinds of codes posted all over the internet. You can see what is currently in my Headers and Footers but looking at my first post. That is where most of the HTML errors occurred, of course, HTML that I added incorrectly.

You can see there is a place to add the document type right up at the top. You can also see the dire warning that declares it to be for advanced users only. I do not consider myself an advanced user. I went to both links you gane and was immediately over my head. The second link (quirks mode) helped some, and now I know why I need the DOC TYPE, but I'm not really sure which to use.

This was the code used as an example in the first link. Is it generic? Will it work? Or is there something I have to figure out to know which one I should use?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

And I see that there are things that need to go between the <head> html tags, and there is a place for that too. Would this be what goes there?
<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />


Regarding the HTML errors:

Of the 16 critical errors, I've cleaned up 14 of them!!! All of those were things I put in wrong and were accessible in my wrappers or the image board.

Oddly enough, one of them was caused by my using "div class='maintitle' " in one of my text-link fixes. It didn't like that div class there at all, but it had no problem with "div class='button' ". I took it out and fixed the style by assigning all the maintitle styles to #logostrip which is where the text-link thing appears, but I don't know why "div class='button' " was ok.

Four involved the ampersand. Above you said that "All ampersands MUST use the character entity for itself". Does that mean the &amp;? I hope so, because using that in two places cleaned up four of the errors!

So I'm down to only 2 critical errors and 56 warnings.

Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"
<html><head><title>Bantytest3</title>


I tried the DOCTYPE I asked about above and got somewhere around 170 critical errors, so that certainly wasn't right. I asked for the tidy HTML, and it suggested a DOCTYPE, which I tried and still got more than 150 critical errors, so I pulled that out as well. I'll continue with trial and error unless there is some way to figure out what I need. When I finish this, I'm going to ask InvisionFree support which it should be.

Line 281, Column 16: end tag for element "HEAD" which is not open
</script></head><table class="backgroundtable" align="center">
The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.


When I look at the source, I find one "head" and one "/head", and the "/head" seems to be in the place it's indicated on the Board Wrappers (see the earlier image) right between the Javascript and Header sections, which is right before the (table class="backgroundtable" align="center") part. So unless it's caused by the shorttag error above it, I'm not sure how to fix it :)

All of the rest of the 56 warnings are shorttag errors related to the lack of a DOCTYPE.

oh my! I'm sorry for writing so much. I just wanted to tell you that I was successful, to thank you for your help, to answer a few of your questions, and to tie up a few loose ends of my own (in blue).

Thank you for being such an informative and patient resource.

Cheers,
Bantymom

Edited by Bantymom, 02 October 2009 - 04:40 PM.

  • 0

#6
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
1) The HTML 4.01 Strict doctype may be better for you. XHTML 1.0 Strict does not suffer syntax errors well. All acceptable doctypes for your pages are under the HTML 4.01 or XHTML 1.0 ones. You must use the entire doctype including the URI. Since your tags are coded like this, "<meta http-equiv="content-type" content="text/html;charset=utf-8" />", you must use the XHTML 1.0. XHTML 1.0 Transitional would be ok. Otherwise, you will have to remove the closures for all those tags that normally don't have closures by removing the space and "/" symbol. These cause short tag errors with wrong or no doctype as you found out.

2) The color warnings are because some colors do not contrast well with each other making content hard to read.

3) You can add meta tags. The only one absolutely required is the character set meta tag which I think you have. Others for Search Engines and to provide some directions for other 'Bots.

Meta Tag Generators:

http://www.ssmedia.com/utilities/meta/
http://www.1stsitefr...om/meta_gen.htm
So, You Want A Meta Command, Huh?: http://www.htmlgoodi...cle.php/3479471
Online Meta Tag Generator: http://www.webweaver...meta-generator/

4) The ampersand needs to use its character entity. Some JavaScript will have lots of them and may not work if changed to the entity form.

Give a shout if you need more help/info. Good luck.
  • 0

#7
Bantymom

Bantymom

    New Member

  • Topic Starter
  • Member
  • Pip
  • 5 posts
Thank you. I've used

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

and I now have only one major error and the same 57 warnings. It was the best result I could get. Thank you for all your help. You've taught me quite a bit and led me to some wonderful resources.

Cheers,
Bantymom
  • 0

#8
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
You're welcome. Withe the HTML 4.01 Transitional doctype, you are getting all those errors probably from the short cut tag flags. That's because you do not need the space and the "/" symbol in the meta, linl break and image tags now.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP