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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Why is my CSS screwed up on IE and fine on google

    Hello my name is Chris. I have been working on our cities Little League site and decided to try out CSS and now i'm frustrated beyond belief. I try to make it look good in IE chrome goes bad make it look good in chrome IE goes bad please help. Here is my style and index, Please someone help me on this

    http://www.slaterlittleleague.com

    style
    Code:
    * { padding: 0; margin: 0; }
    
    body {
        font-size: 15px;
        color: #FFFFFF;
    
    }
    #wrapper { 
    
     width: 900px;
      
    }
    #header {
     color: #333;
     width: 880px;
     float: left;
     padding: 10px;
     height: 135px;
     margin: 0px 0px 0px 0px;
     background-image:url(images/header.gif)
    }
    
    #navigation {
     float: left;
     width: 900px;
     height: 24px;
     color: #333;
     padding: 0px;
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
     background-color:#F3F2ED;
    }
    #leftcolumn { 
     color: #333;
     border: 1px solid #ccc;
     background: #740D0D;
     margin: 0px 0px 0px 0px;
     padding: 10px;
     height: 625px;
     width: 145px;
     float: left;
    }
    #content { 
     float: left;
     color: #333;
     border: 1px solid #ccc;
     background:#000000;
     margin: 0px 0px 0px 0px;
     padding: 1px;
     height: 640px;
     width: 560px;
     display: inline;
    }
    #rightcolumn { 
     color: #333;
     border: 1px solid #ccc;
     background: #740D0D;
     margin: 0px 0px 0px 0px;
     padding: 10px;
     height: 625px;
     width: 145px;
     float: left;
    }
    #footer { 
     width: 896px;
     height: 100px;
     clear: both;
     color: #333;
     border: 1px solid #ccc;
     background-color: #740D0D;
     margin: 0px 0px 0px 0px;
     padding: 0px;
     float: left;
    }
    .clearit {
    	margin: 0;
    	padding: 0;
    	height: 0;
    	clear: both;
    }
    
    /* BUBBLE PLASTIC HORIZONTAL MENU */
    
    .bubplastic.horizontal {
    	width: 100%;
    	height: 27px;
    	margin: 0;
    	padding: 0;
    	background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
    }
    .bubplastic.horizontal ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    .bubplastic.horizontal ul li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
    }
    
    .bubplastic.horizontal ul li a {
    	display: block;
    	height: 27px;
    	padding-left: 24.5px;
    	float: left;
    	text-transform: uppercase;
    	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
    	font-size: 70%;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    
    .bubplastic.horizontal ul li a span.menu_ar {
    	display: block;
    	float:  left;
    	height: 22px;
    	padding-top: 5px;
    	padding-right: 48.5px;
    	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
    	cursor: pointer;
    }
    /* END BUBBLE PLASTIC HORIZONTAL MENU */
    
    
    
    /* RED HOVER */
    .bubplastic.red ul li a:hover,
    .bubplastic.red ul li.highlight a {
    	background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat;
    }
    .bubplastic.red ul li a:hover span.menu_ar,
    .bubplastic.red ul li.highlight a span.menu_ar {
    	background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat;
    }
    
    
    .font {
     font-size: 15px;
     color: #FFFFFF;
     
     }
    Now here is my index.html

    Code:
    <head>
    <title>Slater Little League</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <style type="text/css">
    body {
    	background-color: #000;
    }
    a:link {
    	color: #FFF;
    	text-decoration: none;
    	base-target "content";
    }
    a:visited {
    	text-decoration: none;
    	color: #FFF;
    }
    a:hover {
    	text-decoration: none;
    	color: #FFF;
    }
    a:active {
    	text-decoration: none;
    	color: #FFF;
    }
    </style>
    </head>
    <body>
    
    <center><div id="wrapper">
      <!-- Begin Header -->
      <div id="header"></div>
      <!-- End Header -->
      <!-- Begin Navigation -->
      <div id="navigation">
      <div class="menu bubplastic horizontal red">
    	<ul>
    		<li class="highlight"><span class="menu_r"><a href="news.php" target="content"><span class="menu_ar">Home</span></a></span></li>
    		<li><span class="menu_r"><a href="fieldsch/index.php" target="content"><span class="menu_ar">Game Schedule</span></a></span></li>
    		<li><span class="menu_r"><a href="policy.htm" target="content"><span class="menu_ar">Policies</span></a></span></li>
    		<li><span class="menu_r"><a href="forms" target="content"><span class="menu_ar">SLLB Forms</span></a></span></li>
    		<li><span class="menu_r"><a href="board.htm" target="content"><span class="menu_ar">Board Members</span></a></span></li>
            <li><span class="menu_r"><a href="weather.htm" target="content"><span class="menu_ar">Weather</span></a></span></li>
            <li><span class="menu_r"><a href="private" target="content"><span class="menu_ar">Login</span></a></span></li>
    	</ul>
    	
    </div>
      </div>
      <!-- End Navigation -->
      <!-- Begin Left Column -->
      <div id="leftcolumn">
        <p>
        <img src="images/menu.png" />
        </p>
        <p>&nbsp;</p>
        <p class="font"><a href="about.htm" target="content">About SLLB</a></p>
        <p class="font">&nbsp;</p>
       
        <p>
        <p class="font"><a href="reg.htm" target="content">Registration</a></p>
        <p class="font">&nbsp;</p>
        <p>
        <p class="font"><a href="coaches.htm" target="content">Coaches Guidelines</a></p>
        <p class="font">&nbsp;</p>
        </p>
            <p>
        <p class="font"><a href="injury.htm" target="content">Injury & Concussion Policy</a></p>
        <p class="font">&nbsp;</p>
        </p>
            <p>
        <p class="font"><a href="majors.htm" target="content">Majors Division</a></p>
        <p class="font">&nbsp;</p>
        </p>
            <p>
        <p class="font"><a href="minors.htm" target="content">Minors Division</a></p>
        <p class="font">&nbsp;</p>
        </p>
                <p>
        <p class="font"><a href="peewee.htm" target="content">Pee Wee Division</a></p>
        <p class="font">&nbsp;</p>
        </p>
                <p>
        <p class="font"><a href="teeball.htm" target="content">Tee Ball Division</a></p>
        <p class="font">&nbsp;</p>
        </p>
        <p>
        <p class="font"><a href="umpires.htm" target="content">Slater Umpires</a></p>
        <p class="font">&nbsp;</p>
         <p class="font"><a href="http://slaterlittleleague.com/mail/?p=subscribe&id=4" target="content">SLLB Newsletter</a></p>
        </p>
        </div>
        <!-- End Left Column -->
      <!-- Begin Content Column --> 
      <div id="content">
      <p><iframe src="news.php" WIDTH="560" height="640" BORDER="0" name="content" frameborder="0"></iframe></p>
      </div>
      <!-- End Content Column -->
      <!-- Begin Right Column -->
      <div id="rightcolumn">
        <p><img src="images/league.png" /></p>
        <p>&nbsp;</p>
        <p class="font"><a href="http://www.littleleague.org" target="blank">LittleLeague.org</a></p>
        <p>&nbsp;</p>
        <p class="font"><a href="policy.htm" target="content">CILL Policies</a></p>
        <p class="font">&nbsp;</p>
        <p class="font"><a href="swp.htm" target="content">CILL Weather Policy</a></p>
        <p class="font">&nbsp;</p>
        <p class="font"><a href="chat" target="_self">SLLB Chatroom</a></p>
        <p class="font">&nbsp;</p>
        <p class="font"><a href="" target="_self">SLLB Store</a></p>
        <p class="font">&nbsp;</p>
        <p class="font"><a href="contactform.htm" target="content">Contact The Board</a></p>
        <p class="font">&nbsp;</p>
        <p class="font"><a href="email.html" target="_blank">Email Login</a></p>
      </div>
        <p><!-- End Right Column -->
          <!-- Begin Footer -->
        </p>
        <div id="footer">
          <center><p class="font">&copy; 2012 Slater Little League. All right Reserved.  </p></center>
    </div>
      <BR>
      <!-- End Footer -->
    </div></center>
    <!-- End Wrapper -->
    
    </body>
    </html>
    Please help

    Thanks
    Chris
    Slater Little League
    Last edited by slaterllb; 05-12-2012 at 03:08 PM.

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    um I should of searched a little further in the forums I found what i needed ti fixs my own code.

    Simply added
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    thanks

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your page looks OK in IE8, Chrome and FF12.
    What version of IE are you testing with?

    You have a few errors in your html - see here. Nothing too serious in there, you have some extra closing </p> tags that are worth sorting out.

  • Users who have thanked SB65 for this post:

    slaterllb (05-15-2012)

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I found the solution after I posted I am use IE 8 and Chrome


  •  

    Posting Permissions

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