Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Text styling issue

Featured Replies

OK so I took a screen shot off my issue. I will also explain it the larger font is "pushing up" and I shouldn't do that. Here is the background down and dirty so I am working on a wordpress theme and I am building ontop of thematic because its so SEO friendly! here is 90% of the styling that effects the text.

#access {
   overflow:visible;
   z-index:100;
}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin:			0;
padding:		0;
list-style:		none;
}
.sf-menu {
line-height:	1.0;
}
.sf-menu ul {
position:		absolute;
top:			-999em;
width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width:			100%;
}
.sf-menu li:hover {
visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float:			right;
position:		relative;
}
.sf-menu a {
display:		block;
position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left:			0;
top:			2.5em; /* match top ul list item height */
z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left:			10em; /* match ul width */
top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:			10em; /* match ul width */
top:			0;
}
/*------------------NAV-------------*/
.menu
{
float:right;
margin: 0;
padding: 0;
list-style-type: none;
}

.menu li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}

.menu li a
{
text-decoration: none;
color: #F0EDED;
padding: 0 2px;
}

.menu li a:hover{
color: #356aa0;
}

.current_page_item, .current_page_item a { color: #356aa0; font-size: 1.5em; }

 

Thanks for the hand guys,

Matthew Garnerpost-36512-0-30168900-1328587554_thumb.png

Edited by Garner Designs

  • Author

If font-size doesn't fit, is it a line-height issue? Can you post a link so that we can see what's happening?

AH thank you can't believe I overlooked line height! Problem Solved.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.