"_" Character appearing before Img

H

Hywel Jenkins

I have a strange little annoyance.

What would cause a short "_" to appear on an simple html page just before an
image?
Its seems to be visible in IE6 & Firefox, different PCs.

Ex. http://www.garyluttrell.com/ContactLuttrell.htm

Any suggestions appreciated.
Click to expand...

It's because there's whitespace before the image, which is part of a
link. Change this snippet

....htm">
<img src="makepayment1.gif" ...

to
....htm"><img src="makepayment1.gif" ...
 
J

Jonathan N. Little

Aaron said:
I have a strange little annoyance.

What would cause a short "_" to appear on an simple html page just before an
image?
Its seems to be visible in IE6 & Firefox, different PCs.

Ex. http://www.garyluttrell.com/ContactLuttrell.htm

Any suggestions appreciated.
Click to expand...

Whitespace: spaces, tabs, carriage returns...
<a href="somewhere">*whitespace here*<img src="myimage.jpg></a>
 
N

Noozer

That fixed the top MakePayment but there was no space in the html of the
lower Map&Directions image.
Click to expand...

No, but there is a line break.

An ugly trick I use (and any comments are welcome) is to close the tag at
the beginning of the next line. i.e.:
 
J

Jonathan N. Little

Noozer said:
No, but there is a line break.

An ugly trick I use (and any comments are welcome) is to close the tag at
the beginning of the next line. i.e.:
Click to expand...

That can cause problems for HTML 4.01 Strict,
better to wrap it this way:

<a href="link.one">Link One
</a><a href="link.two">Link Two...

or

<a href="link.one">Link One</a><a
href="link.two">Link Two</a>...
 
A

Aaron

Jonathan N. Little said:
Aaron wrote:


Yes there is a carriage return between the opening A tag and the open FONT
tag (which BTW your should not use) Check out the rest of your errors

http://validator.w3.org/check?verbose=1&uri=http://www.garyluttrell.com/ContactLuttrell.htm

Result for http://www.garyluttrell.com/ContactLuttrell.htm - W3C Markup
Validator
Click to expand...

So Jonathan
I thought the HTML Declaration may have helped another problem on this page,
but no.
I have a strange space matter after the submit/cancel buttons, before the
email address privacy paragraph.
In that, there is No space viewing with Firefox, and a double space with
IE6.
 
J

Jonathan N. Little

Aaron wrote:
So Jonathan
I thought the HTML Declaration may have helped another problem on this page,
but no.
I have a strange space matter after the submit/cancel buttons, before the
email address privacy paragraph.
In that, there is No space viewing with Firefox, and a double space with
IE6.
Click to expand...
I am not looking at the source as parsed by a browser but at your
actually source downloaded.

You have no 'HTML Declaration' (which I think mean DocType)

Your Code:
<html><head><title>Luttrell Contact</title></head>
<body><img src="ContactLuttrell_files/co...

A doctype declaration goes before the <HTML> tag as thus:

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

But of course new pages should be HTML 4.01 strict, but your markup as
is will be a big problem without correction.

Stuff like this. your actual markup:

</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font><p>
<font face="verdana" size="-1"><font color="red" size="1"><font
color="black" size="-2"><font face="arial" size="-2"><font color="red"
size="1"><font color="black" size="-2"><font color="red" size="1"><font
color="black" size="-2"><font color="red" size="1"><font color="black"
size="-2"><font color="red" size="1"><font color="black" size="-2"><font
color="red" size="1"><font color="#808080" face="verdana"
size="-2"><font size="2"><font color="#000000" face="verdana"
size="-1"><br><br><br>
</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></p></form></body></html>

What WYSIWYG editor did you use? That markup is a tell tail sign that
you did. Dump the font element as use a stylesheet so this is unnecessary

<hr align="left" color="#ff0000" width="70%">

You could style your HR in a stylesheet with:

HR { border: 1px solid #ff0000; #ff0000; width: 70%; margin-left: 0; }

Then all you need is

<hr>

in your markup....

All the FONT junk isn't required all you need if you want your page in
sans-serif font is in your stylesheet

BODY {
font-family: Arial, Helvetica, Tahoma, Geneva, Gothic, sans-serif;
font-size: 100%;
}

If you need to specify required fields then a class would do, say:

..required { color: #ff0000; }

and in your markup:

<label for="name">Your Name:<span class="required">*</span></label>

Good luck you have your work cutout for you.
 
A

Alan J. Flavell

On Sun, 19 Mar 2006, Jonathan N. Little wrote:

[unholy scrapyard of said:
<hr align="left" color="#ff0000" width="70%">

You could style your HR in a stylesheet with:

HR { border: 1px solid #ff0000; #ff0000; width: 70%; margin-left: 0; }
Click to expand...

In theory, yes. When I tried this, some years ago, in the era when
IE4 and NN4 still needed to be considered, I found that some browsers
were quite reluctant to style <hr> itself, and I finished up with a
plan which involved putting the <hr> (which I retained for fallback
use when CSS was unsupported or disabled) inside <div>, and using CSS
for styling the <div> (and for setting the hr width to 0 so that it
didn't show). [1]

Do we have current information on any residual problems with merely
All the FONT junk isn't required
Click to expand...

Amen to that.


[1] if anyone's still interested in this history:
http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html -
but the content hasn't been substantively revised since 2002 or so.
 
J

Jonathan N. Little

Alan said:
On Sun, 19 Mar 2006, Jonathan N. Little wrote:

[unholy scrapyard of said:
<hr align="left" color="#ff0000" width="70%">

You could style your HR in a stylesheet with:

HR { border: 1px solid #ff0000; #ff0000; width: 70%; margin-left: 0; }
Click to expand...

In theory, yes. When I tried this, some years ago, in the era when
IE4 and NN4 still needed to be considered, I found that some browsers
were quite reluctant to style <hr> itself, and I finished up with a
plan which involved putting the <hr> (which I retained for fallback
use when CSS was unsupported or disabled) inside <div>, and using CSS
for styling the <div> (and for setting the hr width to 0 so that it
didn't show). [1]
Click to expand...

I use to think that way of trying to fully accommodate 4x browsers until
I started reviewing my traffic, <1% in fact in the .01% range! If it
wall severely impair the page in these browsers a may add a conditional
stylesheet that disables all the float and effect for them...No pretty
but hey, then could upgrade.
Do we have current information on any residual problems with merely
styling the <hr> itself?
Click to expand...

Depends, if it fail, so what, just means the HR is not read and is
'groove' style. Not sure why the OP wants 70% width anyway.
All the FONT junk isn't required
Click to expand...

Amen to that.


[1] if anyone's still interested in this history:
http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html -
but the content hasn't been substantively revised since 2002 or so.
Click to expand...

If he redoes his page and used stylesheet in addition tom being easier
to maintain and change but the markup will be nearly reduced my half.
 
A

Alan J. Flavell

Alan said:
In theory, yes. When I tried this, some years ago, in the era
when IE4 and NN4 still needed to be considered, I found that some
browsers were quite reluctant to style <hr> itself,
Click to expand...
[...]

I use to think that way of trying to fully accommodate 4x browsers
until I started reviewing my traffic, <1% in fact in the .01% range!
Click to expand...

Sure; I was talking about a page of mine that goes back to 1999.

I was just interested to know whether there are still any known
problems with styling said:
Depends, if it fail, so what, just means the HR is not read and is
'groove' style.
Click to expand...

One can certainly hope that it would fail safely, then I'd have no
argument with that.
 
A

Aaron

Jonathan N. Little said:
Alan said:
On Sun, 19 Mar 2006, Jonathan N. Little wrote:

[unholy scrapyard of said:
<hr align="left" color="#ff0000" width="70%">

You could style your HR in a stylesheet with:

HR { border: 1px solid #ff0000; #ff0000; width: 70%; margin-left: 0; }
Click to expand...

In theory, yes. When I tried this, some years ago, in the era when IE4
and NN4 still needed to be considered, I found that some browsers were
quite reluctant to style <hr> itself, and I finished up with a plan which
involved putting the <hr> (which I retained for fallback use when CSS was
unsupported or disabled) inside <div>, and using CSS for styling the
<div> (and for setting the hr width to 0 so that it didn't show). [1]
Click to expand...

I use to think that way of trying to fully accommodate 4x browsers until I
started reviewing my traffic, <1% in fact in the .01% range! If it wall
severely impair the page in these browsers a may add a conditional
stylesheet that disables all the float and effect for them...No pretty but
hey, then could upgrade.
Do we have current information on any residual problems with merely
styling the <hr> itself?
Click to expand...

Depends, if it fail, so what, just means the HR is not read and is
'groove' style. Not sure why the OP wants 70% width anyway.
All the FONT junk isn't required
Click to expand...

Amen to that.


[1] if anyone's still interested in this history:
http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html -
but the content hasn't been substantively revised since 2002 or so.
Click to expand...

If he redoes his page and used stylesheet in addition tom being easier to
maintain and change but the markup will be nearly reduced my half.
Click to expand...

Funny you should suggest the style sheet, I totally agree.
This is my next version. I am just trying to learn HTML the hard way.
http://www.garyluttrell.com/step3.htm

The Declaration fixed the "_" on my May & Directions image.

I have a lot to learn.

Thanks
 
J

Jonathan N. Little

Alan said:
Alan said:
In theory, yes. When I tried this, some years ago, in the era
when IE4 and NN4 still needed to be considered, I found that some
browsers were quite reluctant to style <hr> itself,
Click to expand...
[...]

I use to think that way of trying to fully accommodate 4x browsers
until I started reviewing my traffic, <1% in fact in the .01% range!
Click to expand...

Sure; I was talking about a page of mine that goes back to 1999.

I was just interested to know whether there are still any known
problems with styling <hr> in reasonably current browsers.
Click to expand...

Just in IE that I know of (surprise, surprise) if you want to use an
image instead of a border line you cannot get rid of the damn border in IE

HR {
border: 0;
background-image: url(borderGfx.gif);
background-repeat: repeat;
height: 25px;
}
One can certainly hope that it would fail safely, then I'd have no
argument with that.
Click to expand...
 
J

Jonathan N. Little

Aaron wrote:
Funny you should suggest the style sheet, I totally agree.
This is my next version. I am just trying to learn HTML the hard way.
http://www.garyluttrell.com/step3.htm

The Declaration fixed the "_" on my May & Directions image.

I have a lot to learn.
Click to expand...
Better, but use 'Html 4.01 Strict' not 'Html 4.01 Transitional'.
Rid all the inline styles and make CSS class for like styling then all
you need is

<ELEMENT class="yourClassName">...

Then if you change your mind about your styling you only have to change
it on one place, your stylesheet and not hunt though your document.
Related dump the FONT elements. If you need to change the styling give
the element a class. If the bit of text is not full portion contained
within the element then put it in a SPAN and and style the SPAN.

Do yourself a favor and download a copy of Firefox and install the
WebDeveloper's bar, has a whole host of tools that will augment the
learning process and has the links to the HTML CSS Validators that will
help you locate your trouble spots...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Odd character display / UTF issue ? 5
Firefox onLoad img 3
Working on mobile css menu with plenty of frustration! 2
Javascript item appearing in Firefox, not IE 0
overflow of divs/images 0
AJAX vs form submission (character encoding) 2
How to upload an <img> content without <input type=file > ? 3
Javascript toggles div visibility, img elements dissappear 3

Members online

No members online now.
Total: 32 (members: 0, guests: 32)
Robots: 419

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top