Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-05-2005, 11:55 PM   PM User | #1
eelozano
New Coder

 
Join Date: Mar 2005
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
eelozano is an unknown quantity at this point
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.
eelozano is offline   Reply With Quote
Old 03-05-2005, 11:57 PM   PM User | #2
ampulator00
New Coder

 
Join Date: Jun 2004
Posts: 95
Thanks: 0
Thanked 0 Times in 0 Posts
ampulator00 is an unknown quantity at this point
For thing, CSS only allows for /**/ as comments, not //
ampulator00 is offline   Reply With Quote
Old 03-06-2005, 12:03 AM   PM User | #3
eelozano
New Coder

 
Join Date: Mar 2005
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
eelozano is an unknown quantity at this point
Ok, got rid of that (suprisingly it didn't affect either IE or Firefox, but definately good to know).
eelozano is offline   Reply With Quote
Old 03-06-2005, 12:11 AM   PM User | #4
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
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
_Aerospace_Eng_ is offline   Reply With Quote
Old 03-06-2005, 12:24 AM   PM User | #5
eelozano
New Coder

 
Join Date: Mar 2005
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
eelozano is an unknown quantity at this point
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;
}
eelozano is offline   Reply With Quote
Old 03-06-2005, 12:28 AM   PM User | #6
eelozano
New Coder

 
Join Date: Mar 2005
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
eelozano is an unknown quantity at this point
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.
eelozano is offline   Reply With Quote
Old 03-06-2005, 12:36 AM   PM User | #7
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
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
_Aerospace_Eng_ is offline   Reply With Quote
Old 03-06-2005, 01:43 AM   PM User | #8
eelozano
New Coder

 
Join Date: Mar 2005
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
eelozano is an unknown quantity at this point
That was it, thank you very much
eelozano is offline   Reply With Quote
Old 03-07-2005, 01:50 AM   PM User | #9
TheTrueAPlus
New to the CF scene

 
Join Date: Mar 2005
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
TheTrueAPlus is an unknown quantity at this point
Lightbulb

I was going to say that it was because of some ad removing program. You may want to change your id.
TheTrueAPlus is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 04:45 PM.


Advertisement
Log in to turn off these ads.