Results 1 to 8 of 8

Thread: HTML head-desker

  1. #1
    Not a good person scaryjim's Avatar
    Join Date
    Jan 2009
    Location
    Gateshead
    Posts
    15,196
    Thanks
    1,230
    Thanked
    2,291 times in 1,874 posts
    • scaryjim's system
      • Motherboard:
      • Dell Inspiron
      • CPU:
      • Core i5 8250U
      • Memory:
      • 2x 4GB DDR4 2666
      • Storage:
      • 128GB M.2 SSD + 1TB HDD
      • Graphics card(s):
      • Radeon R5 230
      • PSU:
      • Battery/Dell brick
      • Case:
      • Dell Inspiron 5570
      • Operating System:
      • Windows 10
      • Monitor(s):
      • 15" 1080p laptop panel

    HTML head-desker

    OK hexites, I sincerely hope you can help me here.

    I've just set up a new case studies page for my company, and I've added a simple javascript that lets you show and hide the body of each case study. I knocked up a test version of this functionality, with just the text, links and js, and it works beautifully in all browsers.

    However, once I put it into the templated design for the website, both firefox and chrome refuse to recognise that the links are, in fact, links. It works OK in IE, but in FF and chrome the page just sits there. The Firefox console gives me lots of interesting errors (I say interesting because it quotes line numbers that don't exist in the page and css properties that aren't set in any of my stylesheets ), the Chrome console gives me no errors at all.

    My first thought was that it must be a z-index thing (I use z-index to make some nice tab images I'm using work) but I've changed the z-index on every flipping element on the page (just about) and none of them seem to make any difference. It can't (as far as I can see) be the actual code, because the exact code and html work perfectly from my test file, so it must be something else on the page interfering. Oh, and my js at least runs the initialisation OK, because the page is designed to show the text and not the links, then display the links andf hides the text if js is enabled (because I'm a good programmer who appreciates elegant fallback ).

    So, can anyone spot any reason at all that this page isn't working as expected in FF (6.0.2) and Chrome (14.0) but is working perfectly in IE?

    http://iops.org.uk/design-sampling/2/case-studies.php

  2. #2
    Senior Moment blueball's Avatar
    Join Date
    Aug 2005
    Location
    Edinburgh
    Posts
    2,426
    Thanks
    846
    Thanked
    379 times in 294 posts
    • blueball's system
      • Motherboard:
      • Asus Z390A
      • CPU:
      • i9-9900KS
      • Memory:
      • Kingston 64GB (2x32GB) DDR4 2400MHz
      • Storage:
      • 2TB Samsung 970 EVO Plus NVMe PCIE M.2 plus Samsung 860 EVO 4TB SSD
      • Graphics card(s):
      • ASUS TUF RTX 3080 Ti GAMING OC
      • PSU:
      • Corsair HX850 850 W Full Modular 80 Plus Platinum
      • Case:
      • Corsair Carbide 330R Ultra Silent Midi Tower
      • Operating System:
      • Win 10 Pro x64
      • Monitor(s):
      • IIYAMA 3461WQ IPS 34" 3440x1440 plus BenQ GW2765HT IPS 27" 2560x1440
      • Internet:
      • Plusnet 28Mb

    Re: HTML head-desker

    Is the z-order of the "a" tag masking "a:active" and "a:visited" (as they haven't been given z-order values)?
    Rgds,

    BB
    Hexus Trust here and here

  3. Received thanks from:

    scaryjim (30-09-2011)

  4. #3
    Not a good person scaryjim's Avatar
    Join Date
    Jan 2009
    Location
    Gateshead
    Posts
    15,196
    Thanks
    1,230
    Thanked
    2,291 times in 1,874 posts
    • scaryjim's system
      • Motherboard:
      • Dell Inspiron
      • CPU:
      • Core i5 8250U
      • Memory:
      • 2x 4GB DDR4 2666
      • Storage:
      • 128GB M.2 SSD + 1TB HDD
      • Graphics card(s):
      • Radeon R5 230
      • PSU:
      • Battery/Dell brick
      • Case:
      • Dell Inspiron 5570
      • Operating System:
      • Windows 10
      • Monitor(s):
      • 15" 1080p laptop panel

    Re: HTML head-desker

    Interesting thought - I'll have a look. I'd've thought they'd cascade down from the a to the pseudoclasses, but it's worth a go...

    EDIT: OK, I've tried changing all the z-index values to 99, and then removing them all, from the a elements and all pseudoclasses of it. No change. Works fine in IE, not in FF. I've also changed the script so the links are no longer turned on and off by the javascript, but that doesn't work. I obviously need to go back to web school and learn about z-index
    Last edited by scaryjim; 30-09-2011 at 10:02 AM.

  5. #4
    Senior Moment blueball's Avatar
    Join Date
    Aug 2005
    Location
    Edinburgh
    Posts
    2,426
    Thanks
    846
    Thanked
    379 times in 294 posts
    • blueball's system
      • Motherboard:
      • Asus Z390A
      • CPU:
      • i9-9900KS
      • Memory:
      • Kingston 64GB (2x32GB) DDR4 2400MHz
      • Storage:
      • 2TB Samsung 970 EVO Plus NVMe PCIE M.2 plus Samsung 860 EVO 4TB SSD
      • Graphics card(s):
      • ASUS TUF RTX 3080 Ti GAMING OC
      • PSU:
      • Corsair HX850 850 W Full Modular 80 Plus Platinum
      • Case:
      • Corsair Carbide 330R Ultra Silent Midi Tower
      • Operating System:
      • Win 10 Pro x64
      • Monitor(s):
      • IIYAMA 3461WQ IPS 34" 3440x1440 plus BenQ GW2765HT IPS 27" 2560x1440
      • Internet:
      • Plusnet 28Mb

    Re: HTML head-desker

    When I saved the page to my local disk (save as web page complete) and then opened it in Dreamweaver there were a hell of a lot of CSS files attached to it - you might have an overwriting problem?

    Best I can come up with - I'll see you in class
    Rgds,

    BB
    Hexus Trust here and here

  6. #5
    Not a good person scaryjim's Avatar
    Join Date
    Jan 2009
    Location
    Gateshead
    Posts
    15,196
    Thanks
    1,230
    Thanked
    2,291 times in 1,874 posts
    • scaryjim's system
      • Motherboard:
      • Dell Inspiron
      • CPU:
      • Core i5 8250U
      • Memory:
      • 2x 4GB DDR4 2666
      • Storage:
      • 128GB M.2 SSD + 1TB HDD
      • Graphics card(s):
      • Radeon R5 230
      • PSU:
      • Battery/Dell brick
      • Case:
      • Dell Inspiron 5570
      • Operating System:
      • Windows 10
      • Monitor(s):
      • 15" 1080p laptop panel

    Re: HTML head-desker

    Hmm, that might be the facebook feed box EDIT: it is the facebook box, I've just done the same thing - I've only specified one stylesheet on that page... that said, I'm not sure I'd trust Dreamweaver any more than IE or FF

    Having had a quick read up on w3.org, it looks like I might need to redo all of my z-indexes anyway - I've not taking account of boxes starting a new stacking context. So I've written the z-indexes as if they apply from the body element, and it looks like each element with a z-index actually starts it's own context, so once I've positioned one layer I only need to worry about stacking context within that layer, not in the whole page! Apparently IE is clever enough to know what I actually meant (although it'll be interesting to see what happens when i've changed them all to the standards compliant way of doing things ).

    If I'm right it'll actually make my css a lot easier to work with. Sadly, I'm currently in my other job, so that'll have to wait until this evening! Thanks for the input though

  7. #6
    Not a good person scaryjim's Avatar
    Join Date
    Jan 2009
    Location
    Gateshead
    Posts
    15,196
    Thanks
    1,230
    Thanked
    2,291 times in 1,874 posts
    • scaryjim's system
      • Motherboard:
      • Dell Inspiron
      • CPU:
      • Core i5 8250U
      • Memory:
      • 2x 4GB DDR4 2666
      • Storage:
      • 128GB M.2 SSD + 1TB HDD
      • Graphics card(s):
      • Radeon R5 230
      • PSU:
      • Battery/Dell brick
      • Case:
      • Dell Inspiron 5570
      • Operating System:
      • Windows 10
      • Monitor(s):
      • 15" 1080p laptop panel

    Re: HTML head-desker

    Quote Originally Posted by scaryjim View Post
    ... Sadly, I'm currently in my other job, so that'll have to wait until this evening! ...
    Yeah, like having three contractual deliverables due today was going to stop me messing with my css

    Problem solved, and it was indeed the z-indexing. I went back and did it in the proper, standards-compliant, way, and it works in FF, Chrome, and IE9. I'll have to test it against IE7 and 8 at some point*, but I'm pretty confident. It also means me page now uses z-indexes of 0, 1, -1, and 99 (I got carried away with making sure the thing on top really was on top ), rather than what I was trying to do. That'll teach me for skimming the technical docs instead of reading them properly!

    *edit: OK, I've checked with the IE7 and IE8 modes that IE9 provides in developer view, and it seems to work OK. Cool beans

  8. #7
    Senior Moment blueball's Avatar
    Join Date
    Aug 2005
    Location
    Edinburgh
    Posts
    2,426
    Thanks
    846
    Thanked
    379 times in 294 posts
    • blueball's system
      • Motherboard:
      • Asus Z390A
      • CPU:
      • i9-9900KS
      • Memory:
      • Kingston 64GB (2x32GB) DDR4 2400MHz
      • Storage:
      • 2TB Samsung 970 EVO Plus NVMe PCIE M.2 plus Samsung 860 EVO 4TB SSD
      • Graphics card(s):
      • ASUS TUF RTX 3080 Ti GAMING OC
      • PSU:
      • Corsair HX850 850 W Full Modular 80 Plus Platinum
      • Case:
      • Corsair Carbide 330R Ultra Silent Midi Tower
      • Operating System:
      • Win 10 Pro x64
      • Monitor(s):
      • IIYAMA 3461WQ IPS 34" 3440x1440 plus BenQ GW2765HT IPS 27" 2560x1440
      • Internet:
      • Plusnet 28Mb

    Re: HTML head-desker

    Well done that man

    Oh and on my copy of FF 7 the bottom scroll arrow on the facebook feed is hidden (the window isn't big enough to hold it or something like that.)
    Rgds,

    BB
    Hexus Trust here and here

  9. #8
    Not a good person scaryjim's Avatar
    Join Date
    Jan 2009
    Location
    Gateshead
    Posts
    15,196
    Thanks
    1,230
    Thanked
    2,291 times in 1,874 posts
    • scaryjim's system
      • Motherboard:
      • Dell Inspiron
      • CPU:
      • Core i5 8250U
      • Memory:
      • 2x 4GB DDR4 2666
      • Storage:
      • 128GB M.2 SSD + 1TB HDD
      • Graphics card(s):
      • Radeon R5 230
      • PSU:
      • Battery/Dell brick
      • Case:
      • Dell Inspiron 5570
      • Operating System:
      • Windows 10
      • Monitor(s):
      • 15" 1080p laptop panel

    Re: HTML head-desker

    Quote Originally Posted by blueball View Post
    ... on my copy of FF 7 the bottom scroll arrow on the facebook feed is hidden ...
    Thanks for letting me know. Bit odd that, but it looks like the balls-up is at facebook's end: it happens regardless of window size. not a lot I can do about that one. You can still drag the scrollbar, so it's functional at least...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Low profile and dual head AGP?
    By Mike Fishcake in forum Graphics Cards
    Replies: 0
    Last Post: 29-11-2005, 10:57 AM
  2. Smart FTP Q? + html tutor site?
    By Jeanne d'Arc in forum Software
    Replies: 2
    Last Post: 04-12-2004, 12:36 AM
  3. Replies: 10
    Last Post: 09-01-2004, 07:19 PM
  4. Moving on from HTML...
    By TomWilko in forum Software
    Replies: 21
    Last Post: 23-10-2003, 10:17 PM
  5. HTML woes
    By Nemeliza in forum Software
    Replies: 6
    Last Post: 17-10-2003, 10:05 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •