SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Main divs break in IE6, no where else

    Site: Activities For Kids

    You will notice in IE6 that the center div on the home page drops below the sidebar. This doesn't happen anywhere else. On activity pages (Color Wheel Activities | wordpress), it's reversed. The right sidebar drops below the center div and adds space to the wrapper. The second problem occurred while I was changing some minor CSS for IE, so now I feel like I'm breaking IE6 faster than I can fix it.

    Any thoughts on how to fix this problem? I have a feeling that it has to do with some crappy hacks I threw in to get compatibility last time which have now broken due to other changes I've made around the site, but because IE6 breaks in a way that seems to have no logical relationship to the changes that were made, I'm hesitant to jump in and tinker without some advice, lest I break it even harder.

    Any thoughts would be appreciated.

    P.S. I know that supporting IE6 has gone out of vogue, but stats from the old site tell us that our audience needs support for it.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I pointed these errors out to you before and they are coming back to bite you again

    There are just too many mismatched tags for IE to make any sense of it.

    The main culprits are these sections that you have 2 or three times in yout page.

    Code:
                    <p class="uphol">Upcoming Holidays</p>
                    <li id="categoryposts-3" class="widget widget_categoryposts">
                        <ul>
                            <li class="cat-post-item"> <a class="post-title" href="http://032b4a6.netsolhost.com/WordPress/color-wheel-activities" rel="bookmark" title="Permanent link to Color Wheel Activities">Color Wheel Activities</a> <a href="http://032b4a6.netsolhost.com/WordPress/color-wheel-activities" title="Color Wheel Activities"> <img width="60" height="60" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/05/color-wheel-square-60x60.jpg" class="attachment-cat_post_thumb_sizecategoryposts-3 wp-post-image" alt="color-wheel-square" title="color-wheel-square" /> </a>
                                <p>Two easy color wheel projects to help children learn about primary and secondary colors.</p>
                            </li>
                            <li class="cat-post-item"> <a class="post-title" href="http://032b4a6.netsolhost.com/WordPress/fun-foam-flower-bookmark" rel="bookmark" title="Permanent link to Fun Foam Flower Bookmark">Fun Foam Flower Bookmark</a> <a href="http://032b4a6.netsolhost.com/WordPress/fun-foam-flower-bookmark" title="Fun Foam Flower Bookmark"> <img width="60" height="60" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/04/flower-bookmark-square-60x60.jpg" class="attachment-cat_post_thumb_sizecategoryposts-3 wp-post-image" alt="Flower Bookmark" title="flower-bookmark-square" /> </a>
                                <p>Easy to assemble, great classroom project for Mother’s Day.  Inexpensive project for scouting groups or Flower themed birthday parties.</p>
                            </li>
                            <li class="cat-post-item"> <a class="post-title" href="http://032b4a6.netsolhost.com/WordPress/fathers-day-card" rel="bookmark" title="Permanent link to Father’s Day Card">Father’s Day Card</a> <a href="http://032b4a6.netsolhost.com/WordPress/fathers-day-card" title="Father’s Day Card"> <img width="60" height="48" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/fathers-day-card.jpg" class="attachment-cat_post_thumb_sizecategoryposts-3 wp-post-image" alt="Father&#039;s Day Card" title="fathers-day-card" /> </a>
                                <p>Easy Father’s Day card for any age child.  Easy to assemble.</p>
                            </li>
                        </ul>
                    </li>
                    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-1205630963811834";
    /* AFK300250 */
    google_ad_slot = "3297487393";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
                    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
                    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-1205630963811834";
    /* AFK300250 */
    google_ad_slot = "3297487393";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
                    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
                </ul>
                <!-- END: sidebar-widget -->
    Firstly you can't start a list using a "li" tag it must start with the ul.

    Code:
    <p class="uphol">Upcoming Holidays</p>
      <li id="categoryposts-3" class="widget widget_categoryposts">
        <ul>
          <li class="cat-post-item"> <a class="post-title"
    It probably should be:

    Code:
    <p class="uphol">Upcoming Holidays</p>
        <ul id="categoryposts-3" class="widget widget_categoryposts">
             <li class="cat-post-item"> <a class="post-title" ......
    Then you have inserted a skyscaper add in the bottom of the ul in no mans land.

    Code:
                        </ul>
                    </li>
                    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-1205630963811834";
    /* AFK300250 */
    google_ad_slot = "3297487393";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
                    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
                    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-1205630963811834";
    /* AFK300250 */
    google_ad_slot = "3297487393";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
                    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
                </ul>
                <!-- END: sidebar-widget -->
            </div>
    All content in a list must be between the list tags. e.g.<ul> <li> content here </li></ul>


    The code should probably have been:
    Code:
                                <p>Easy Father’s Day card for any age child.  Easy to assemble.</p>
                            </li>
                        </ul>
                    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-1205630963811834";
    /* AFK300250 */
    google_ad_slot = "3297487393";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
                    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
                    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-1205630963811834";
    /* AFK300250 */
    google_ad_slot = "3297487393";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
                    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
                <!-- END: sidebar-widget -->
            </div>

    I changed the code as above in a couple of places and the middle column in IE dropped right back into position. Therefore you must get this back to valid code before you can move on.

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Okay, so my homepage now passes the validator with 1 warning. I fixed all of the <li> problems, many of which were created by the popular posts plugin, but some that were strictly my error.

    I don't have access to my laptop right now and I can't install IETester on this computer, but the IETab in Chrome is showing me that the center content div has not fallen back into place.

    I tried taking the float off of the div and pushing it out from under the floating left sidebar with a left margin, but the center div hasn't budged in my IETab, which makes me think its stuck in an unclosed div or something (which I had a problem with before).

    Any thoughts would be appreciated. And also, when you test fixes for your forum replies, what tools do you use?

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well... You know IE is in quirks mode, right? That comment before the doctype? Unacceptable if you are trying to still support... pretty much ANY IE -- in fact ALL browsers will behave differently than they should thanks to that.

    If your page needs IE conditional comments to target IE8-, a javascript shiv to support IE8-, the use of the "IE specific meta's", and 129k of javascript on a site that doesn't appear to use javascript for anything useful -- well, it's an indication there's something horribly wrong with the code for the page.

    Although this:
    <meta name="generator" content="WordPress 3.0.5" />

    Says 99% of what's probably wrong with the code.

    It's also knee deep in comments that could be triggering IE and FF rendering errors -- the classic "herpaderp" start comments:

    Code:
    <!-- START: header -->
    <div id="header">
    ... no, really? Opening a DIV called header is the start of the header? Followed by the closing comment placement:

    Code:
    </div>
    <div style="clear:both;"></div>
    <!-- END: header -->
    Again, closing the div is the end? No... Much less the reliance on clearing div like it was still 2001... on a page that doesn't need anything fancier than overflow and haslayout to add wrapping behavior. (much less the clearing div being outside #header)

    Following this you have nonsensical heading orders, classes on headings for no good reason, a whole slew of pointless extra wrapping DIV making the layout WAY more complicated than need be, paragraphs around non-paragraph elements, static style inlined in the markup, invalid style embeds (that the validator isn't reporting because they're inside CC's) ...

    Not entirely surprising you're having problems. The markup pretty much needs to be thrown out and started over clean; and that's BEFORE we even talk about applying style/layout to it with CSS. This is another of those sites where I'm seeing four different layout in six different browsers -- I'm ASSUMING what FF is showing me is what you are aiming for -- it's sure as shine-ola NOT what I'm seeing in Opera, Chrome or IE.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jhsizemore View Post

    I don't have access to my laptop right now and I can't install IETester on this computer, but the IETab in Chrome is showing me that the center content div has not fallen back into place.

    The column is now in the center where it should be but it is below the right columns height for two main reasons.

    First the right column is 300px wide but you have content inside that is larger than 300px and stretches the column wide in IE6.

    Here's one example.

    Code:
    li.cat-post-item {
      height: 75px;
      padding-top: 15px;
      width: 292px;
    }
    The list is 292px wide and the parent ul has 5px left and right padding so 292 + 10 = 302 px which is 2 pixels too big. There are other elements in there that are too big also.

    If you throw an overflow:hidden on the parent.
    Code:
    div#sidebar-alt{overflow:hidden}
    That will mask the problem and stop the column from expanding but the proper solution is go through and make sure everything fits properly.

    The second main problem is the 3px jog on static content next to floats. The margin-left you apply to the middle column will be 3px too wide on IE6.

    You need to reduce the margin in IE6.

    Code:
    * html div#content-article{margin-left:172px}
    That's why you really need to leave breathing space in layouts and a 3px discrepancy wouldn't cause the layout to break. In a fixed with layout you should really float all columns anyway and then you avoid the 3px jog altogether.

    I notice that your .pposts header is misplaced in IE6 because you failed to create a stacking context (position:relative) where you could have applied a left position. Without co-ordinates the position of an element is affected in IE6 by the alignment of text and is unreliable.

    You need to add these rules.
    Code:
    #sidebar{position:relative}
    .pposts{left:0}
    I didn't see any comments above the doctype unless you have removed them since Jason (deathshadow) mentioned them above. Jason makes a lot of good points and it's a good job he didn't see it before you fixed all those other errors . The page is much better than it was though but still could do with tidying up and moving all the inline styles out of the code

    Hope that helps

  6. #6
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a ton Paul and Death,

    I went with the stronger fix on the right sidebar with making sure all of the elements fit within the div properly and floating the center div. The layout now works correctly.

    I've begun working on death's suggestions, removing both of my clear: divs and the in-line style (except for the stuff that the slider needs, I'll have to look at the plugin and see if I can't get that stuff into the main stylesheet.)

    I do have one question. In the statement, "(that the validator isn't reporting because they're inside CC's)" what does CC reference?

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Conditional Comments -- basically the (what should be completely unneccessary) <!--[if lte IE 7]> parts of the code.

    I'm one of the rare programmers who thinks that using IE CC's for CSS is pointless, and usually an indicator there's something wrong with the layout itself that should be fixed INSTEAD of sending IE something different -- that or use a simple 'safe hack' like haslayout...

    I mean, if I was writing a page like that the markup would probably end up something like:

    Code:
    <!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"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="generator"
    	content="WordPress 3.0.5"
    />
    
    <meta
    	name="description"
    	content="Children's Crafts and Activities"
    />
    
    <meta
    	name="keywords"
    	content="color,wheel,primary,secondary,classroom,crafts,foam,bug,ocean,bottle"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <link
    	rel="alternate"
    	type="application/rss+xml"
    	title="wordpress RSS Feed"
    	href="/WordPress/feed"
    />
    
    <link
    	href="/WordPress/favicon.ico"
    	rel="shortcut icon"
    />
    
    <title>
    	Activities For Kids
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Activities <small>for</small> Kids
    		<span></span>
    	</h1>
    
    	<form id="searchForm" method="get" action="/WordPress/>
    		<fieldset>
    			<label for="searchText">Find the Perfect Activity:</label>
    			<input id="searchText" type="text" value="" name="s" />
    			<input class="submit"" type="submit" value="Search" />
    		</fieldset>
    	</form>
    
    	<ul id="mainMenu">
    		<li><a href="/WordPress">Home</a></li>
    		<li><a href="/WordPress/about">About</a></li>
    		<li><a href="/WordPress/parties">Parties</a></li>
    		<li><a href="/WordPress/holidays">Holidays</a></li>
    		<li><a href="/WordPress/recipes">Recipes</a></li>
    		<li><a href="/WordPress/crafts">Crafts</a></li>
    		<li><a href="/WordPress/printables">Printables</a></li>
    		<li><a href="/WordPress/educational">Educational</a></li>
    		<li><a href="/WordPress/site-map">Site Map</a></li>
    	</ul>
    
    	<div class="columnWrapper">
    	
    		<!-- double wrapper for content first, simple, effective -->
    
    		<div id="contentWrapper"><div id="content">
    
    			<h2>Recent Posts</h2>
    
    			<div class="post" id="post-1007">
    				<img
    					src="/WordPress/wp-content/uploads/2011/05/color-wheel-square.jpg"
    					width="110" height="110"
    					alt="Color Wheel"
    					class="leadingPlate"
    				/>
    				<h3>
    					<span>May 7th <span>-</span></span>
    					<a href="/WordPress/color-wheel-activities">Color Wheel Activities</a>
    				</h3>
    				<p>
    					Two easy color wheel projects to help children learn about primary and secondary colors.
    				</p>
    				<a class="readMore" href="/WordPress/color-wheel-activities"> Read More &gt;&gt;</a>
    			<!-- .post --></div>
    
    			<div class="post" id="post-1005">
    				<h3>
    					<span>May 7th <span>-</span></span>
    					<a href="/WordPress/ocean-in-a-bottle">Ocean in a Bottle</a>
    				</h3>
     				<p>
     					With a plastic bottle, you can create your own ocean scene.  A pet wave to keep at home.  Add items to create an ocean replica.
     				</p>
    				<a class="readMore" href="/WordPress/ocean-in-a-bottle"> Read More &gt;&gt;</a>
    			<!-- .post --></div>
    			
    
    			<div class="post" id="post-1002">
    				<img
    					src="/WordPress/wp-content/uploads/2011/05/bug-catcher-square.jpg"
    					width="110" height="110"
    					alt="Bug Catcher"
    					class="leadingPlate"
    				/>
    				<h3>
    					<span>May 6th <span>-</span></span>
    					<a href="/WordPress/bug-catcher">Bug Catcher</a>
    				</h3>
    				<p>
    					Easy to assemble, inexpensive bug catcher perfect group activity.
    				</p>
    				<a class="readMore" href="/WordPress/bug-catcher"> Read More &gt;&gt;</a>
    			<!-- .post --></div>
    
    			<div class="post" id="post-799">
    				<img
    					width="110" height="110"
    					src="/WordPress/wp-content/uploads/2011/04/flower-bookmark-square.jpg"
    					alt="Flower Bookmark"
    					class="leadingPlate"
    				/>
    				<h3>
    					<span>April 28th <span>-</span></span>
    					<a href="/WordPress/fun-foam-flower-bookmark">Fun Foam Flower Bookmark</a>
    				</h3>
    				<p>
    					Easy to assemble, great classroom project for Mother’s Day.  Inexpensive project for scouting groups or Flower themed birthday parties.
    				</p>
    				<a class="readMore" href="/WordPress/fun-foam-flower-bookmark"> Read More &gt;&gt;</a>
    			<!-- .post --></div>
    			
    			<div class="post" id="post-786">
    				<img
    					width="110" height="110"
    					src="/WordPress/wp-content/uploads/2011/04/star-bookmark-square.jpg"
    					alt="Star Bookmark"
    					class="leadingPlate"
    				/>
    				<h3>
    					<span>April 27th <span>-</span></span>
    					<a href="/WordPress/star-bookmark">Star Bookmark</a>
    				</h3>
    				<p>
    					Star bookmark can be created in different colors for different themes.  Red, White and Blue for the Fourth of July; Black and gold for a Harry Potter themed birthday party.
    				</p>
    				<a class="readMore" href="/WordPress/star-bookmark"> Read More &gt;&gt;</a>
    			<!-- .post --></div>
    			
    			<div class="olderNav"><a href="/WordPress/page/2" >&laquo; Older Entries</a></div>
    			<div class="newerNav"></div>
    			
    		<!-- #content, #contentWRapper --></div></div>			
    		
    		<div id="firstSidebar">
    
    			<div class="popularPosts">
    				<h2>Popular Posts</h2>
    				<ul>
    					<li><a href="/WordPress/color-wheel-activities">Color Wheel Activities</a></li>
    					<li><a href="/WordPress/3-ingredient-peanut-butter-cookies">3 Ingredient Peanut Butter Cookies</a></li>
    					<li><a href="/WordPress/holidays">Holidays</a></li>
    					<li><a href="/WordPress/fathers-day-card">Father's Day Card</a></li>
    					<li><a href="/WordPress/no-bake-peanut-butter-cookie-treats">No-Bake Peanut Butter Cookie Treats</a></li>
    					<li><a href="/WordPress/post-template-1-mod-2">Post Template #1 mod 2.</a></li>
    					<li><a href="/WordPress/irish-soda-bread">Irish Soda Bread</a></li>
    					<li><a href="/WordPress/wall-ball">Wall Ball</a></li>
    					<li><a href="/WordPress/nature-frame">Nature Frame</a></li>
    					<li><a href="/WordPress/fun-foam-flower-bookmark">Fun Foam Flower Bookmark</a></li>
    				</ul>
    			<!-- .contentBox --></div>
    
    			<div class="advert160">
    				<script type="text/javascript"><!--
    				google_ad_client = "ca-pub-1205630963811834";
    				/* AFK-home */
    				google_ad_slot = "7814922637";
    				google_ad_width = 160;
    				google_ad_height = 600;
    				//-->
    				</script>
    				<script type="text/javascript"
    				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    				</script>
    			<!-- .advert160 --></div>
    
    		<!-- #firstSideBar --></div>
    
    		<div id="secondSideBar">
    
    			<div class="upcomingHolidays">
    				<h2>Upcoming Holidays</h2>
    				<ul>
    					<li>
    						<a href="/WordPress/fun-foam-flower-bookmark">
    							<img
    								src="/WordPress/wp-content/uploads/2011/05/color-wheel-square-60x60.jpg"
    								width="60" height="60"
    								alt="Color Wheel"
    								class="leadingPlate"
    							/>
    						</a>
    						<h3>
    							<a href="/WordPress/color-wheel-activities">Color Wheel Activities</a>
    						</h3>
    						<p>
    							Two easy color wheel projects to help children learn about primary and secondary colors.
    						</p>
    					</li><li>
    							<a href="/WordPress/fun-foam-flower-bookmark">
    								<img
    									src="/WordPress/wp-content/uploads/2011/04/flower-bookmark-square-60x60.jpg"
    									width="60" height="60"
    									alt="Flower Bookmark"
    									class="leadingPlate"
    								/>
    						</a>
    						<h3>
    							<a href="/WordPress/fun-foam-flower-bookmark">Fun Foam Flower Bookmark</a>
    						</h3>
    						<p>
    							Easy to assemble, great classroom project for Mother’s Day.  Inexpensive project for scouting groups or Flower themed birthday parties.
    						</p>
    					</li><li>
    						<a href="/WordPress/fathers-day-card">
    							<img
    								width="60" height="48"
    								src="/WordPress/wp-content/uploads/2011/02/fathers-day-card.jpg"
    								alt="Father's Day Card"
    								title="fathers-day-card"
    							/>
    						</a>
    						<h3>
     							<a href="/WordPress/fathers-day-card">Father's Day Card</a>
     						</h3>
    						<p>
    							Easy Father’s Day card for any age child.  Easy to assemble.
    						</p>
    					</li>
    				</ul>
    			<!-- .upcomingHolidays --></div>
    
    			<div class="advert300">
    
    					<script type="text/javascript"><!--
    					google_ad_client = "ca-pub-1205630963811834";
    					/* AFK300250 */
    					google_ad_slot = "3297487393";
    					google_ad_width = 300;
    					google_ad_height = 250;
    					//-->
    					</script>
    					<script type="text/javascript"
    					src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    					</script>
    
    					<script type="text/javascript"><!--
    					google_ad_client = "ca-pub-1205630963811834";
    					/* AFK300250 */
    					google_ad_slot = "3297487393";
    					google_ad_width = 300;
    					google_ad_height = 250;
    					//-->
    					</script>
    					<script type="text/javascript"
    					src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    					</script>
    
    			<!-- .advert300 --></div>
    
    		<!-- #secondSideBar --></div>
    		
    	<!-- #columnWrapper --></div>
    	
    	<div id="footer"
    		&copy; Copyright 1998, 2011 Activities for Kids, all rights reserved &mdash;
    		<a href="/site-map">Sitemap</a> &mdash;
    		<a href="/about">About AFK</a> &mdash;
    		Subscribe to <a href="/WordPress/feed" title="Articles (RSS)">Articles (RSS)</a>
    		or the <a href="/WordPress/comments/feed" title="Comments (RSS)">Comments (RSS)</a>
    	<!-- #footer --></div>
    	
    <!-- #pageWrapper --></div>	
    
    </body></html>
    Swinging a giant axe at ALL the javascript, all the unneccesary attributes... Everything else in that code either belongs in the CSS, or shouldn't be there in the first place.

    Of course, the trick is getting that steaming pile of manure known as wordpress to actually output that.

  8. #8
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey death,

    I compared your code to mine side by side in Notepad++ and I have some questions after going through everything up to the navbar.

    I see you replaced the header image with

    HTML Code:
    <h1>
    		Activities <small>for</small> Kids
    		<span></span>
    </h1>
    Is the idea here that I would be able to style actual text to look like my current header image? Will these selectors be enough to mimic what I have? Specifically it looks like I wouldn't be able to select each letter in "Kids" without some atrocious markup. Also, I'm unsure of what the empty span tags are for.

    Secondly, I found this post that says I should be able to select the label within the search form for styling, but in firebug that element is grayed out, meaning FB think's it's unselectable, and my CSS is not taking hold. Any thoughts on what's going wrong in my particular situation?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jhsizemore View Post
    Hey death,

    I compared your code to mine side by side in Notepad++ and I have some questions after going through everything up to the navbar.

    I see you replaced the header image with

    HTML Code:
    <h1>
            Activities <small>for</small> Kids
            <span></span>
    </h1>
    Is the idea here that I would be able to style actual text to look like my current header image?
    No the span is to hold the background image logo and the text is for screen readers, seo and accessibility. The span is placed over the top of the browser text to hide and satisfy all requirements of images on/off and css on/off. It's called a Gilder/levin image replacement although a lot of us were doing this before they put a name to it.


    Secondly, I found this post that says I should be able to select the label within the search form for styling, but in firebug that element is grayed out, meaning FB think's it's unselectable, and my CSS is not taking hold. Any thoughts on what's going wrong in my particular situation?
    You have a missing closing quote from the opening form tag which is breaking the label.

    Code:
        <form id="searchForm" method="get" action="/WordPress/>
    It should be

    Code:
        <form id="searchForm" method="get" action="/WordPress/">

  10. #10
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When death originally commented on my nonsensical header sequence (on my first post a while back) I searched around and came across this blog post on sitepoint: Heading Headaches: Balancing Semantics and SEO SitePoint

    They say that SEO dictates that you should have one h1 on your page and that it should be unique and descriptive for that page. If I put the h1 for the background text on the header it'll mean that either I have two h1s or the h1 will contain just the name of the website on every page, then that would seem to run counter to that post's advice. How should I reconcile these two approaches?

    One solution would be to use
    Code:
     <?php echo get_the_title(ID) ?>
    in the h1 hidden behind the picture. But I read in Google SEO documentation somewhere that they don't like hidden words on the page and they might tank your rankings for it.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jhsizemore View Post
    When death originally commented on my nonsensical header sequence (on my first post a while back) I searched around and came across this blog post on sitepoint: Heading Headaches: Balancing Semantics and SEO SitePoint

    They say that SEO dictates that you should have one h1 on your page and that it should be unique and descriptive for that page. If I put the h1 for the background text on the header it'll mean that either I have two h1s or the h1 will contain just the name of the website on every page, then that would seem to run counter to that post's advice. How should I reconcile these two approaches?
    It's always been debated whether the site name should be the h1 or whether the main introductory text should be the h1. Some of my clients insist that the site name is the h1 on the home page but on inner pages the main topic is the h1 instead and the site name/logo is just a p element.

    However, there's no point in having an h1 that just says <h1>Welcome</h1> as that is plainly nonsense. If the h1 said welcome to "Acme Tools Ltd" then 9 times out of ten the logo already says something like that anyway.

    If you use the h1 for the logo/tagline then you should h2 as the next main heading and not another h1.


    But I read in Google SEO documentation somewhere that they don't like hidden words on the page and they might tank your rankings for it.
    This is where a little knowledge is a dangerous thing and you code for your visitors first not search engines (even google says don't do anything specifically for search engines). The gilder/levin technique is an accessibility aid as it gives good text content to screen readers and you will not get penalised when you use elements correctly.

    You will get penalised if you stuff many keywords into hidden elements like there's no tomorrow but you will not get penalised for normal coding and off-screen positioning where the design calls for it.

    Code for your visitors first with clean semantic code and interesting and well constructed content and you won't need to worry about search engines. It's your visitors that are the most important.


Tags for this Thread

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
  •