SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Issue in IE 7

    I am having an issue where a span is displaying on a second line in IE7 and not inline with the h3 and h4 tags. In IE8 and Firefox everything is working perfectly. The span is the problem and if anyone knows what I am doing wrong I would greatly appreciate any feedback:

    CSS code:
    Code:
    .accordion-wrap {
    	background-color: #83add3;
    	width: 100%;
    	margin: 0 0 20px 0;
    }
    .accordion {
    	width: 500px;
    	margin: 0 auto;
    }
    .accordion h1 {
    	font-size: 16px;
    	color: #fff;
    	font-weight: bold;
    	margin: 0;
    	padding: 0;
    }
    .accordion a {
    	color: #ffffff;
    	text-decoration: none;
    }
    .accordion span {
    	float: right;
    }
    .accordion ul {
    	display: none;
    	padding: 0;
    	margin: 0;
    }
    .accordion ul li {
    	list-style: none;
    }
    .accordion h3 {
    	background-color: #467aad;
    	border-top: 1px #5e8ebc solid;
    	border-left: 1px #5e8ebc solid;
    	border-right: 1px #5e8ebc solid;
    	font-size: 12px;
    	cursor: pointer;
    	color: #ffffff;
    	padding: 3px 5px;
    	margin: 0;
    }
    .accordion h3.last {
    	border-bottom: 1px #5e8ebc solid;
    }
    .accordion h3:hover {
    	color: #daecf8;
    	text-decoration: none;
    	background-color: #5e8ebc;
    }
    .accordion h3.active {
    /*	background-position: right 5px;
    */}
    .accordion h4 {
    	background-color: #9ec0de;
    	cursor: pointer;
    	color: #1b4772;
    	font-size: 11px;
    	padding: 3px 5px 3px 20px;
    	margin: 0;
    }
    .accordion h4:hover {
    	color: #daecf8;
    	text-decoration: none;
    }
    .accordion h4.active {
    /*	background-position: right 5px;
    */}
    .accordion ul li ul {
    	background-color: #9ec0de;
    	cursor: pointer;
    	color: #1b4772;
    	font-size: 11px;
    	padding: 3px 5px 3px 35px;
    	margin: 0;
    	font-weight: normal;
    }
    HTML Code:
    HTML Code:
    <div class="accordion-wrap">
      <div class="accordion">
        <h1>Areas We Serve</h1>
        <h3>Delaware<span><a href="http://www.google.com">More Information</a></span></h3>
        <ul>
          <li>
            <h4>New Castle County<span><a href="http://www.google.com">More Information</a></span></h4>
            <ul>
              <li><a href="http://www.google.com">Sample City</a></li>
              <li><a href="http://www.google.com">Sample City</a></li>
              <li><a href="http://www.google.com">Sample City</a></li>
            </ul>
          </li>
        </ul>
        <h3>New Jersey<span><a href="http://www.google.com">More Information</a></span></h3>
        <ul>
          <li>
            <h4>Atlantic County<span><a href="http://www.google.com">More Information</a></span></h4>
            <ul>
              <li><a href="http://www.google.com">Sample City</a></li>
              <li><a href="http://www.google.com">Sample City</a></li>
              <li><a href="http://www.google.com">Sample City</a></li>
            </ul>
            <h4>Bucks County<span><a href="http://www.google.com">More Information</a></span></h4>
            <ul>
              <li><a href="http://www.google.com">Sample City</a></li>
              <li><a href="http://www.google.com">Sample City</a></li>
              <li><a href="http://www.google.com">Sample City</a></li>
            </ul>
            <h4>Burlington County<span><a href="http://www.google.com">More Information</a></span></h4>
            <ul>
              <li><a href="http://www.google.com">Sample City</a></li>
              <li><a href="http://www.google.com">Sample City</a></li>
              <li><a href="http://www.google.com">Sample City</a></li>
            </ul>
            <h4>Camden County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Cape May County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Cumberland County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Gloucester County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Hunterdon County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Mercer County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Middlesex County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Monmouth County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Ocean County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Philadelphia County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Salem County<span><a href="http://www.google.com">More Information</a></span></h4>
          </li>
        </ul>
        <h3>Pennsylvania<span><a href="http://www.google.com">More Information</a></span></h3>
        <ul>
          <li>
            <h4>Atlantic County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Berks County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Bucks County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Burlington County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Camden County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Chester County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Delaware County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Gloucester County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Lehigh County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Mercer County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Montgomery County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Northampton County<span><a href="http://www.google.com">More Information</a></span></h4>
            <h4>Philadelphia County<span><a href="http://www.google.com">More Information</a></span></h4>
          </li>
        </ul>
        <h3 class="last">Virginia<span><a href="http://www.google.com">More Information</a></span></h3>
        <ul>
          <li>
            <h4>n/a<span><a href="http://www.google.com">More Information</a></span></h4>
          </li>
        </ul>
      </div>
    </div>

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Probably, put the span before the other text and float it as you were.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Eric that worked perfectly! I am almost scared to open this page in IE6 haha!

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Your welcome, at least the piece we just fixed should perform the same in ie6.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So how do you check web sites in IE6? I can only use IE7 and IE8. Do you have something?

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Google IETester. That's what most use.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •