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
    New Coder
    Join Date
    Mar 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Banner shows up in Firefox but not IE

    I am designing a website and I have and odd problem when attempting to get my banner to display in IE. I am pretty new to CSS so my code may be inefficient (please feel free to mention how I could change something if needed). As of right now the banner (collage.jpg) shows up in Firefox where its supposed to, but in IE it doesn't show up at all.

    Here is the .html file

    PHP Code:
    <html>
    <
    head>

    <
    title>Men of Color</title>

        <!-- 
    to correct the unsightly Flash of Unstyled Content. [url]http://www.bluerobot.com/web/css/fouc.asp[/url] -->
        
    <script type="text/javascript"></script>

        <style type="text/css" title="currentStyle" media="screen">
            @import "main.css";
        </style>

    </head>
    <body>

    <div id="container">
        <div id="banner"></div>
        <div id="Luncheon">
            <div id="title">
                <h1><span>Indiana University 2nd Men of Color Leadership Conference</span></h1>
                <h2><span>“Changing Tomorrow by Challenging Today” &copy</span></h2>
            </div>
            <div id="keynotetitle">
                <h3><span>The Keynote Speaker for the Symposium will be Dr. Gerardo Gonzalez</span></h2>
            </div>
            <div id="speakerimage"></div>
            <div id="keynote">
                <p><span>Dean Gonzalez is the Dean of the School of Education at Indiana University.   Dean Gonzalez is a Cuban immigrant who persevered through adversity to enhance his own and the lives of many young men of color.  He has a doctorate in Education from the University of Florida where he also served as interim dean. For additional information about the Dean or the IU School of Education please visit: <a href="http://www.education.indiana.edu"> School of Education</a></span></p>
            </div>
            <div id="info">
                <p><span>Last year a small group of male African American and Latino students successfully held Indiana University’s Inaugural Men of Color Leadership (MOC) Conference. They found without communication between MOC, their experiences may be viewed as unique unto themselves without a source of validation.  The purpose of that and the 2005 conference is to empower MOC with the skills and knowledge needed to foster academic success; establish a support network; support the goal of graduation; and improve personal achievement.

                This year the conference will be expanded to include student leaders from Indiana and surrounding states. The planning committee for the Men of Color Leadership Conference invites you to send representatives to 2005 MOC Leadership Luncheon Symposium on April 16, 2005 at the Indiana Memorial Union, Frangipani Room, from 11:00am-4pm.  The purpose of this symposium is to plan the fall regional conference, tentatively scheduled for November 5, 2005, by encouraging MOC to gather and draw upon their personal experiences to support and empower themselves. The symposium and conference will provide a unique opportunity for students, faculty, staff, and community leaders to discuss and engage on issues that affect their respective communities.  Issues for discussion include but will not be limited to: </span></p>
            </div>
            
            <div id="list">
                <ul>
                <li> Black/Latino/Asian/Native American male incarceration rates compared to higher education enrollment rates
                <li> How to respond and communicate to authoritarians (i.e., law enforcement, administrators, parents, etc.)
                <li> Living with dogmatic stereotypes about Black/Latino/Asian/Native American males (i.e., Rap, Drugs, Relationships, Sexual Orientation, Racism, etc.)
                <li> How to maintain integrity and cultural identity without assimilating
                <li> How to develop unity and support among MOC
                <li> There is more to life than having a wicked jump shot and selling crack rock
                <li> Is “diversity” just black and white?
                </ul>
            </div>

            Mark your calendars for Saturday, April 16th, Frangipani Room, 11:00am-4:00pm for this empowering event.  Seating for the Luncheon Symposium is limited to fifty and will be provided at no cost.  Please RSVP by March 25th 2005 to: <a href="http://www.indiana.edu/~fase"> FASE Mentoring</a> or by phone at 812-855-3540.</p>
        </div>
    </div>
    </body>
    </html> 
    And here is the .css file

    Code:
    body { 
    	font: 8pt/16pt georgia; 
    	color: #555753; 
    	background: #FFFDD0; //url(collage.jpg) no-repeat top center; 
    	margin: 0px; 
    
    	}
    
    #banner {
    	background: url(collage.jpg) no-repeat top center;
    	// margin-top: 50px;
    	// margin-bottom: 50px;
    	padding: 0px 0px 75px 0px;
    	
    	}
    
    #container { 
    	padding: 0px 175px 0px 175px;  
    	margin: 0px; 
    	}
    
    #title {
    	text-align: center;
    	}
    
    #keynotetitle {
    	text-align: center;
    	}
    
    #speakerimage {
    	background: url(gonzalez.jpg) no-repeat center;
    	margin-top: 50px;
    	margin-bottom: 50px;
    	padding: 100px 0 100px 0px;
    }

    I read the forum rules and I didn't find anything against posting code like this, but again, feel free to tell me if this type of post is unacceptable.

  • #2
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For thing, CSS only allows for /**/ as comments, not //

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, got rid of that (suprisingly it didn't affect either IE or Firefox, but definately good to know).

  • #4
    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
    this
    Code:
    body { 
    	font: 8pt/16pt georgia; 
    	color: #555753; 
    	background: #FFFDD0; //url(collage.jpg) no-repeat top center; 
    	margin: 0px; 
    
    	}
    should be
    Code:
    body { 
    	font: 8pt/16pt georgia; 
    	color: #555753; 
    	background: #FFFDD0; /*url(collage.jpg) no-repeat top center;*/ 
    	margin: 0px; 
    
    	}
    that is of course you are trying to comment things out, and try this for your banner css
    Code:
    #banner {
    	background: url(collage.jpg) no-repeat 0% 50%;
    	margin-top: 50px;
    	margin-bottom: 50px;
    	padding: 0px 0px 75px 0px;
    	
    	}
    and then if it still doesn't show up check to make sure its in the right place on your server, so it should be in the same directory as the page in question

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As of right now I'm working offline. I have the pictures in the same directory as the .html file (and .css file).

    I've changed the .css to the following, but it still only shows up on Firefox and not IE. The space is reserved in IE yet no image displays.

    Code:
    body { 
    	font: 8pt/16pt georgia; 
    	color: #555753; 
    	background: #FFFDD0;
    	margin: 0px; 
    
    	}
    
    #banner {
    	background: url(collage.jpg) no-repeat 50% 50%;
    	padding: 0px 0px 75px 0px;
    	
    	}
    
    #container { 
    	padding: 0px 175px 0px 175px;  
    	margin: 0px; 
    	}
    
    #title {
    	text-align: center;
    	}
    
    #keynotetitle {
    	text-align: center;
    	}
    
    #speakerimage {
    	background: url(gonzalez.jpg) no-repeat center;
    	margin-top: 50px;
    	margin-bottom: 50px;
    	padding: 100px 0 100px 0px;
    }

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I solved the problem, but I'm not to sure why this works. If possible can someone explain to me why this renders in one broswer and not the other.

    The original banner code was

    Code:
    #banner {
    	background: url(collage.jpg) no-repeat 50% 50%;
    	padding: 0px 0px 75px 0px;
    	
    	}
    I changed the padding on the bottom to be padding on the top instead.

    Code:
    #banner {
    	background: url(collage.jpg) no-repeat 50% 50%;
    	padding: 75px 0px 0px 0px;
    	
    	}
    This causes it to work in IE now...but like I said, I have no clue why.

  • #7
    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 only thing i could think of was that the banner area didn't have a height defined, and when u changed up the padding it gave it a height because padding:0px 0px 75px 0px; means the top is 0px the right is 0px the bottom is 75px and the left is 0px and since backgrounds start from the top up, it had no room to show it, so i bet if you took the padding away and used height:75px; you would see the banner still, so now the new padding set technically gives the banner area a height of 75px because the first number in the padding is for the top and so on

  • #8
    New Coder
    Join Date
    Mar 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That was it, thank you very much

  • #9
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    I was going to say that it was because of some ad removing program. You may want to change your id.


  •  

    Posting Permissions

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