Web Analytics Made Easy -
StatCounter Strange CSS block behavior - CodingForum

Announcement

Collapse
No announcement yet.

Strange CSS block behavior

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Strange CSS block behavior

    Hey all,

    First post here so go easy on me! I'm currently updating my Wordpress site and have come across a very strange CSS predicament. I have a page for DJ mixes and have set a number of div tags with block links to toggle the selected mix to display. The link blocks are two in a row, but for some reason, the first block is not vertically aligned properly. I've been scratching my head over this one for hours now so I figured I'd bring it to the experts.

    The page in question is...

    http://dev.fortyfivan.com/mixes/

    The CSS code is...

    Code:
    #mix_list
    {
    	font-size:14px;
    	color:#006f93;
    	text-shadow: 1px 1px 0px #ffffff;
    }
    
    #mix_list .mix_button
    {
    	float:left;
    	display: block;
    	width:300px;
    	height:40px;
    	overflow:hidden;
    	border:1px solid #c0c0c0;
    	padding:5px;
    	margin:0 7px 7px 0;
    	background:#eaeaea;
    	font-size:14px;
    	line-height:1.4em;
    	text-decoration:none;
    	text-align: center;
    	color: #006f93;
    }
    
    #mix_list .mix_button span
    {
    	display:block;
    	padding-top:13px;
    }
    
    #mix_list .mix_button:hover
    {
    	background:#ddd;
    	border:1px solid #aaa;
    }
    The HTML code is...

    Code:
    <div id="mix_list">
    <a class="mix_button" href="#" onClick="Toggle(0,14)"><span>Summer Soulstice Vol 2</span></a>
    <a class="mix_button" href="#" onClick="Toggle(1,14)"><span>Forty Fivan Compacto Edition Vol 2</span></a>
    <a class="mix_button" href="#" onClick="Toggle(2,14)"><span>Afrodisia</span></a>
    <a class="mix_button" href="#" onClick="Toggle(3,14)"><span>Forty Fivan Compacto Edition Vol 1</span></a>
    <a class="mix_button" href="#" onClick="Toggle(4,14)"><span>Brasil Meu Amor Vol 2</span></a>
    <a class="mix_button" href="#" onClick="Toggle(5,14)"><span>AFREAKA! Guest Mix</span></a>
    <a class="mix_button" href="#" onClick="Toggle(6,14)"><span>Brasil Meu Amor Vol 1</span></a>
    <a class="mix_button" href="#" onClick="Toggle(7,14)"><span>Forty Fivan Vol 3</span></a>
    <a class="mix_button" href="#" onClick="Toggle(8,14)"><span>Forty Fivan Vol 2</span></a>
    <a class="mix_button" href="#" onClick="Toggle(9,14)"><span>America Do Sol</span></a>
    <a class="mix_button" href="#" onClick="Toggle(10,14)"><span>Forty Fivan Vol 1</span></a>
    <a class="mix_button" href="#" onClick="Toggle(11,14)"><span>Funky Penguin</span></a>
    <a class="mix_button" href="#" onClick="Toggle(12,14)"><span>Africa Brasil</span></a>
    <a class="mix_button" href="#" onClick="Toggle(13,14)"><span>Summer Soulstice Vol 1</span></a>
    </div>
    Any assistance would be greatly appreciated... I'm just an amateur web developer

    Cheers,

    Ivan

  • #2
    <br> tags are not required here, so remove it.

    Also correct tag is <br />, <br> is invalid

    Comment


    • #3
      Originally posted by vikram1vicky View Post
      <br> tags are not required here, so remove it.

      Also correct tag is <br />, <br> is invalid
      to elaborate Vikram means delete it... I went and looked and if you delete this line the problem will go away (posting this bc it is still there and didnt know if you understood what he meant)

      I code C hash-tag .Net
      Reference: W3C W3CWiki .Net Lib
      Validate: html CSS
      Debug: Chrome FireFox IE

      Comment


      • #4
        Originally posted by alykins View Post
        to elaborate Vikram means delete it... I went and looked and if you delete this line the problem will go away (posting this bc it is still there and didnt know if you understood what he meant)
        Thanks for checking... unfortunately that didn't do the trick. It was only there in the first place because I was trying a bunch of different things and forgot to take it out before posting. Any other ideas?

        Comment


        • #5
          Originally posted by FortyFivan View Post
          Thanks for checking... unfortunately that didn't do the trick. It was only there in the first place because I was trying a bunch of different things and forgot to take it out before posting. Any other ideas?
          Removing the first br element does the trick for me. Apparently, this issue is caused by interaction between the br element and the floated song title boxes.

          I don't know why you have br elements at all given that floating the song title boxes causes automatic line-breaks.

          Originally posted by vikram1vicky View Post
          <br> tags are not required here, so remove it.

          Also correct tag is <br />, <br> is invalid
          Speaking of XHTML 1.0 validity, XML is case-sensitive and, since all XHTML attribute names are defined in lowercase, onClick is not an XHTML attribute (i.e., the attribute you're looking for is onclick).

          Comment

          Working...
          X