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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts

    IE 7 Problems wit CSS

    Well, for my site I just added drop down menus with transparency I may add, which I am so excited about. http://elementalstudios.freehostia.com/

    But if you view that site in IE 7 the nav is messed up, like the spacing is too much between teams and the rest of the nav.

    CSS Code
    Code:
    @charset "utf-8";
    /* Elemental Studios */
    
    body {
    background-repeat: no-repeat;
    }
    -->
    body {
    text-align:center;
    background:#000000;
    margin:auto;
    padding:0;
    color:#FFFFFF;
    font-family:Tahoma, Verdana, sans-serif, Arial;
    font-size:11px;
    text-decoration:none;
    }
    
    #content {
    width:770px;
    margin:auto;
    }
    
    /* Header */
    
    .gapless {
    background:url(images/Banner.png);
    width:770px;
    height:178px;
    margin: 0 auto;
    }
    
    .left {
    background:url(images/Left-Neon-Light.png);
    width:121px;
    height:592px;
    background-repeat:no-repeat;
    margin-left:0px;
    float:left;
    }
    
    .right {
    background:url(images/Right-Neon-Light.png);
    width:117px;
    height:592px;
    margin-right:0px;
    float:right;
    }
    
    /* Nav Start */
    
    .leftpipe{
    background:url(images/Left-Pipe.png);
    width:50px;
    height:36px;
    margin: 0 auto;
    float:left;
    }
    
    .home {
    background:url(images/Home.png);
    width:70px;
    height:36px;
    margin: 0 auto;
    float:left;
    text-indent:-9999em; /*hide text for normal browsers*/
    }
    
    .team {
    background:url(images/Teams.png);
    width:56px;
    height:36px;
    margin: 0 auto;
    float:left;
    text-indent:-9999em; /*hide text for normal browsers*/
    }
    /* Begin Drop Down Menu */
    #teamsdd
    {   margin: auto;
        padding: 0}
    
    #teamsdd li
    {   margin: auto;
        padding: 0;
        list-style: none;
        float: left;
        font: bold 11px arial}
    
    #teamsdd li a.menu
    {   display:block;
        text-align: center;
        background:url(images/Teams.png);
        margin:auto;
        color: #FFF;
        width: 56px;
    	height: 36px;
        text-decoration: none}
    
    #teamsdd li a.menu:hover
    {   background:url(images/Teams.png);
    }
    
    .submenu
    {   background: #1e1b1b;
        border: 1px solid #920101;
        visibility:hidden;
        position: absolute;
        z-index: 3;
    	filter:alpha(opacity=75);
    	-moz-opacity:.75;
    	opacity:.75;
    	}
    
        .submenu a
        {   display: block;
            font: 11px arial;
            text-align: left;
            text-decoration: none;
    		padding:3px;
            color: #ffffff}
    
        .submenu a:hover
        {   background: #1e1b1b;
            color: #FFF}
    
    /* End Drop Down Menu */
    .video {
    background:url(images/Videos.png);
    width:56px;
    height:36px;
    margin: 0 auto;
    float:left;
    text-indent:-9999em; /*hide text for normal browsers*/
    }
    
    .graphic {
    background:url(images/Graphics.png);
    width:76px;
    height:36px;
    margin: 0 auto;
    float:left;
    text-indent:-9999em; /*hide text for normal browsers*/
    }
    
    .forum {
    background:url(images/Forum.png);
    width:57px;
    height:36px;
    margin: 0 auto;
    float:left;
    text-indent:-9999em; /*hide text for normal browsers*/
    }
    
    .contact {
    background:url(images/Contact-Us.png);
    width:113px;
    height:36px;
    margin: 0 auto;
    float:left;
    text-indent:-9999em; /*hide text for normal browsers*/
    }
    
    .rightpipe {
    background:url(images/Right-Pipe.png);
    width:54px;
    height:36px;
    margin: 0 auto;
    float:right;
    }
    
    /* Nav End */
    
    /* Content Start */
    
    
    .headercontent {
    background:url(images/Header-Content.png);
    float: left;
    width: 532px;
    height:76px;
    }
    
    .textcontent {
    font-family:Tahoma, Verdana, sans-serif, Arial;
    font-size:11px;
    text-indent:20px;
    color:#FFFFFF;
    text-decoration:none;
    }
    
    
    #contentbox {
    overflow: auto;
    background : url(images/Content-Box.png) #666767 no-repeat;
    width: 532px;
    height: 385px;
    background-position:center;
    float:left;
    }
    
    .footer {
    background:url(images/Footer.png);
    height:95px;
    width:532px;
    float:left;
    }
    
    .indexheader {
    background:url(images/Content-Box_UP.png);
    width:532px;
    height:170px;
    float:left;
    }
    
    
    body {
    background-repeat : no-repeat;
    }
    
    /* Content End */

    XHTML Code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    
    <meta name="keywords" content="halo 2,halo 3, xbox live, montages, videos, graphics, clan, teams, halo 2 help, " />
    <meta name="description" content="This Halo 2 website, has teams, clans, host montages,and graphics. Join our forum." />
    
    <link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
        <![endif]-->
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Elemental Studios | Montages, Graphics, Teams and more!</title>
    <link rel="shortcut icon" type="image/ico" href="Element2.ico" />
    
    <script type="text/javascript">
    
    // Copyright 2006-2007 javascript-array.com
    
    var TimeOut         = 300;
    var currentLayer    = null;
    var currentitem     = null;
    
    var currentLayerNum = 0;
    var noClose         = 0;
    var closeTimer      = null;
    
    // Open Hidden Layer
    function mopen(n)
    {
        var l  = document.getElementById("menu"+n);
        var mm = document.getElementById("mmenu"+n);
    	
        if(l)
        {
            mcancelclosetime();
            l.style.visibility='visible';
    
            if(currentLayer && (currentLayerNum != n))
                currentLayer.style.visibility='hidden';
    
            currentLayer = l;
            currentitem = mm;
            currentLayerNum = n;			
        }
        else if(currentLayer)
        {
            currentLayer.style.visibility='hidden';
            currentLayerNum = 0;
            currentitem = null;
            currentLayer = null;
    	}
    }
    
    // Turn On Close Timer
    function mclosetime()
    {
        closeTimer = window.setTimeout(mclose, TimeOut);
    }
    
    // Cancel Close Timer
    function mcancelclosetime()
    {
        if(closeTimer)
        {
            window.clearTimeout(closeTimer);
            closeTimer = null;
        }
    }
    
    // Close Showed Layer
    function mclose()
    {
        if(currentLayer && noClose!=1)
        {
            currentLayer.style.visibility='hidden';
            currentLayerNum = 0;
            currentLayer = null;
            currentitem = null;
        }
        else
        {
            noClose = 0;
        }
    
        currentLayer = null;
        currentitem = null;
    }
    
    // Close Layer Then Click-out
    document.onclick = mclose; 
    </script>
    
    
    <style type="text/css">
    <!--
    body {
    	background-repeat: no-repeat;
    }
    .style1 {font-size: 10px}
    -->
    </style>
    
    
    
    </head>
    
    <body>
    
    <div id="content">
    
    <div class="gapless" align="center">
    </div>
    
    <div class="left"></div>
    
    <div class="right">
    </div>
    
    <div class="leftpipe">
    </div>
    
    <a class="home" href="index.html">Home Link</a>
    
    <ul id="teamsdd">
        <li>
            <a href="html/teams.html" class="menu" id="mmenu1" 
                    onmouseover="mopen(1);"
                    onmouseout="mclosetime();"></a>
            <div class="submenu" id="menu1"
                    onmouseover="mcancelclosetime()"
                    onmouseout="mclosetime();">
                <a href="#">Team Element Vl:Pro</a> 
                <a href="#">Team Element Vl:Semi-Pro</a>
                <a href="#">Team Element Vl:Amateur</a>      
                </div>
        </li>
    </ul>
    
    <a class="video" href="html/videos.html">Video Link</a>
    
    <a class="graphic" href="html/graphics.html">Graphics Link</a>
    
    <a class="forum" href="http://z7.invisionfree.com/Elemental_Studios/index.php?">Forum Link</a>
    
    <a class="contact" href="html/contactus.html">Contact Link</a>
    
    
    <div class="rightpipe">
    </div>
    
    <div class="indexheader">
    
    
    <h1><img src="images/Welcome.png" alt="Welcome" width="125" height="38" /></h1>
     <p align="center" class="style1">	Hello, and Welcome to Elemental Studios. This section of Elemental Studios is for Halo 2. We are here to help you with you multimedia needs, anything from video editing, to Photoshop, and to your Halo 2 skills! We have a clan, and teams being set-up. So check out our forum, or maybe you would like to see graphics gallery, or check out the videos! Enjoy you stay, here!</p>  
      <img src="images/LastestNews.png" alt="Lastest News" width="195" height="38" /></div>
      <div class="lastestnews">
    
      <p align="center" class="textcontent">&nbsp;</p>
      <blockquote>
      
      <p align="left" class="textcontent">Hi guys! Well, its been pretty dead around here. Ads have been disabled. Team Element Vl has spilt up both we have 3 more people interested. Forums are up, and they are look pretty sweet thanks to the guys over at SkinPanel. Drop menus will be added, and site affliations will be coming to get our name around. </p>
    <p align="left" class="textcontent"><em>-posted by Squid on July 15th 2007</em></p>
      
      <p align="left" class="textcontent"> Hi guys, todays 7/07/07! Bungie Day! I recommend everyone to go online on Halo 2 at 7:07 pm Pacific time. I heard something big is happening. In other good news we now have a full team, so Team Element: Pro Division is closed for new recruits, please remember that the clan is is looking for memebers also, I will annoce tourneys and such. Now for a couple of side notes, if you are on a team please do not constantly change your Emblem, because I make Team Sigs for the teams which contain the Emblems, If you change your Emblem please think about what you really want, Team Element does not require a certain Emblem or any of that ****. Team Members should have atleast a AIM screen name. Halo3Forum accounts are optional but it would be nice if you did get one, because over there is a wealth of information on Halo 2 and strategies. Also if ou are using IE 7 you may have slight problems viewing the site because ads are now up and I haven't coded to support IE 7 fully yet. If you have Firefox and you are using Adblock please disable for this site.</p>
    <p align="left" class="textcontent"><em>-posted by Squid on July 7th 2007</em></p>
      
      <p align="left" class="textcontent">Happy July 4th! I hope you guys had a nice holiday! </p>
    <p align="left" class="textcontent"><em>-posted by Squid on July 4th 2007</em></p>
      
      
      <p align="left" class="textcontent"> Hey, wassup. Within these last two days, you probably have seen many improvements, within the site. The videos page and forums have been added. We are currently having problems, with the video streaming but bear with us, I am talking with support. In other news, soon I will be add more menus to the navigation. If you want to be added to a team just message me on Xbox Live and I will try you out, you will placed in the division where I think fit.</p>
    <p align="left" class="textcontent"><em>-posted by Squid on July 3th 2007</em></p>
      
        <p align="left" class="textcontent"> Hi guys, we have three new pages up. The Teams page, Contact Us Page, and the Graphics Page. The forums, and some more graphical upgrades will be coming to the Site. If for any reasons, you are having problems im on AIM at I Squid I, or email me at samyrk@hotmail.com, I check my email daily.</p>
    <p align="left" class="textcontent"><em>-posted by Squid on July 2th 2007</em></p>
        
        
        
      <p align="left" class="textcontent">Hi all, this is Squid. Today is Grand Opening of Elemental Studios. It was launched before but itwas severely miscoded, in both  Firefox and IE. But thanks to a friend of mine named Jutlander I have sucessfully coded it! Please use either Firefox 2 or IE. If you are using an older version of IE please upgrade to IE 7 to view transparent images.</p>
        <p align="left" class="textcontent"><em>-posted by Squid on June 30th 2007</em></p>
        <p align="left" class="textcontent"><br />
        </p>
        <p align="left" class="textcontent">&nbsp;</p>
      </blockquote>
      
     
    </div>
    
    <div class="footer">
    </div>
    </div>
    
    
    
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Apr 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    ie does it again..

    Browsers render pages differently and IE does not handle the code the same way firefox does (im assuming thats the other browser you are using). One solution is to create two stylesheets, one for IE and another for all other browsers. You can then dictate which stylesheet is loaded using conditional statements. You can learn all about those here.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The last site I coded I had minor issues but I fixed them and none of the fixes required me hacking up the layout. Sure I had to for min-height but that was it. Your problem is you haven't set a width on the unordered list. You also need to float it to the left.
    Code:
    #teamsdd {
    margin: 0;
    padding: 0;
    list-style:none;
    float:left;
    width:56px;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Wow, Thank you so much! And
    Quote Originally Posted by colindunn View Post
    Browsers render pages differently and IE does not handle the code the same way firefox does (im assuming thats the other browser you are using). One solution is to create two stylesheets, one for IE and another for all other browsers. You can then dictate which stylesheet is loaded using conditional statements. You can learn all about those here.
    I am using different stylesheets but i just didnt know what to put on the IE this time.
    Code:
    <link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
        <![endif]-->

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Oh man its happening again, I dont know why, I added the code..http://elementalstudios.freehostia.com/

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Looks fine here in Ie7.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Oops I should been more specific. When you click like the graphics, or contact us..or teams.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Thats because its not reading the Ie stylesheet anymore because its in the root directory not the html directory. DW didn't update the stylesheet location because it doesn't understand the html in the conditional comments. You do realize that you ONLY need to put the things in the IE stylesheet that you want to overwrite from the default stylesheet? You don't need to put everything in there.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    So I just need to change the linking to the IE stylesheet, DAng it not bringing up the browse box to select the file!

    Edit: I selected the file now like none of the images except the content box are showing up...

    Edit2: I figure, the links were wrong lol!
    Last edited by l Squid l; 07-16-2007 at 11:12 PM.


  •  

    Posting Permissions

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