#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    47
    Rep Power
    85

    FireFox and Chrome Not Styling Span Elements!?


    Chrome and Firefox aren't styling any of the span elements I have-in IE they load fine. For example the css..I'll check back in this book I have and online to see if I can find the issue. I appreciate any help. For example heres a span I have.
    Code:
    .title {background-color:CCCCCC;
            font-family:Verdana;
    	 margin:0px;
    	 padding:0px;
    	 border:2px double blue;
    	 height:70px;
             width:200px;
    }
    the html..
    Code:
    <div id="menu">
         <span class="button">
           <a href="www.google.com">home</a>
         </span>
          <span class="button">
           <a href="www.google.com">home</a>
         </span>
          </div>
         <div id="content">
           <div id="sidebar">
             <p>sidebar to the right</p>
             <h2>text</h2>
             </div>
         <span class="title">
         <h2>Title of something</h2>
         </span>
             <p>some text sdfdsdsfdsf</p>
        </div>
    It may be that the divs and spans are conflicting because of their properties or that they are not properly nested or named..?
    Here's my whole css document.
    Code:
    #container {margin-left:25%;
               margin-right:25%;
    }
    #header {text-align:center;
            background-color:grey;
    		border:solid; 
    		border-width:2px;
    		border-color:black;
    		margin-bottom:20px;
    }
    #menu {background-color:white;
          border:solid;
    	  border-color:black;
    	  border-width:1px;
    	  font-family:Verdana;
    	  padding:8px;
    	  margin:0px;
    	  
    }
    .button {background-color:#FFFFCC;
             margin:3px;
    		 width:90px;
    		 border:solid;
    		 padding:2px;
    		 border-width:1px;
    		 border-color:black;
    		 text-decoration:none;
    		 color:grey;
    		 text-align:center;
    		 font-family:Verdana;
    		 font-size:small;
    }
    #content{background-color:white;
             font-family:Verdana;
    		 padding-left:20px;
    		 padding-top:0px;
    		 padding-bottom:0px;
    		 border:1px solid grey;
    		 margin-right:0px;
    		 margin-top:20px;
    		 height:900px;
    }
    
    .title {background-color:#CCCCCC;
            font-family:Verdana;
    	    border:2px double #000000;
    	    height:70px;
    		width:200px;
    }
    
    #footer{align:center; background-color:grey;font-size:.60em;}
    #sidebar {float:right;
             width:150px; 
    		 height:900px;
    		 background-color:white;
    		 border-left:1px double grey;
    		 margin-left:0px;
    		 padding:8px;
    }
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1228
    Chrome and Firefox is doing the what the specification says, width and height is ignored.

    http://www.w3.org/TR/CSS21/visudet.html#inline-width
    http://www.w3.org/TR/CSS21/visudet.h...e-non-replaced

    You can use the display property to change the behaviour of the span elements.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, stud3nt3.

    To add to what Akh said, an <h2> may not be placed within a <span> (or other inline elements, including <a>s). Just give the class to the <h2> directly.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo