Would someone mind helping me get Stupid IE to align my h2's in sidebars to the left? They work fine in Firefox. Here's the lnk. #sidebarl h2, #sidebarr h2 { color: #b22222; font-size: 15px; font-family: Georgia, Helvetica Bold, Arial Bold, Verdana, Sans-Serif;; list-style: none; padding: 25px 0px 10px 0px; margin: 0px; border-bottom: 1px solid #ffdead; } The problem may be somewhere else in the css, I don't know. If I need to post the entire style sheet, please let me know. Oh, I tried text-align already. Thanks in advance.
I'd validate the html and the css first. Send them to an HTML validator and a CSS one. It'll catch all those little things like "minimum-height" (it's min-height I believe), and hr { border: 0px; height: 1px solid #b22222; } Code (markup): hr is a line, lines don't have borders. instead, give a border to the edge of a div or other element. Browsers dunno what to do with the above code. Second, get rid of the space between the top of your htmlpage and the !DOCTYPE. That's known to fux0r with IE. Lastly, I looked at the site with my crappy fake IE for linux, and the only h2 I saw was the title (which is an image anyway) so it seemed the same in IE6. The middle content with the table etc seems to be pushed down below the two sidebars... are those floated? FF sits it in the middle fine. If the sides are floated, IE may be adding extra margins-- but before anyone goes hacking, do the first two things I said : ) If you have any questions on what the validators pick up, just ask : )
Thanks for the advice. I removed the space above doctype. The hr thing I'm not actually using. It seems all my text widgets (it's a wordpress blog) are getting errors. It seems some are not using <ul> and some putting <li> before <ul>. I'm using a wordpress template which is supposed to be widget ready. Here's what the source looks like: <div id="sidebarl"> <!--sidebar.php--> <li id="text-2" class="widget widget_text"> <div class="textwidget"><script type="text/javascript"><!-- google_ad_client = ""; google_ad_width = 120; google_ad_height = 240; google_ad_format = "120x240_as"; google_ad_type = "text_image"; //2007-08-12: tlhdtv google_ad_channel = ""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "000080"; google_color_text = "000000"; google_color_url = "000080"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </li> <li id="categories" class="widget widget_categories"><h2 class="widgettitle">Categories</h2> <ul> <li><a href="http://schoolofhdtv.com/category/hitachi" title="View all posts filed under Hitachi">Hitachi</a> </li> <li><a href="http://schoolofhdtv.com/category/learn-hdtv" title="View all posts filed under Learn HDTV">Learn HDTV</a> </li> <li><a href="http://schoolofhdtv.com/category/panasonic" title="View all posts filed under Panasonic">Panasonic</a> </li> <li><a href="http://schoolofhdtv.com/category/recent-news" title="View all posts filed under Recent News">Recent News</a> </li> <li><a href="http://schoolofhdtv.com/category/samsung" title="View all posts filed under Samsung">Samsung</a> </li> <li><a href="http://schoolofhdtv.com/category/toshiba" title="View all posts filed under Toshiba">Toshiba</a> </li> <li><a href="http://schoolofhdtv.com/category/vizio" title="View all posts filed under Vizio">Vizio</a> </li> </ul> </li> Know how I can fix this?
Seriously, the left side is pretty muched lined up; you main problem is much much bigger: http://i34.photobucket.com/albums/d136/schroedingerscat/downloeadthenet.png I dunno what you're using to put that sidebar there, but here's how I would write it: <div id="sidebarl"> Move the Js stuff off-site. <h2>Categories</h2> <ul> <li><a href="http://schoolofhdtv.com/category/hitachi" title="View all posts filed under Hitachi">Hitachi</a></li> <li><a href="http://schoolofhdtv.com/category/learn-hdtv" title="View all posts filed under Learn HDTV">Learn HDTV</a></li> <li><a href="http://schoolofhdtv.com/category/panasonic" title="View all posts filed under Panasonic">Panasonic</a></li> <li><a href="http://schoolofhdtv.com/category/recent-news" title="View all posts filed under Recent News">Recent News</a></li> <li><a href="http://schoolofhdtv.com/category/samsung" title="View all posts filed under Samsung">Samsung</a></li> <li><a href="http://schoolofhdtv.com/category/toshiba" title="View all posts filed under Toshiba">Toshiba</a></li> <li><a href="http://schoolofhdtv.com/category/vizio" title="View all posts filed under Vizio">Vizio</a></li> </ul> </div> Code (markup): In css give the whole sidebar a left-padding of like 5px and then make sure you've already removed any margins or padding the various browsers may add by using the * {margin:0; padding: 0;} at the top of the css page. But seriously, working with this kind of code is monstrous. You'd really be better off writing it from scratch. Templates are not meant to be changed and they're not always well-written. Whether your h2 lines up or not is ultimately set by the css, even though your html wasn't very good (you're right, wrapping a <ul> in an <li> was bad). Setting the css for this page will not be easy. But I hope I've set you on the right track. The h2s do look center-aligned, but you said you already tried that. My stomache's killing me from sitting. Going for a walk. Good luck!
Here is some of the code. <!--recent posts--> <h2>Recent Posts</h2> <ul> <?php get_archives('postbypost', 10); ?> </ul> <h2>Archives</h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> It looks like it should work fine to me, but I'll keep working on it. Thanks for the help.
Given IE still has the majority share of browsers I am not sure you can really call it "stupid" - if you want to maximise browser compatibility surely you would design for IE first and FF/ Opera/ Safari etc secondary?
Is that supposed to help in some way? I know the site needs to work in IE. That doesn't mean IE isn't a pain in the butt to design for. Maybe you work for Microsux.