...

View Full Version : Banner shows up in Firefox but not IE



eelozano
03-06-2005, 12:55 AM
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


<html>
<head>

<title>Men of Color</title>

<!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
<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


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.

ampulator00
03-06-2005, 12:57 AM
For thing, CSS only allows for /**/ as comments, not //

eelozano
03-06-2005, 01:03 AM
Ok, got rid of that (suprisingly it didn't affect either IE or Firefox, but definately good to know).

_Aerospace_Eng_
03-06-2005, 01:11 AM
this

body {
font: 8pt/16pt georgia;
color: #555753;
background: #FFFDD0; //url(collage.jpg) no-repeat top center;
margin: 0px;

}
should be

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

#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

eelozano
03-06-2005, 01:24 AM
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.



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;
}

eelozano
03-06-2005, 01:28 AM
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



#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.



#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.

_Aerospace_Eng_
03-06-2005, 01:36 AM
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

eelozano
03-06-2005, 02:43 AM
That was it, thank you very much

TheTrueAPlus
03-07-2005, 02:50 AM
I was going to say that it was because of some ad removing program. You may want to change your id.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum