Jump to content

CC links not cross-browser compatible, Help


markscarts
 Share

Recommended Posts

I only made formatting changes in session.tpl, I can't see where I goofed up the code, BUT . . .

On this site, the login and register links do not work in Mozilla (FF, Netscape) but they work fine in IE6

Here is the session.tpl:

<!-- BEGIN: session -->

<div style="padding-top: 2px;">

<!-- BEGIN: session_false -->

	<span class="txtSessionGrey">{LANG_WELCOME_GUEST}</span> 

	<span class="txtSession">[</span><a href="index.php?act=login&redir={VAL_SELF}" class="txtSession">{LANG_LOGIN}</a> <span class="txtSession">|</span> <a href="cart.php?act=reg&redir={VAL_SELF}" class="txtSession">{LANG_REGISTER}</a><span class="txtSession">]</span>

<!-- END: session_false -->



<!-- BEGIN: session_true -->

	<span class="txtSessionGrey">{LANG_WELCOME_BACK} {TXT_USERNAME}</span> 

	<span class="txtSession">[</span><a href="index.php?act=logout" class="txtSession">{LANG_LOGOUT}</a> <span class="txtSession">|</span> <a href="index.php?act=account" class="txtSession">{LANG_YOUR_ACCOUNT}</a><span class="txtSession">]</span>

<!-- END: session_true -->

</div>

<!-- END: session -->



And here is the call in global/index.tpl:




<div style="position:relative; float:left;">{SESSION}</div>

Does anyone see an error?

Any ideas what might cause this problem?

Link to comment
Share on other sites

There is some sort of div floating over it... I think its the div surrounding the Search Box as it is defined after the Sessions, try setting a z:99; in the Css of the Sessions Div...

Only a guess but after using outline with the designer toolbar of FF thats what its finding...

Following Attachment is a screenshot of your design the numbers are the z order of the divs... you can see there is about 3 divs surrounding the session links and thats where your problem is comming from...

Link to comment
Share on other sites

IN SEARCH BOX change <div style="position: relative; text-align: right;"> to <div style="position: relative; float: right;">

ADDED

If one block is floated second must be floated too if they are on the same vertical pos. Search box is overlapping the block defined before spreading to 100% of fathers block because of text alignment :)

ADDED 2

Entire content of session box wasnt markable => overlapping. :errm:

Link to comment
Share on other sites

I'm making adjustments here and there since you posted, but still haven't solved it yet . . .

@ convict, that did it. :)

What was happening there? I can only guess that the division containing search was covering the div containing session, as Aikdo wrote, but only in Mozilla, not in IE . . .

Seems the div containing search should have been floated to right of div containing session, rather than flowing over it :confused:

At any rate it's working now, I'm happy :)

Thanks for the quick help, guys. :errm:

Link to comment
Share on other sites

I find FireFox is less tolerant of HTML and CSS errors than IE in general. Position:anything and float:anything are NOT complimentary styles. The last one trumps the one before it.

Link to comment
Share on other sites

Position:anything and float:anything are NOT complimentary styles.

OK, but I'd like to see a technical reference. Haven't had time to look into the standards regarding that as yet.

<div style="float:left;">content a</div><div style="text-align:right;">content b</div>

I would think that the above syntax should be good, correct, and that the second division should float against the right side of the first while aligning text to the right . . . as it did in IE . . . not covering over the first div ;)

as to position: + float: - no one says anything about "complimentary" - but this device is used to work around a rendering flaw in IE regarding the float property.

Link to comment
Share on other sites

I find FireFox is less tolerant of HTML and CSS errors than IE in general.

You are not alone nor the first nor last one. Thats the uncovered fact.

Massive using of 'error' tolerant browser neednt means that browser maker standards are general standard. In case of browsers fortunately. Is it not? ;)

@ Romos simply yes :D

Link to comment
Share on other sites

as to position: + float: - no one says anything about "complimentary" - but this device is used to work around a rendering flaw in IE regarding the float property.

What I meant was that <div style="position: relative; float: right;"> is the same as <div style="float: right;">. You can't have both, so the last one supercedes the first. I don't find that IE has any problem with floating divs, but maybe I just haven't run into it yet.

Link to comment
Share on other sites

Well, I'm very happy for you if you haven't had a problem. :wub:

In fact, CubeCart stores are fairly plagued with the IE peekaboo problem cause by float division. You only have to search the forum for peekaboo to see what I mean.

Note the number three fix on this page, and if that is not enough for you just google the ie peekaboo bug and enjoy the ride :D

Link to comment
Share on other sites

Hmm. Very interesting. You learn something new every day (assuming you pay attention).

I've never had that particular bug in my own designs, despite using pure XHTML/CSS with floats, but then maybe it's because I often set margins, height, and line-height (which seem also to neutralize it). I have seen this on other sites though, and it is a strange and annoying bug. If IE didn't control 150% of the market we wouldn't have to put up with this kind of shoddy behavior.

Found some other interesting workarounds for it here.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...