Links make a space and dissappear when clicked. [Video included]

GloStix

Okay, when I click the link it dissapears and makes a white space underneath it but the space is clickable. so when you click the space, the link actually works
Used Firefox 3.0 RC2 for this.
OS X 10.5
http://www.screencast.com/t/wgztYUrdN (Video)

http://www.jameswmann.com/music.htm (The actual page)
HTML [shortened]

Expand|Select|Wrap|Line Numbers

  
<!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="en" lang="en">
 
<head>

<title>James Mann - Projects</title>

<link rel="stylesheet" href="default.css" type="text/css" title="green" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="blue" href="blue.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="red" href="red.css" />

<link rel="shortcut icon" href="favicon.ico">

<meta http-equiv="content-type" 

        content="text/html;charset=utf-8" />

    <meta http-equiv="Content-Style-Type" content="text/css" />

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta name="keywords" content="Music, Digital, Internet, CSS, HTML, Profile, Design, Web, Photoshop, Dreamweaver, Flash" />

<meta name="description" content="A website where I showcase the latest and greatest work that I've made. Music, Digital Art, Websites, It's all here.

" />
 
<script type="text/javascript" src="includes/styleswitcher.js"></script>
 
</head>
 
<body>

<div id="topbar">

    <div id="buttonconatiner">

      <div id="buttons">
 
        <ul>

          <li><a href="index.htm">Home</a></li>

            <li><a href="media.htm">Media</a></li>

            <li><a href="websites.htm">Websites</a></li>

            <li class="selected"><a href="music.htm">Music</a></li>

            <li><a href="about.htm">About Me</a></li>

          </ul>

        </div>

    <meta name="keywords" content="Music, Digital, Internet, CSS, HTML, Profile, Design, Web, Photoshop, Dreamweaver, Flash" />

<meta name="description" content="A website where I showcase the latest and greatest work that I've made. Music, Digital Art, Websites, It's all here.

" />

</div>

</div>

<div id="all">
 
<div id="wrapper">

<div id="container">

<div id="banner">

<a href="#"></a>

</div>
 
<div id="flashtop">
 
<script type="text/javascript" src="includes/flashobject.js"></script>

              <div id="flashban" style="width: 700px; height: 150px"></div>
 
      <script type="text/javascript" language="javascript">

                var fo = new FlashObject("images/flashbanner2.swf", "flashban", "700", "150", "7", "#000000, true");

                fo.addParam("allowScriptAccess", "sameDomain");

                fo.addParam("quality", "high");

                fo.addParam("scale", "noscale");

                fo.addParam("loop", "false");

                fo.addParam("wmode", "transparent");

                fo.write("flashban");

              </script>

    </div>
 
<div id="content">
 
<h1>Music</h1>
 
<p align="center" class="bigz"> This is my favorite music that I've made sort of recently. Enjoy.</p>

<p align="center" class="bigz"> As soon as I find a good embedable mp3 player that can parse .mp3 not just swf's with audio. They will be linked to last.fm</p>
 
<blockquote>

<object width="13" height="13" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" allowNetworking="internal"> <param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="resourceID=202339754&flp=true" /> <param name="movie" value="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed wmode="transparent" src="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" quality="high" FlashVars="resourceID=202339754&flp=true" bgcolor="#ffffff" width="13" height="13" name="inlinePlayer" allowNetworking="internal" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> 

<a href="http://www.last.fm/music/Dj+GloStix">Dj GloStix</a> – <a href="http://www.last.fm/music/Dj+GloStix/_/Wrath+of+Aten">Wrath of Aten</a><br />

Genre: Techno/Dance/Epic<br />

Length: 4:28

</blockquote>
 
<blockquote>

<object width="13" height="13" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" allowNetworking="internal"> <param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="resourceID=202342635&flp=true" /> <param name="movie" value="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed wmode="transparent" src="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" quality="high" FlashVars="resourceID=202342635&flp=true" bgcolor="#ffffff" width="13" height="13" name="inlinePlayer" allowNetworking="internal" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> 

<a href="http://www.last.fm/music/Dj+GloStix">Dj GloStix</a> – <a href="http://www.last.fm/music/Dj+GloStix/_/The+Last+Stand">The Last Stand</a><br  />

Genre: Epic Techno<br />

Length: 5:32

</blockquote>
 
<blockquote>

<object width="13" height="13" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" allowNetworking="internal"> <param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="resourceID=202339757&flp=true" /> <param name="movie" value="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed wmode="transparent" src="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" quality="high" FlashVars="resourceID=202339757&flp=true" bgcolor="#ffffff" width="13" height="13" name="inlinePlayer" allowNetworking="internal" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> 

<a href="http://www.last.fm/music/Dj+GloStix">Dj GloStix</a> – <a href="http://www.last.fm/music/Dj+GloStix/_/Covert+Bass">Covert Bass</a><br  />

Genre: Techno/Rave<br />

Length: 5:51

</blockquote>
 
<blockquote>

<object width="13" height="13" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" allowNetworking="internal"> <param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="resourceID=202339756&flp=true" /> <param name="movie" value="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed wmode="transparent" src="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" quality="high" FlashVars="resourceID=202339756&flp=true" bgcolor="#ffffff" width="13" height="13" name="inlinePlayer" allowNetworking="internal" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> 

<a href="http://www.last.fm/music/Dj+GloStix">Dj GloStix</a> – <a href="http://www.last.fm/music/Dj+GloStix/_/System+Crash">System Crash</a><br />

Genre: Hardstyle/Epic<br />

Length: 5:12

</blockquote>
 
<blockquote>

<object width="13" height="13" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" allowNetworking="internal"> <param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="resourceID=202339758&flp=true" /> <param name="movie" value="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed wmode="transparent" src="http://static.last.fm/webclient/inline/6/inlinePlayer.swf" quality="high" FlashVars="resourceID=202339758&flp=true" bgcolor="#ffffff" width="13" height="13" name="inlinePlayer" allowNetworking="internal" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> 

<a href="http://www.last.fm/music/Dj+GloStix">Dj GloStix</a> – <a href="http://www.last.fm/music/Dj+GloStix/_/Evil+Cookies">Evil Cookies</a><br />

Genre: Techno<br />

Length: 5:04

</blockquote>
 
</div>

</div>
 
</div>
 
</div>

</div>
 
</body>

</html>

CSS (short)
CSS Full ( http://www.jameswmann.com/default.css )

Expand|Select|Wrap|Line Numbers

 
/*

//////////////Music Galley//////////

*/
 
blockquote {

    border:solid #999999 1px;

    margin-right:30px;

    padding:5px;

    width:250px;

    float:left;

}

You've probably seen my website like 5times now just by fixing my problems xD

I assume this will be a small fix though.

Thanx again guys :D

eWish

Fix the 86 errors and then see if you still have the same problem.

--Kevin

GloStix

Quote:

Originally Posted by eWish

Fix the 86 errors and then see if you still have the same problem.

--Kevin

Wow I was so focused on validating my CSS that I forgot about my HTML.
This is going to take forever to fix for 5 pages. Any fast ways to do it other than manually?

GloStix

Wow, last.fm made most of my errors with it's stupid embed code. I have to freaking fix everyone! AhhH!

GloStix

Okay used the HTML Tidy up thing the vaildater has, and got all of the errors out that I could possible get out.
It has 18 errors now, All relating to the flash thing last.fm I can't fix them because I don't know if it'll screw it up or not.

Problem is still there by the way..

eWish

I write all of my markup and code from scratch. So, manually is the only why I do it. Taking care of it as you go would be better.

--Kevin

GloStix

Quote:

Originally Posted by eWish

I write all of my markup and code from scratch. So, manually is the only why I do it. Taking care of it as you go would be better.

--Kevin

I just went through every page on my website.

3 out of 5 are error free and completed validated.

Website's page has 1 error because I used a target="_blank" attribute, apparently XHTML doesn't use that >__> go figure.

Music page has 17 errors, all are from the flash player code that last.fm gave me...

Do you have any idea what the links are doing?
It's weird.

gits

you current problem comes from this css-declaration:

Expand|Select|Wrap|Line Numbers

 ul a,a:visited,a:focus {

    color:#ffffff;

    text-decoration:none;

    cursor:pointer;

    display:block;

}

have a look at the color and display properties :)

kind regards

GloStix

Quote:

Originally Posted by gits

you current problem comes from this css-declaration:

Expand|Select|Wrap|Line Numbers

 ul a,a:visited,a:focus {

    color:#ffffff;

    text-decoration:none;

    cursor:pointer;

    display:block;

}

have a look at the color and display properties :)

kind regards

I changed it from:

Expand|Select|Wrap|Line Numbers

 ul a,a:visited,a:focus {

    color:#ffffff;

    text-decoration:none;

    cursor:pointer;

    display:block;

}

to

Expand|Select|Wrap|Line Numbers

  
ul a,ul a:visited,ul a:focus {

    color:#ffffff;

    text-decoration:none;

    cursor:pointer;

    display:block;

}

Works now.
Thanx Man:)
That's the quick fix I was looking for.
Good eye :P

gits

hi ... glad to hear you got it working ;) ... it was quite easy to find with firebug's css-inspector ... a nice firefox-webdeveloper-plugin that i would strongly recommend for such purposes ...

kind regards

Links make a space and dissappear when clicked. [Video included]

re: Links make a space and dissappear when clicked. [Video included]

re: Links make a space and dissappear when clicked. [Video included]

re: Links make a space and dissappear when clicked. [Video included]

re: Links make a space and dissappear when clicked. [Video included]

re: Links make a space and dissappear when clicked. [Video included]

re: Links make a space and dissappear when clicked. [Video included]

re: Links make a space and dissappear when clicked. [Video included]

re: Links make a space and dissappear when clicked. [Video included]

re: Links make a space and dissappear when clicked. [Video included]

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about