Anchor Tag doesn't work in Firefox

HTML & CSS
21

Actually, I find that it works when I type the address on the actual page (with the # part), but not when I try to link to it from another page. Well, not always. Sometimes it works, other times it sends me to the bottom of the page again.

Can’t find ANYTHING that might be causing this and it’s driving me nuts.

I can only conclude that it’s something in Firefox itself that’s causing this issue. Otherwise, why would the link behave differently every time I attempt to use it?

I’m not having this problem in any other browser…

22

Rather than blaming the browser, it has already been pointed out that your code has multiple errors in it:-

Browsers are very good at making sense of invalid code and rendering something from it. But it can be the reason for inconsistent results between different browsers.
When a browser attempts to work with invalid code it is trying to interpret something which is not defined in the official html spec, therefore the way different browsers interpret it may differ greatly.

4 Likes
23

Your code is partly outdated and partly corrupt. There are duplicate ID’s and errors that Firefox cannot figure out how to “work around”. Crummy code should not be left to individual browsers to figure out. The results are inconsistent.

Fix the validation errors… all of them (quiet the barking validator).

That is not a fault of Firefox.

Has any of this been mentioned before? many times?

I used to enjoy listening to people complain about how their code worked in all of the other browsers except IE8 - curse IE8. Well, 9 times out of 10 the problem was crummy code that the newer browsers had been taught to “work around”, whereas, IE8 still expected properly written code. Misplaced expectations.

3 Likes
24

Actually, I already fixed most of those errors (locally, that is; the changes won’t be going live until tomorrow).

All I need now is a substitute for “cellspacing” and “cellpadding” (on the table attributes) and for my { align=“center” }. I was able to get rid of all the body attributes by using “margin: 0” in my CSS code, but haven’t found any way to determine the cellspacing or cellpadding.

As far as centering everything is concerned, I did hear there’s an option in CSS, but “horizontal-align: middle” only seems to work in select browsers, just like the # in the anchors. Right now, { align=“center” } seems to be the only fool-proof solution, but for some reason validator sees it as an error?

25

The default padding in HTML table cells (not css table-cells) is 1px. You can replace cellpadding=“0” with

th,td {
    padding:0;
}

HTML table cells (not CSS table-cells) are separated by 2px of space. You can replace that with

table {
    border-spacing:0;
}

align=“center” can be replaced with {text-align:center}

I’ve never heard of horizontal-align:middle. Normally, “middle” is associated with {vertical-align:middle}, so I guess it depends on what you are trying to “center”.

3 Likes
26

Well, the td { padding: 0; } and table { border-spacing: 0; } seems to be working, but I’m not getting the desired results from { text-align: center; }. What I’m actually attempting is the center the entire element, not just its contents.

But 2 out of 3 ain’t bad.

27

Assuming the element is a block with a restricted width, such as a <div> or <table>, then apply {margin:0 auto} to the element. You may prefer to just use {margin-left:auto; margin-right:auto;} instead.

3 out of 3 will move you into the major leagues, though!.

EDIT:

You can look up all of the CSS properties and styles that you’ve seen used here and more at this site:
http://tympanus.net/codrops/css_reference

3 Likes
28

{ display: block; margin: 0 auto; } and { text-align: center; } seem to work for the majority of elements, but there is one element that pulls over to the left. Notice what happens when I narrow the page to between 600 and 909 pixels:

And here’s the CSS:

http://www.wingsovercanada.ca/styles/wings_catalog_boxes.css

I believe the conflicting code is somewhere in the CSS file, but I’m unable to find what is causing the left shift.

29

Please specify which item “pulls” to the left.

30

I believe the problem stems from your use of nested html tables to create your layout.
A practice that should have ended a long time ago. CSS has come a long way since the 90s. :slight_smile:

1 Like
31

It’s the “table” with the 3 links. It’s set at 600px width, but the table contents are not filling it and sitting to the left.

1 Like
32

@BestWeb

You change the #catalog_table to {display:block} at narrow widths,

#catalog_table {
    display: block;
    margin: 0 auto;
    width: 600px;
}

You also need to change the <tbody>, <tr> and <td> elements to {display:block} in concert with the change of the <table>

#catalog_table tbody,
#catalog_table tr, 
#catalog_table td  {
    display:block;
}

otherwise they behave like lost table elements .

(Thanks for identifying the table element for me, @SamA74.)

2 Likes
33

It worked! Thanks, guys.

34

“I believe the problem stems from your use of nested html tables to create your layout.
A practice that should have ended a long time ago.”

I’m beginning to notice that. I’ve had the same problem (with my elements pulling to one side) on other web pages I’m maintaining and managed to solve it by replacing my table elements with DIV’s. In fact the only reason I’m still using tables right now is for the centering factor, but now that they’re no longer needed, I’m giving serious consideration to scrapping them.

2 Likes
35

Do it. :smiley:

2 Likes
36

First things first. There are still two unresolved error messages I get whenever I run my web pages through the Validator. It doesn’t seem to like the “action” or the “delay” attributes on my form elements.

“action” is supposed to be where the browser is redirected as soon as the form is submitted. Would “formaction” do just as well?

The “delay”, on the other hand, I don’t really need… or is there a substitute for that too?

37

What does the code for the form look like?

38

The problems
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.wingsovercanada.ca%2Fcatalog.html

Error: Attribute action not allowed on element input at this point.
Error: Attribute delay not allowed on element input at this point.

<input type="text" id="query" value="" action="/search/include/js_suggest/suggest.php" autocomplete="off" delay="1500">

I have never used a formaction="" to over-ride a form action="" here they are different so I guess that might be what was wanted.

AFAIK “delay” is a media parameter, not an attribute. So I’m not sure what the intention is for that.

<form style="z-index: 1; position: absolute; margin-left: 5px; margin-top: 0;" action="/search/search.php" method="get">
<table style="border-spacing: 2px;"><tr><td>
<div style="text-align: left;">
<input type="text" id="query" value="" action="/search/include/js_suggest/suggest.php" autocomplete="off" delay="1500">
</div>
</td><td>
<input type="submit" value="Search">
</td></tr></table>
<input type="hidden" name="search" value="1">
</form>
39

So it’s the action on the input, not the form itself, that Validator is complaining about. To outline what I’m attempting, it is supposed to call upon a PHP program whenever the user is attempting to enter text into the input field. The delay attribute determines when the program comes into play.

40

Confidently asserted.

Please take a look at this reference page:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

I do not see “delay” listed as an attribute of the <input> element.

Where did you find “delay” shown to be a valid attribute of the <input> element?

You do know that all attributes are not common to all elements, don’t you?