Page 1 of 1

[56K WARN] Firefox: extra <a> tags [SOLVED]

Posted: Thu Sep 27, 2007 4:44 pm
by Moobi
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


OK. I can't figure out if this is a PHP or Firefox issue, but here goes.

My system info is: Windows XP Pro SP2 with Firefox 2.0.0.7 and the issue seems to only happen in FF2, never in IE6 or IE7. The web site I'm having trouble with is [url]http://www.envisionamerica.com/[/url] and involves the horizontal navigation tabs you'll see once you get past the welcome page. On a given page, the tabs should look basically like this:
[img]http://www.envisionamerica.com/images/misc/X_CSStabs_Correct.jpg[/img]

(The white tab with blue text indicates the page the browser is on and is non-clickable.)

Sometimes, however, a tab will be coded in a way that makes it render like the "Links" tab seen here (which reflects the CSS for the global a tag):
[img]http://www.envisionamerica.com/images/misc/X_CSStabs_Links.jpg[/img]

These tabs are part of the file eva_header.php which is pulled in with PHP's include_once funtion on every page. I have been using the FF extension FireBug to compare things, and I've found something extremely odd. The PHP for rendering that "Links" tab is:

Code: Select all

// the Links tab
$func_word='Links'; // this is the parameter passed to the functions; must be unique in this code page
$tab_word='Links'; // this is the word that appears on the tab in the browser page's navigation row
if (substr($_SERVER['PHP_SELF'], -9) == 'links.php')
	{	echo '
		<div id="tab'.$func_word.'" class="tabLocal"> 
		<div class="tabLeftLocal"></div>
		<div class="tabTextLocal">'.$tab_word.'</div>
		<div class="tabRightLocal"></div>
		</div id="_tab'.$func_word.'">
		
		';
	} else { 
		echo '
		<div id="tab'.$func_word.'" class="tabOut" onmouseover="func_tabsOver(\''.$func_word.'\');" onmouseout="func_tabsOut(\''.$func_word.'\');"> 
		<a href="'.$crumbs.'links.php" class="tab">
                <div id="tab'.$func_word.'Left" class="tabLeftOut"></div>
		<div id="tab'.$func_word.'Text" class="tabTextOut">'.$tab_word.'</div>
		<div id="tab'.$func_word.'Right" class="tabRightOut"></div>
                </a>
		</div id="_tab'.$func_word.'">
		
		';
	}
and the resulting code looks like this when it renders correctly (paste from FireBug):

Code: Select all

<div id="tabLinks" class="tabOut" onmouseout="func_tabsOut('Links');" onmouseover="func_tabsOver('Links');">
<a class="tab" href="links.php">
<div id="tabLinksLeft" class="tabLeftOut"/>
<div id="tabLinksText" class="tabTextOut">Links</div>
<div id="tabLinksRight" class="tabRightOut"/>
</a>
</div>
Now, when the tab is rendered incorrectly, the code looks like:

Code: Select all

<div id="tabLinks" class="tabOut" onmouseout="func_tabsOut('Links');" onmouseover="func_tabsOver('Links');">
<a class="tab" href="links.php"/>
<div id="tabLinksLeft" class="tabLeftOut"/>
<a class="tab" href="links.php"/>
<div id="tabLinksText" class="tabTextOut">
<a class="tab" href="links.php">Links</a>
</div>
<a class="tab" href="links.php"/>
<div id="tabLinksRight" class="tabRightOut"/>
</div>
and I can't for the life of me figure out why it only sometimes comes across like that. By the way, the "Links" tab is not the only one treated like this; Links, News, Products, and Search tabs can potentially be victimized like this. I can't seem to nail down a pattern to the whole thing.

Too see what I'm talking about, just click back and forth across the tabs. I don't think this is a cache issue, since I've cleared it many times, plus I've seen this on other PCs.

EDIT: I missed a line of code originally in the "rendered incorrectly" section: <a class="tab" href="links.php">Links</a> was missing.


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Thu Sep 27, 2007 6:07 pm
by __Cody__
have you checked the javascript for button state?

Posted: Fri Sep 28, 2007 9:11 am
by Moobi
__Cody__ wrote:have you checked the javascript for button state?
Cody, I'm not sure exactly what you're asking me. The incorrect code is copied from the onmouseout state. During onmouseover, the tab itself changes correctly, but the "Links" text changes according to the global a CSS code.

Posted: Fri Sep 28, 2007 9:29 am
by aceconcepts
How have you written the CSS for the "tab" class?

Like you said the global <a> state is being rendered for the Links tab. I think that the CSS "visited" state hasn't been correctly constructed.

Try clicking on your other tabs and see what happens to them.

Posted: Fri Sep 28, 2007 10:04 am
by feyd
Anchor tags are inline elements. DIV's are block level elements. Standards dictate that block level elements cannot be inside inline elements. Something needs rethinking.

Posted: Fri Sep 28, 2007 10:12 am
by Moobi
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Ace, here it is:

[syntax="css"]a.tab:visited, a.tab:link, a.tab:hover, a.tab:active { text-decoration: none;}
I believe I was originally going to leave the global <a> completely undefined and count on the javascript to change the div classes for the onmouse effects. But IE was applying the default underline to the text in the tabs, so I added the above code. If you want everything related to the javascripted tab effects:

Code: Select all

/* "Outs" are for the onmouseout state, "Overs" for the onmouseover, and "Locals" for a tab related to the current page */
div.tabOut {
background-color: #809fff;
float: left;
margin: 0 1px;
} 
div.tabOver {
background-color: white;
float: left;
margin: 0 1px;
} 
div.tabLocal {
background-color: white;
float: left;
margin: 0 1px;
}

div.tabLeftOut {
background: #809fff url(../images/mf/tabsOutLeft.jpg) top right;
float: left;
width: 5px;
	height: 21px;
} 
div.tabLeftOver {
background: white url(../images/mf/tabsOverLeft.jpg) top right;
cursor: pointer;
float: left;
width: 5px;
	height: 21px;
} 
div.tabLeftLocal {
background: white url(../images/mf/tabsOverLeft.jpg) top right;
cursor: not-allowed;
float: left;
width: 5px;
	height: 21px;
}

div.tabTextOut {
background-color: #809fff;
color: white;
float: left;
font-family: Verdana, Helvetica, Georgia, Arial, sans-serif;
font-size: 85%;
font-weight: bold;
margin: 0;
	padding: 3px 5px 1px 3px;
} 
div.tabTextOver {
background-color: white;
color: #809fff;
cursor: pointer;
font-family: Verdana, Helvetica, Georgia, Arial, sans-serif;
float: left;
font-size: 85%;
font-weight: bold;
margin: 0;
	padding: 3px 5px 1px 3px;
} 
div.tabTextLocal {
background-color: white;
color: #809fff;
cursor: not-allowed;
font-family: Verdana, Helvetica, Georgia, Arial, sans-serif;
float: left;
font-size: 85%;
font-weight: bold;
margin: 0;
	padding: 3px 5px 1px 3px;
}

div.tabRightOut {
background: #809fff url(../images/mf/tabsOutRight.jpg) top left;
float: left;
width: 5px;
	height: 21px;
} 
div.tabRightOver {
background: white url(../images/mf/tabsOverRight.jpg) top right;
cursor: pointer;
float: left;
width: 5px;
	height: 21px;
} 
div.tabRightLocal {
background: white url(../images/mf/tabsOverRight.jpg) top right;
cursor: not-allowed;
float: left;
width: 5px;
	height: 21px;
}
And here is the javascript:

Code: Select all

function func_tabsOver(id)
{	func_flyOutAll();
	document.getElementById('tab'+id).className='tabOver';
	document.getElementById('tab'+id+'Left').className='tabLeftOver';
	document.getElementById('tab'+id+'Text').className='tabTextOver';
	document.getElementById('tab'+id+'Right').className='tabRightOver';
}

function func_tabsOut(id)
{	document.getElementById('tab'+id).className='tabOut';
	document.getElementById('tab'+id+'Left').className='tabLeftOut';
	document.getElementById('tab'+id+'Text').className='tabTextOut';
	document.getElementById('tab'+id+'Right').className='tabRightOut';
}

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Fri Sep 28, 2007 11:01 am
by Moobi
feyd wrote:Anchor tags are inline elements. DIV's are block level elements. Standards dictate that block level elements cannot be inside inline elements. Something needs rethinking.
I was not aware of that standard, but it makes sense. Thank you. Originally, I was working JS onclicks in the tab divs, but I have to make this site accessible to screen readers (for the blind and visually impaired) which don't handle JS onclicks as completely as anchor tags. However, you got my gears turning and I think I have a solution that will comply with the standard you mentioned.

I'm not sure how this relates to the inconsistent code being rendered, but if my problem goes away, I'll gladly let it go.

Posted: Fri Sep 28, 2007 11:02 am
by Moobi
Ah, knew about

Code: Select all

and

Code: Select all

, but not [syntax]. I don't see the latter in the post you linked. Very nice, though.

Posted: Fri Sep 28, 2007 2:07 pm
by Moobi
Sure as shootin', Feyd. I changed the navigation so that the tabs work on JS onclicks, and there are no more divs inside anchors. The problem has cleared up, and even though I don't understand exactly how the weirdness came about, I'm calling it a victory and crediting you.

Thanks a ton! :bow: