Anchor Problems ??

Hey guys,

I'm getting kind of a strange problem with the use of anchors on one of my project. Wherever I'm trying to use anchors, its giving same error through out.

For eg: Go to: cartradeindia.com/finance-info.php and click on any bank from the list:
* Citicorp Maruti
* HDFC Bank Ltd.
* ICICI Bank
* The SARASWAT CO-OP. Bank Ltd.
* Tata Finance Ltd.
* Sundaram Finance
* Citibank

After clicking, you'll see that you're landing on right anchor, but all the content above this anchor is being disappeared.

A friend of mine suggested that this problem usually comes when we have used 'relative' positions for layouts.. but I'm not sure if that is true...

Can anyone help me ?

 

It looks like there is some problem with the anchors. I would suggest to recode the html part of it and try again, as I have anchors in php pages, and they work.

Dr Small

 

That wont help, I have rechecked everything twice and not sure where it needs to be fixed...

 

Interesting - the problem appears to ONLY be in Firefox - Opera, Safari and IE all render the page just fine.

First up you might want to try VALIDATING - you've got 59 validation errrors. If you aren't using valid HTML, you shouldn't expect the page to work right cross-browser. You've got some 'extra' containers that probably aren't even needed, you are using a table when it's completely unnecessary, <p>&nbsp;</p> before every normal para instead of just using margins, multiple H1's... carriage return before the doctype MAY be throwing IE into quirks mode (I can't remember if a single CR will actually do that, or if it has to actually be text to go fubar)

<script src="/js/netscape.js" language="javascript"></script>
I'm not sure what that's supposed to accomplish - it almost looks like a netscape 4 hack, something most everyone stopped supporting three years ago. In any case using .js for css is a /fail/, you are using .js to implement max-width in all browsers (that should probably be inlined for IE and that's it)

No offense, but this:

<table width="100%" height="100" border="0" cellpadding="2" cellspacing="1" id="table2"  >

      <tr>
        <td width="7%" valign="top" class="lefttxt"><p align="center"><font color="#E14000">&raquo;</font></p></td>
        <td width="84%" valign="top" class="lefttxt"><a href="/search-cars.html" class="leftlnks">Cars</a></td>
      </tr>

Code (markup):

Is a wonderful example of how NOT to code HTML... especially for something that should likely just be:

<li>&raquo;<a href="/search-cars.html" class="leftlnks">Cars</a></li>

or this:

<p>&nbsp;</p>
<div align="left"><h2>Finance - Bank information</h2></div>
<table width="100%" align="center" cellpadding="0" cellspacing="5">

  <tr>
    <td><p>&nbsp;</p>

Code (markup):

No need for the extra DIV, no need for the extra <p>, no need for all that table crap...

and that's before we even get into the CSS.

main_content
{
width: 100%;
margin-left: 10%;
margin-right: 10%;
}

Uhm, being there's no such tag as main_content - that's invalid CSS... I'm ASSUMING that's supposed to have a # before it to mark it as an ID?

I'm seeing a lot of position:relative that doesn't seem to be being used for anything, a lot of redundant and conflicting declarations inside the same classes, a total lack of consistant formatting leading to being unable to tell when anything actually begins or ends... and you might want to try using meaningful classnames just to make maintennance simpler.

In general it's a train wreck that would need a rewrite before I could even come close to an actual diagnosis of what's making firefux screw up. (apart from it being firefux)

 

Thanks for your explanation...I know there are a lot of issues with the layout, and I know its kinda hybrid structure now - of CSS + Table based layouts... I guess a blunder mistake from previous designer... However, Some of the points which you mentioned might be a good reason to rewrite CSS and clean junk HTML...