PDA

View Full Version : Remove text from buttons



Samz3n
Apr 29th, 2010, 10:48 PM
Hello :)
I am working on this site:
http://www.piya.dk/2010

In other browsers than Chrome, you can see the text on the buttons in the menu. I though I just could make the text transparent, but it doesn't solve my problem in the other browsers. Then I tried to make the font size 0px, but it will only change the font size to "default" so now, the text is at size 1px;

- So can anyone help me, to get rid off the text? :)

Also, in IE7 the whole page doesn't seem to work? The footer jumps over the content?

Here is the CSS code for the menu:

/*MENU*/
div#menu-content {
position: absolute;
bottom: 50px;
left: 0px;
width: 960px;
height: 50px;
}

ul#menu {
width: 900px;
height: 50px;
float: left;
list-style-type: none;
}

ul#menu li {
float: left;
margin-left: 0px;
margin-top: 35px;
position: relative;
/*background: transparent url(img/menu-button.jpg) no-repeat left top;*/
/*width: 144px;*/
height: 90px;
}

ul#menu li span {
display: block;
/*width: 144px;*/
height: 90px;
/*background: transparent url(img/menu-button.jpg) no-repeat left bottom;*/
}
/*7=nyheder*/
ul#menu li.page-item-7{
background:transparent url(img/nyheder.jpg) no-repeat scroll left top;
width: 146px;
}
/*7=nyheder*/
ul#menu li.page-item-7 span{
background:transparent url(img/nyheder.jpg) no-repeat scroll left bottom;
width: 146px;
}
/*2=biografi*/
ul#menu li.page-item-2{
background:transparent url(img/biografi.jpg) no-repeat scroll left top;
width: 140px;
}
/*2=biografi*/
ul#menu li.page-item-2 span{
background:transparent url(img/biografi.jpg) no-repeat scroll left bottom;
width: 140px;
}
/*49=musik*/
ul#menu li.page-item-49{
background:transparent url(img/musik.jpg) no-repeat scroll left top;
width: 140px;
}
/*49=musik*/
ul#menu li.page-item-49 span{
background:transparent url(img/musik.jpg) no-repeat scroll left bottom;
width: 140px;
}
/*13=media*/
ul#menu li.page-item-13{
background:transparent url(img/media.jpg) no-repeat scroll left top;
width: 140px;
}
/*13=media*/
ul#menu li.page-item-13 span{
background:transparent url(img/media.jpg) no-repeat scroll left bottom;
width: 140px;
}
/*10=kontakt*/
ul#menu li.page-item-10{
background:transparent url(img/kontakt.jpg) no-repeat scroll left top;
width: 140px;
}
/*10=kontakt*/
ul#menu li.page-item-10 span{
background:transparent url(img/kontakt.jpg) no-repeat scroll left bottom;
width: 140px;
}
ul#menu li a {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
width: 100%;
height: 100%;
text-align: center;
line-height: 32px;
font-size: 1px;
letter-spacing: 1px;
color: transparent;
text-decoration: none;
}


The whole CSS code can also be found here:
http://piya.dk/2010/wp-content/themes/rascals_djs/_content.css

957
Apr 30th, 2010, 12:36 AM
try make the button's value this value="" and then set the width of the button to what you want, say width: 100px; with css. The button won't have any text. also make sure your IE is accepting javascript. If not then surround your javascript with <!-- and //-->
I hope that helps

abduraooft
Apr 30th, 2010, 10:40 AM
ul#menu li a {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
width: 100%;
height: 100%;
text-align: center;
line-height: 32px;
/*font-size: 1px;*/
letter-spacing: 1px;
color: transparent;
text-decoration: none;
text-indent:-9999px;
}

Samz3n
Apr 30th, 2010, 12:38 PM
ul#menu li a {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
width: 100%;
height: 100%;
text-align: center;
line-height: 32px;
/*font-size: 1px;*/
letter-spacing: 1px;
color: transparent;
text-decoration: none;
text-indent:-9999px;
}

Thanks! You know how I can fix the error with IE7 ?
Here you can see what it looks like in IE7:
http://www.piya.dk/footer.JPG


/*FOOTER*/
div.clear {
clear: both;
height: 30px;
width:100%;
display:block;
}

div#footer {
display: table;
width: 100%;
height: 278px;
clear: both;
background: #000 url(img/footer.jpg) no-repeat center bottom;
}

div#footer-content {
width: 960px;
height: 278px;
margin: 0 auto;
position: relative;
}

mbaker
Apr 30th, 2010, 03:27 PM
Thanks! You know how I can fix the error with IE7 ?

The problem is your <div>s and </div>s are not matched. There is an extra </div>

Here is a reformatted version of your page with all <div>s and </div>s on their own lines and all </div>s commented with the class or id of the matching <div> for ease of checking.

This solves the problem in IE7 mode (on my IE8 browser).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da-DK" lang="da-DK">
<head>
<base href="http://piya.dk/2010/" />
<title>PIYA</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="Endnu en WordPress-blog" />
<meta name="keywords" content="PIYA" />
<link rel="stylesheet" href="http://piya.dk/2010/wp-content/themes/rascals_djs/style.css" type="text/css" media="all" />
<link rel="alternate" type="application/rss+xml" title="PIYA RSS Feed" href="http://piya.dk/2010/?feed=rss2" />
<link rel="pingback" href="http://piya.dk/2010/xmlrpc.php" />
<link rel="icon" href="http://piya.dk/2010/wp-content/themes/rascals_djs/favicon.ico"/>
<link rel="shortcut icon" href="http://piya.dk/2010/wp-content/themes/rascals_djs/favicon.ico"/>
<script type='text/javascript' src='http://piya.dk/2010/wp-content/themes/rascals_djs/js/jquery.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://piya.dk/2010/wp-content/themes/rascals_djs/js/custom.js?ver=1.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://piya.dk/2010/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://piya.dk/2010/wp-includes/wlwmanifest.xml" />
<link rel='index' title='PIYA' href='http://piya.dk/2010' />
<meta name="generator" content="WordPress 2.9.2" />
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="header">
<div id="newsletter">
<input type="text" value="indtast din email..." class="newsletter"/>
<input type="submit" value="OK" class="newsletter-submit"/>
<input type="hidden" value="http://piya.dk/2010/wp-content/themes/rascals_djs/newsletter.php" id="newsletter-path"/>
</div><!-- /newsletter -->
<a href="http://piya.dk/2010" title="PIYA" class="toolTip" id="logo-btn"> PIYA </a>
<div id="menu-content">
<ul id="menu">
<li class="page_item page-item-7"><a href="http://piya.dk/2010/?page_id=7" title="Nyheder">Nyheder</a></li>
<li class="page_item page-item-2"><a href="http://piya.dk/2010/?page_id=2" title="Biografi">Biografi</a></li>
<li class="page_item page-item-49"><a href="http://piya.dk/2010/?page_id=49" title="Musik">Musik</a></li>
<li class="page_item page-item-13"><a href="http://piya.dk/2010/?page_id=13" title="Media">Media</a></li>
<li class="page_item page-item-10"><a href="http://piya.dk/2010/?page_id=10" title="Kontakt">Kontakt</a></li>
</ul>
<div id="rss">
<a href="http://piya.dk/2010/?feed=rss2" title="RSS" class="toolTip">RSS</a>
</div><!-- /rss -->
</div><!-- /menu content -->
</div><!-- /header -->

<div id="left-col">
<div class="article">
<h1><a href="http://piya.dk/2010/?p=42" rel="bookmark" title="Endnu en nyhed!">Endnu en nyhed!</a></h1>
<div class="line01">
</div><!-- /line -->
<p>Endnu en nyhed, mens vi venter på den færdige side ! <img src='http://piya.dk/2010/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
</div><!-- /article -->
<div class="article">
<h1><a href="http://piya.dk/2010/?p=31" rel="bookmark" title="Nyt indlæg igen?">Nyt indlæg igen?</a></h1>
<div class="line01">
</div><!-- /line -->
<p>Så kom der endnu et nyt indlæg på piya.dk/2010</p>
<p> <a href="http://piya.dk/2010/?p=31#more-31" class="more-link">Continue&nbsp;reading&hellip;</a></p>
</div><!-- /article -->
<div class="article">
<h1><a href="http://piya.dk/2010/?p=1" rel="bookmark" title="Hej Verden!">Hej Verden!</a></h1>
<div class="line01">
</div><!-- /line -->
<p>Velkommen til WordPress. Dette er dit første indlæg. Du kan rette eller slette det, og derefter er det bare om at begynde at blogge!</p>
<p>test</p>
<p>test</p>
</div><!-- /article -->
</div><!-- /left-col-->
<div id="right-col">
<div id="right-col-content">
<div class="sidebar">
<div id="sidebar-search">
<form method="get" id="search" action="http://piya.dk/2010/">
<fieldset>
<div id="search-bg">
<input type="text" value="" name="s" id="s" />
</div><!-- /search-bg -->
<input type="submit" id="searchsubmit" value="" title="Søg" />
</fieldset>
</form>
</div><!-- /sidebar-search -->
</div><!-- /sidebar -->
<div class="sidebar">
<h5><span>Kalender</span></h5>
<div class="sidebar-content">
<div id="calendar_wrap">
<table id="wp-calendar" summary="Kalender">
<caption>april 2010</caption>
<thead>
<tr><th abbr="mandag" scope="col" title="mandag">m</th><th abbr="tirsdag" scope="col" title="tirsdag">ti</th><th abbr="onsdag" scope="col" title="onsdag">o</th><th abbr="torsdag" scope="col" title="torsdag">to</th><th abbr="fredag" scope="col" title="fredag">f</th><th abbr="lørdag" scope="col" title="lørdag">l</th><th abbr="søndag" scope="col" title="søndag">s</th></tr>
</thead>
<tfoot>
<tr><td colspan="3" id="prev" class="pad">&nbsp;</td><td class="pad">&nbsp;</td><td colspan="3" id="next" class="pad">&nbsp;</td></tr>
</tfoot>
<tbody>
<tr><td colspan="3" class="pad">&nbsp;</td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td><a href="http://piya.dk/2010/?m=20100424" title="Hej Verden!">24</a></td><td>25</td></tr>
<tr><td><a href="http://piya.dk/2010/?m=20100426" title="Nyt indlæg igen?
Endnu en nyhed!">26</a></td><td>27</td><td>28</td><td>29</td><td id="today">30</td><td class="pad" colspan="2">&nbsp;</td></tr>
</tbody>
</table>
</div><!-- /calendar-wrap -->
</div><!-- /sidebar content -->
</div><!-- /sidebar -->
<div class="sidebar">
<h5><span>Connect</span></h5>
<div class="sidebar-content">
<div class="textwidget">
<img class="alignnone" src="http://piya.dk/2010/wp-content/uploads/2010/04/bt_twitter.gif" alt="" width="45" height="44" />
</div><!-- /textwidget -->
</div><!-- /sidebar-content -->
</div><!-- /sidebar -->
</div><!-- /right-col-content -->
</div><!-- /right-col -->

?</div> <!-- /content -->
<div class="clear">
</div> <!-- /clear -->
<div id="footer">
<div id="footer-content">
<div id="up">
<a href="#wrapper" title="Top" class="toolTip">UP</a>
</div> <!-- /up -->
<div id="footer-photo">
</div> <!-- /footer-photo -->
<div id="footer-contact">
<div>
<h1>Kontakt</h1>
<div class="textwidget">
PIYA ZENIA ANDERSEN<br/>
kontakt: <a href="#">[email protected]</a><br/>
web: <a href="#">www.piya.dk</a><br/>
facebook: <a href="#">www.facebook.dk</a><br/>
my space: <a href="#">www.myspace.com/piya</a><br/>
</div> <!-- /textwidget -->
</div> <!-- / -->
</div> <!-- /footer-contact -->
<div id="copyright">
Copyright © 2010 PIYA - All rights reserved.
</div> <!-- /copyright -->
</div> <!-- /footer-content -->
</div> <!-- /footer -->
</div> <!-- /wrapper -->

</body>
</html>

Samz3n
Apr 30th, 2010, 06:02 PM
The problem is your <div>s and </div>s are not matched. There is an extra </div>

Here is a reformatted version of your page with all <div>s and </div>s on their own lines and all </div>s commented with the class or id of the matching <div> for ease of checking.

This solves the problem in IE7 mode (on my IE8 browser).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da-DK" lang="da-DK">
<head>
<base href="http://piya.dk/2010/" />
<title>PIYA</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="Endnu en WordPress-blog" />
<meta name="keywords" content="PIYA" />
<link rel="stylesheet" href="http://piya.dk/2010/wp-content/themes/rascals_djs/style.css" type="text/css" media="all" />
<link rel="alternate" type="application/rss+xml" title="PIYA RSS Feed" href="http://piya.dk/2010/?feed=rss2" />
<link rel="pingback" href="http://piya.dk/2010/xmlrpc.php" />
<link rel="icon" href="http://piya.dk/2010/wp-content/themes/rascals_djs/favicon.ico"/>
<link rel="shortcut icon" href="http://piya.dk/2010/wp-content/themes/rascals_djs/favicon.ico"/>
<script type='text/javascript' src='http://piya.dk/2010/wp-content/themes/rascals_djs/js/jquery.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://piya.dk/2010/wp-content/themes/rascals_djs/js/custom.js?ver=1.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://piya.dk/2010/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://piya.dk/2010/wp-includes/wlwmanifest.xml" />
<link rel='index' title='PIYA' href='http://piya.dk/2010' />
<meta name="generator" content="WordPress 2.9.2" />
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="header">
<div id="newsletter">
<input type="text" value="indtast din email..." class="newsletter"/>
<input type="submit" value="OK" class="newsletter-submit"/>
<input type="hidden" value="http://piya.dk/2010/wp-content/themes/rascals_djs/newsletter.php" id="newsletter-path"/>
</div><!-- /newsletter -->
<a href="http://piya.dk/2010" title="PIYA" class="toolTip" id="logo-btn"> PIYA </a>
<div id="menu-content">
<ul id="menu">
<li class="page_item page-item-7"><a href="http://piya.dk/2010/?page_id=7" title="Nyheder">Nyheder</a></li>
<li class="page_item page-item-2"><a href="http://piya.dk/2010/?page_id=2" title="Biografi">Biografi</a></li>
<li class="page_item page-item-49"><a href="http://piya.dk/2010/?page_id=49" title="Musik">Musik</a></li>
<li class="page_item page-item-13"><a href="http://piya.dk/2010/?page_id=13" title="Media">Media</a></li>
<li class="page_item page-item-10"><a href="http://piya.dk/2010/?page_id=10" title="Kontakt">Kontakt</a></li>
</ul>
<div id="rss">
<a href="http://piya.dk/2010/?feed=rss2" title="RSS" class="toolTip">RSS</a>
</div><!-- /rss -->
</div><!-- /menu content -->
</div><!-- /header -->

<div id="left-col">
<div class="article">
<h1><a href="http://piya.dk/2010/?p=42" rel="bookmark" title="Endnu en nyhed!">Endnu en nyhed!</a></h1>
<div class="line01">
</div><!-- /line -->
<p>Endnu en nyhed, mens vi venter på den færdige side ! <img src='http://piya.dk/2010/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
</div><!-- /article -->
<div class="article">
<h1><a href="http://piya.dk/2010/?p=31" rel="bookmark" title="Nyt indlæg igen?">Nyt indlæg igen?</a></h1>
<div class="line01">
</div><!-- /line -->
<p>Så kom der endnu et nyt indlæg på piya.dk/2010</p>
<p> <a href="http://piya.dk/2010/?p=31#more-31" class="more-link">Continue&nbsp;reading&hellip;</a></p>
</div><!-- /article -->
<div class="article">
<h1><a href="http://piya.dk/2010/?p=1" rel="bookmark" title="Hej Verden!">Hej Verden!</a></h1>
<div class="line01">
</div><!-- /line -->
<p>Velkommen til WordPress. Dette er dit første indlæg. Du kan rette eller slette det, og derefter er det bare om at begynde at blogge!</p>
<p>test</p>
<p>test</p>
</div><!-- /article -->
</div><!-- /left-col-->
<div id="right-col">
<div id="right-col-content">
<div class="sidebar">
<div id="sidebar-search">
<form method="get" id="search" action="http://piya.dk/2010/">
<fieldset>
<div id="search-bg">
<input type="text" value="" name="s" id="s" />
</div><!-- /search-bg -->
<input type="submit" id="searchsubmit" value="" title="Søg" />
</fieldset>
</form>
</div><!-- /sidebar-search -->
</div><!-- /sidebar -->
<div class="sidebar">
<h5><span>Kalender</span></h5>
<div class="sidebar-content">
<div id="calendar_wrap">
<table id="wp-calendar" summary="Kalender">
<caption>april 2010</caption>
<thead>
<tr><th abbr="mandag" scope="col" title="mandag">m</th><th abbr="tirsdag" scope="col" title="tirsdag">ti</th><th abbr="onsdag" scope="col" title="onsdag">o</th><th abbr="torsdag" scope="col" title="torsdag">to</th><th abbr="fredag" scope="col" title="fredag">f</th><th abbr="lørdag" scope="col" title="lørdag">l</th><th abbr="søndag" scope="col" title="søndag">s</th></tr>
</thead>
<tfoot>
<tr><td colspan="3" id="prev" class="pad">&nbsp;</td><td class="pad">&nbsp;</td><td colspan="3" id="next" class="pad">&nbsp;</td></tr>
</tfoot>
<tbody>
<tr><td colspan="3" class="pad">&nbsp;</td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td><a href="http://piya.dk/2010/?m=20100424" title="Hej Verden!">24</a></td><td>25</td></tr>
<tr><td><a href="http://piya.dk/2010/?m=20100426" title="Nyt indlæg igen?
Endnu en nyhed!">26</a></td><td>27</td><td>28</td><td>29</td><td id="today">30</td><td class="pad" colspan="2">&nbsp;</td></tr>
</tbody>
</table>
</div><!-- /calendar-wrap -->
</div><!-- /sidebar content -->
</div><!-- /sidebar -->
<div class="sidebar">
<h5><span>Connect</span></h5>
<div class="sidebar-content">
<div class="textwidget">
<img class="alignnone" src="http://piya.dk/2010/wp-content/uploads/2010/04/bt_twitter.gif" alt="" width="45" height="44" />
</div><!-- /textwidget -->
</div><!-- /sidebar-content -->
</div><!-- /sidebar -->
</div><!-- /right-col-content -->
</div><!-- /right-col -->

?</div> <!-- /content -->
<div class="clear">
</div> <!-- /clear -->
<div id="footer">
<div id="footer-content">
<div id="up">
<a href="#wrapper" title="Top" class="toolTip">UP</a>
</div> <!-- /up -->
<div id="footer-photo">
</div> <!-- /footer-photo -->
<div id="footer-contact">
<div>
<h1>Kontakt</h1>
<div class="textwidget">
PIYA ZENIA ANDERSEN<br/>
kontakt: <a href="#">[email protected]</a><br/>
web: <a href="#">www.piya.dk</a><br/>
facebook: <a href="#">www.facebook.dk</a><br/>
my space: <a href="#">www.myspace.com/piya</a><br/>
</div> <!-- /textwidget -->
</div> <!-- / -->
</div> <!-- /footer-contact -->
<div id="copyright">
Copyright © 2010 PIYA - All rights reserved.
</div> <!-- /copyright -->
</div> <!-- /footer-content -->
</div> <!-- /footer -->
</div> <!-- /wrapper -->

</body>
</html>

So where exactly do i remove the extra </div>s?
I see the code you found, is the "view source" on the site, but i can't find it in my files?
And do I have to remove it on any site I got?

mbaker
May 1st, 2010, 11:02 AM
The only way that I know to solve issues like this is to take the generated html and debug it. I could do that again to find the errant </div> but I'm not of a mind to. It took about an hour to do the first time and I'm not going to do that again.

Steps to take.

1. View source.
2. Copy source to clip board.
3. Create test html file in a text editor such as notepad.
4. Paste the source code from the clipboard into the html file.
5. Add into the <head> element: <base href="BASE-URL-OF-PAGE">
[Step 5 will (in most cases) allow you to work on the HTML and view the page locally, as if it were on your website]
6. Reformat the code so that each <div> and each </div> is on a line on its own.
7. Insert comments before or after each each </div> to note the corresponding <div>
8. Indent the code inside each <div></div>.

Somewhere in this process you will find the unmatched </div>.

Once you have found the unmatched </div> you need to find where it came from, and possibly the circumstances under which it was generated, and fix it.

As an alternative to steps 1 to 8 above, you could compare my modified source with the view source for your page, </div> by </div> until you find the extra one that I must have deleted.

Michael.