Essentials 2.7 in Safari

Essentials 2.7 in Safari

by Steve Kotyk -
Number of replies: 6

Yes i know, Safari, there is an issue with the site logo and name in safari, they overlap.

Any ideas?

Attachment screen.png
Average of ratings: -
In reply to Steve Kotyk

Re: Essentials 2.7 in Safari

by Julian Ridden -

Hi Steve,

There are no issues in Safari I am aware of. I actually built this theme on a Mac and use Safari for all my initial testing. Point your browser to http://features.demo.moodle.com.au and see if the same issue occurs. That site is running the current version of the theme.

If it looks good there I would suggest updating your site to the current version. 

Julian

In reply to Julian Ridden

Re: Essentials 2.7 in Safari

by Steve Kotyk -

Hi Julian, 

Thanks for the response, I tried http://features.demo.moodle.com.au/ in Safari and both my Windows 7 Pro machine and my Mac.  Both produced the same result, see attached.

Attachment screen.png
In reply to Steve Kotyk

Re: Essentials 2.7 in Safari

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Me too Julian, I see it as Steve's screenshot. I'm currently testing on XP & Safari 5.1.7

In reply to Steve Kotyk

Re: Essentials 2.7 in Safari

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Steve you could try adding the following CSS rule to your Custom CSS settings page...

h2#subtitle { padding-left: 85px;}

In reply to Mary Evans

Re: Essentials 2.7 in Safari

by Steve Kotyk -

Perfect! Thanks.

 

In reply to Steve Kotyk

Re: Essentials 2.7 in Safari

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

@Julian,

I think the best solution to this problem might be to wrap the h1 & h2 in a header tag and give it a unique id and then make h1#title and h2#subtitle  zero margins and padding and give them line-height: 1

Something like...

<div class="span6" >
<i id="headerlogo" class="fa fa-laptop" style="height: 50px;"></i>
<header id="logo-headings">

<h1 id="title"></h1>
<h2 id="subtitle"></h2>

</header>
</div>

CSS

header#logo-headings {
margin: 0;
padding: 20px 0 0 85px;

}

h1#title,
h2#subtitle {
line-height: 1;
margin: 0;
padding: 0;
white-space: nowrap;
}

h1#title {
font-size: 2.1em;
}

h2#subtitle {
font-size: 1em;
letter-spacing: 0.15em;
text-transform: uppercase;
}

Mary