6 replies [Last post]
pjaj
pjaj's picture
Offline
newbie
Oxfordshire UK
Last seen: 12 weeks 5 days ago
Oxfordshire UK
Joined: 2006-12-07
Posts: 5
Points: 5

I am trying to make a multi-line header on a Squarespace page that consists of the first line, plain text, in 64px type underlined and the rest, a link, in 128px type not underlined. The following partial CSS snippet is what I'm currently using (there are more parameters, such as spacing, but they are irrelevant)

h1.page-title {
  text-decoration: none;
  text-transform: uppercase;
  font-size:64px;
  }
h1.page-title a{
  text-decoration: none;
  font-size:128px;
  }

The two font-size parameters work. But if I change the first instance of text-decoration to "underline" all the text becomes underlined despite the "none" parameter for the link. Other things like, say, color can be different, so why does the outer text-decoration impose itself on the inner text? And can I prevent it?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 43 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9732
Points: 3811

two underlined elements

Imagine, if you will, that your h1 has an underline. Now consider that the a element also has a default underline. If you remove the a element's underline, you still have the h1's.

The cure(?) is to apply the {text-decoration} property to the content of h1.

Here is a minimal test case.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">
    <title>
      Test document
    </title>
 
    <style media="screen">
    /*<![CDATA[*/
 
    body, html {
	font: 100%/1.5 sans-serif;
	margin:0;
	padding: 0;
    }
 
    div#main {
	padding: 1.5em;
    }
 
    p {
	font-size: 1em;
	margin-bottom: 0;
    }
 
    h1, h2, h3 {
	font-family: serif;
	margin-bottom: 0;
    }
 
    h1 {
	text-align: center;
	text-transform: capitalize;
    }  /* end boiler plate */
 
    h1 span {
	text-decoration: underline;
    }
 
    h1 a {
	text-decoration: none;
    }
 
    p {
	text-decoration: underline;
    }
 
    p a {
	text-decoration: none;
    }
 
 
    /*]]>*/
    </style>
  </head>
 
  <body>
    <div id="main">
      <h1>
	<span>Controlling text decoration</span><br>
	<a href="#">linky-poo</a>
      </h1>
 
      <p>control paragraph <a href="#">link</a></p>
    </div>
  </body>
</html>

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

pjaj
pjaj's picture
Offline
newbie
Oxfordshire UK
Last seen: 12 weeks 5 days ago
Oxfordshire UK
Joined: 2006-12-07
Posts: 5
Points: 5

Thanks Gary

Hi Gary,
Thanks for your suggestions.
This site is on Squarespace and I inherited it. Consequently there is limited scope for tweaking the CSS. And virtually no way of changing the overall structure of the pages.
You can have your own site-wide CSS file, and you can inject some custom code into the header block of a specific page. This is what I'm doing, since I only want this feature on a few pages
I have tried a similar solution using but...

The second problem that I failed to mention is that browsers take this header text and use the first part of it as the text in the tab at the top of the page along with the favicon. So instead of seeing
[favicon] Controlling
in the tab, you see
[favicon]<span>

I agree with you that Squarespace is probably too clever to debug and maintain. I would love to migrate it to a platform such as Drupal, but the budget just isn't there at this time.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 43 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9732
Points: 3811

Something odd here

The tab should not be showing the content of a heading element, eg. H1. It should show the text of the head's required title element. For example the code I gave you has "Test document" as the content of title, and that's what should show in the browser tab and in the title bar at the top of the browser.

Check the html source. It occurs to me that if the title element is missing, a browser might try to substitute the H1 in a misbegotten attempt to "help" the user. Since retirement, I pretty much limit myself to Firefox since I've lost my faith in Google. So, I don't test in anything other than FF and Lynx (a pure text browser).

Speaking of the new Google, use the evil style attribute.

<h1>
  <span style="text-decoration:underline;">
    $TEXT
  </span>
 
  <a href="#" 
     style="text-decoration:none;">
    $LINK
  </a>
</h1>

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

pjaj
pjaj's picture
Offline
newbie
Oxfordshire UK
Last seen: 12 weeks 5 days ago
Oxfordshire UK
Joined: 2006-12-07
Posts: 5
Points: 5

typo

For
I have tried a similar solution using but...
read
I have tried a similar solution to the one you suggest using span but...

pjaj
pjaj's picture
Offline
newbie
Oxfordshire UK
Last seen: 12 weeks 5 days ago
Oxfordshire UK
Joined: 2006-12-07
Posts: 5
Points: 5

Page source

Hi Gary,
Yes, I had a look at the page source and there is a title element in the header block, but it contains the full text, including any HTML, of the Page title h1 block. That's Squarespace for you. Yet another Squarespace limitation I failed to mention, you are restricted to 100 characters max. So, unfortunately, your second version above, is going to blow this limit and be rejected.

I've come to the conclusion that Squarespace is too restrictive to fully achieve what we want and I've abandoned the idea. Instead we have decided to underline the page type in the main navigation at the very top of the page, see nataal.com and click on any of Fashion, Culture or Music in the top navigation.

I admit that I used to use FF but then one update, it miss-installed itself and forever after ran like tar, extremely slowly. Uninstalling and reinstalling didn't cure it. I'm going to have to use a search utility to remove every reference to FF and then do the same with the registry before attempting another reinstall, but I haven't got round to it yet. Despite your loss of faith, Chrome is my current weapon of choice. I too retired some 15 years ago, but keep my hand in with some web work for my daughter and a bit of fun with Arduinos.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 43 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9732
Points: 3811

unft for purpose

Web sites have become commoditized. Nowadays, if it won't work out of the box, you're screwed. The price of sites have been driven down so much due to prepackaged sites that bespoke sites are unaffordable to any but the large entities.

Enjoy your retirement. I'm loving mine.

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.