Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I assume this issue is isolated to CSS only...

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator to the rescue!

    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?

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by apptoychest View Post
    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!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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