Firefox & Safari Great, IE pushes div and creates random line

apptoychest · 01-01-2011, 10:58 PM

I have 2 issues that I have been bumping up against, and have spent hours making small CSS changes, FTPing the file and hitting refresh in hopes that it will fix the error in IE. So now I need to ask for expert help because I can't figure this out (I always get awesome help here, but I wanted to put in a good effort first!)

Here is the URL:

http://www.kidseducationalapps.com/

The H1 Class "title" and Div ID "logo" are both pushed to the left in IE6 and oddly, IE8 running in compatibility mode. This happened at the same time as I put a custom twitter update box in the upper right of the page. Both firefox and safari allowed this box to be there without damaging the main title and logo. IE apparently just pushes both to the left.

And then lastly, the twitter update box has an odd dotted "border-bottom." This only shows up in IE. I found the CSS in the following lines of code:

.twtr-widget .twtr-tweet {
border-bottom: 1px dotted #DDDDDD;
overflow: hidden;

I tried to set the border bottom to "none" with !important, but IE still renders the line?? To be clear, the line doesn't show up in FF or Safari with the code as-is.

So there you have it, IE is pushing around the main logo of the site and adding a random line underneath the Twitter update box.

Any help you can provide is greatly appreciated. I love this forum and I always get simple, elegant solutions. So thanks in advance for any advice you may provide.

apptoychest · 01-02-2011, 12:37 AM

I assume this issue is isolated to CSS only...

Excavator · 01-02-2011, 02:04 AM

Hello apptoychest,
Your h1, #logo (which should really be an h2 instead of a div) and twitter all need widths.
A float has to have a width to work properly.

You also pad #container down and then use negative margins to pull everything back up after that. I'm not a big fan of negative margins, they have their place but not often.

Have a look at this slightly different approach -

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #FC6;
	font: 100% ChunkFiveRegular, Arial, sans-serif;
	color: #000;
}
#container {
	width: 1008px;
	margin: 0 auto;
	background: #fff;
	overflow: auto;
}
#navcontainer {
	height: 48px;
	width: 400px;
	margin: 40px auto 0;
	background: #333;
	text-align: center;
}
#header {
	height: 400px;
	background: #fff url(http://www.kidseducationalapps.com/wp-content/themes/paperplane/images/bg-header.png);
}
	#counter {
		width: 175px;
		float: right;
		margin: 5px 50px 0 0;
		display: block;
		color: #333333;
		font: italic 13px Georgia, "Times New Roman", Times, serif;
	}
	#title { 
		width: 400px;
		float: left;
		margin: 20px 0 0 300px;
		font-size: 1.75em;  
		text-align: center; 
	}
	#logo {
		width: 400px;
		float: left;
		clear: left;
		margin: 0 0 0 300px;
		font-size: 1em;
		text-align: center;
	}
	#logo a {
		text-decoration: none;
	}
	#specialupdate {
		width: 400px;
		margin: 10px 0 0 300px;
		float: left;
		clear: left;
		text-align: center;
		text-decoration: none;
		font: normal 15px 'ChunkFiveRegular', Arial, sans-serif;
	}
		#specialupdate:hover, 
		#specialupdate:active {text-decoration: underline;}
/* ****************** Twitter Box ******************** */
.twitter {
	width: 250px;
	float: right;
	clear: right;
	margin: 20px 20px 0 0;
}
.twtr-hd {display: none !important;}
.twtr-ft {display: none !important;}    
.twtr-hyperlink {background-color:transparent}
#site {
	height: 600px; /*for demo only*/
	border: 1px solid #f00; /*for demo only*/
	width: 1008px;
	margin: -160px 0 0 0;
	padding: 0 24px;
}
</style>
</head>
<body>
        	<div id="navcontainer">nav goes here</div>
    <div id="container">
        <div id="header">	
        	<div id="counter"><a href="http://twitter.com/Kids_apps">We have &nbsp;91&nbsp; fans on Twitter!</a></div>
                    <div class="twitter">
                         <script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
                                    <script type="text/javascript">
                                    new TWTR.Widget({
                                      version: 2,
                                      type: 'profile',
                                      rpp: 1,
                                      interval: 6000,
                                      width: 250,
                                      height: 330,
                                      theme: {
                                        shell: {
                                          background: 'transparent',
                                          color: '#ffffff'
                                        },
                                        tweets: {
                                          background: '#transparent',
                                          color: '#000000',
                                          links: '#d56652'
                                        }
                                      },
                                      features: {
                                        scrollbar: false,
                                        loop: false,
                                        live: false,
                                        hashtags: true,
                                        timestamp: true,
                                        avatars: false,
                                        behavior: 'all'
                                      }
                                    }).render().setUser('Kids_apps').start();
                                    </script>	  
                    <!--end .twitter--></div>
                <h1 id="title">Kid's Educational Apps</h1>
                <h2 id="logo"><a href="http://www.kidseducationalapps.com/">Apps, Mobile Games and Educational Fun</a></h2> 
			<a href="http://www.kidseducationalapps.com/category/featured-review/" id="specialupdate">Click Here to See Our Top Rated Apps for Kids</a>
        <!--end header--></div>
        <div id="site">
        	website stuff goes here
        <!--end site--></div>
    <!--end container--></div>
</body>
</html>

apptoychest · 01-02-2011, 02:39 PM

Excavator to the rescue!

Quote:

Your h1, #logo (which should really be an h2 instead of a div) and twitter all need widths.

Great advice.

Assigning a width to just the header class already fixed my alignment issue in IE. I will continue to test adding widths to other elements, but I am very happy with this solution so far.

I looked at the CSS suggestion and it appears you left the twitter box CSS unchanged, do you have any suggestion as to why that gray dotted border appears in Internet Explorer but not the other browsers?

apptoychest · 01-02-2011, 02:43 PM

Interesting, found an exact thread regarding this issue with the Twitter border:

http://wordpress.org/support/topic/t...-stupid-border

Found the override:
.twtr-widget .twtr-tweet {border:none!important;}

Case closed!

Chris Hick · 01-02-2011, 03:16 PM

Apptoychest, don't forget to go back and placed this as solved! Just edit your first post, then put the solved pre-fix.

Also, don't forget to thank Excavator by pressing the thank you button.

Excavator · 01-02-2011, 09:48 PM

Quote:

Originally Posted by apptoychest

but I am very happy with this solution so far.

I looked at the CSS suggestion and it appears you left the twitter box CSS unchanged, do you have any suggestion as to why that gray dotted border appears in Internet Explorer but not the other browsers?

Oops, sorry about that. I must have gotten distracted.
I see you've solved it though so good on you!