Having display issues in IE... Help!

Page 1 of 1

4 Replies - 503 Views - Last Post: 08 December 2008 - 01:46 PM

#1 SirenDesigns  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 03-December 08

Having display issues in IE... Help!

Posted 03 December 2008 - 10:40 PM

Hi everyone... I just joined this site today. I'm fairly new to web design so please don't mock my coding skills. I just need some guidance. I just finished a website and it looks totally screwy in Internet Explorer. I'm sure I'm missing something simple, but I just can't get it. Can anyone help, please?


CSS
/** BASIC */

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	background: #FFFFFF url(images/background.jpg) repeat-y left top;
	behavior:url("csshover.htc");
}

a {
	text-decoration: none;}

a:hover {
	text-decoration: underline;
	color: #666666;

}

a:visited{color:#666666;
	text-decoration:none;}

h1 {
	font-weight: bold;
}

h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	font-weight: bold;
}

h2 {
	font-size: 14px;
	padding: 0px;
	color: #006600;
}

h3 {
	font-size: 1px;
	padding: 0px;
	color: #FFFFFF;
}
p, ol, ul {
	margin-top: 0px;
	padding: 0px;
}

p.top{  margin: 1.5em 6%;}
p.indent{  margin: 1.5em 12%;}


.text1 {
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}

.text2 {
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	padding-bottom: 10px;
}

.text3 {
	padding: 5px 83px 5px 5px;
}

.img1 {
	float: left;
	margin: 0px;
	border: 0;
}

.float{
	float:left;
	padding-right: 1em;
	padding-bottom: 0.5em;
}

.floatright{
	float:right; 
padding-left: 1em;
	padding-bottom: 1em;
	padding-top: 1em; }	

/** HEADER*/

#header {
	width: 800px;}

#header h1 {
	font-weight: bold;
	font-size: 22px;
	text-transform: uppercase;
}

#header h2 {
	text-transform: uppercase;
}
		
/** MENU*/

#menu1 {
	float: left;
	width: 200px;
	height: 600px;
	margin: 0px auto;
	font-weight:lighter;
	font-size: 11px;
	font-family: Helvetica;
	text-transform: uppercase; }

#menu1 a:link {
color: #ffffff;
text-decoration: none; }

#menu1 a:visited {
color: #ffffff;
text-decoration: none; }

#menu1 ul {
	margin: 0px;
	list-style: none;
	padding: 0px;

}

#menu1 li {
}

#menu1 a:hover { text-decoration: none;
	color:#999999
}

#menu-01 {
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;	
}

#menu-02 {
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-03 {
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-04 {
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-05 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-06 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-07 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-08 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}
	
#menu-09 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}
	
#menu-10 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;
	}
	
#menu-11 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;
}
#menu-12 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;
}
/** CONTENT */

#content {
	width: 800px;
	height:220em;
	padding: 0px;
}

#left {
	float: left;
	width: 200px;
}

#right {
	width: 520px;
	padding: 175px 20px 0px 255px;
	color: #666666;
}

#right a:link{color: #666666;
				text-decoration: none; }

#colB {
	float: right;
	width: 520px;
	
}


/** FOOTER */

#footer {
	float: left;
	width: 800px;
	padding-top: 10px;
	position:fixed;
	bottom:0; 
	background:white;
}




#footer p {
	margin: 0px;
	color: #666666;
	text-align: left;
	background-color:#FFFFFF;
	font-size: 9px;
}

#footer a:link {
color: #666666;
text-decoration: none; }


#footer p.a:link {
color: #666666;
text-decoration: none; }

/** */


HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>UM Music Therapy</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
 ul {
list-style: none; /* Remove the bullets */
margin: 0;
padding: 0;
width:200px; /* Menu width */
}
ul li {
display: block; /* Make a menu item a block (height 100%, width 100%) */
height:100%;
width:100%;
position: relative;
float:left; /* Make sure (in IE) there is no margin between the menu items */
}
ul li a{
display:block; /* When rollover the menu item, the whole item will be seen as link. */
}
ul li a:hover {
padding:0;

}
ul ul {
position: absolute;
top: 0;
display:none; /* Display nothing when not 'hovered' */
}
ul li ul li{ background:#006600;
			padding: .5em;}
ul li ul li a:hover{ }
ul li:hover ul{
display: block; /* Make sure the submenu is displayed as blocks as well. */
left:205px; /* Your menu width. The submenu appears there, when you hover a menu item. */ 
width:175px;}
.style1 {color: #666666}
</style>

</head>
<body>
<div id="main">

<div id="header"><span class="img1"><a href="index.html"><img src="images/banner.jpg" alt="Music Therapy Home" width="800" height="150" border="0" /></a></span></div>
<div id="content">
  <div id="left">
	<p> </p>
	<div id="menu1">
	  <ul>
		<li id="menu-01"><a href="bachelor.html">Bachelor of Music</a></li>
		<li id="menu-02"><a href="masters.html">Master of Music</a></li>
		<li id="menu-03"><a href="masters_equiv.html">Master of Music with Equivalency</a></li>
		<li id="menu-04"><a href="doctor.html">Doctor of Philosophy</a></li>
		<li id="menu-05"><a href="clinical.html">Clinical Training</a></li>
		<li id="menu-06"><a href="faculty.html">Faculty Research</a></li>
		<li id="menu-07"><a href="student.html">Student Life</a>
			<ul>
				
				<li><a href="testimonials.html">Student Testimonials</a></li>
				<li><a href="research.html">Student Research</a></li>
				<li><a href="gallery.html">Photo Galleries</a></li>
			   
			</ul>
		
		<li id="menu-08"><a href="alumni.html">Alumni Achievements</a></li>
		<li id="menu-09"><a href="inquiries.html">Inquiries</a></li>
		<li id="menu-10"><a href="ress_project.html">Ress Family Hospital Performance Project</a></li>
		<li id="menu-11"><a href="http://www.music.miami.edu/giving.html" target="_blank">How to make a Donation</a></li>
		<li id="menu-12"><a href="links.html">Related Links</a></li>





	  </ul>
	</div>

  
  </div>
	   
  <div id="right">
	<h2> What is Music Therapy? </h2>
	<p>Music therapy involves using music as a tool to help people regain or develop important life skills, such as communication, physical movement, attention and memory, emotional growth or social skills. Therapeutic techniques are based on scientific knowledge regarding how the human brain and body respond to and utilize musical stimuli.</p>
	<p>Music therapists work with individuals of all ages who require treatment due to deficits in physical, cognitive or social/emotional functioning. Potential employment sites include medical or psychiatric hospitals, clinics, nursing homes, rehabilitation centers, special education or <br />
	early intervention school settings, hospices, or correctional settings. Music therapy can be a rewarding career for the individual who has a strong musical background and who is interested in a health care profession. </p>
		<h2> The Frost School of Music offers four degree programs in Music Therapy: </h2>
		<p>• Bachelor of Music degree in Music Therapy<br />
		  • Master of Music degree in Music Therapy<br />
		  • Master of Music degree in Music Therapy with Equivalency<br />
		• Doctor of Philosophy degree in Music Education with Music Therapy Emphasis</p>
		<h2> Unique benefits of our Music Therapy program include: </h2>
		<p>• Learning in a humanistic and scientifically-based music therapy curriculum<br />
		  • Faculty trained in an evidence-based approach, known as Neurologic Music Therapy<br />
		  • A low student-teacher ratio to promote thorough learning of academic concepts and <br />
		  clinical skills<br />
		  • Exceptional standards for clinical training opportunities and supervision<br />
		  • A rich music environment with a plethora of performing opportunities<br />
		• A 95% employment rate among music therapy graduates</p>
	  <p> </p>
 
  </div>
</div>

	 <div align="left" id="footer">
	<p> </p>
	<p><img class="float"src="images/UM.gif" alt="UM Logo" /> </p>
	<p> </p>
	<p> </p>
	<p> </p>
	<p>COPYRIGHT 2008 FROST SCHOOL OF MUSIC | UNIVERSITY OF MIAMI</p>
	<p> </p>
	 </div>

</div>

	 </body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Having display issues in IE... Help!

#2 b.ihde  Icon User is offline

  • D.I.C for life
  • member icon

Reputation: 42
  • View blog
  • Posts: 1,070
  • Joined: 29-September 08

Re: Having display issues in IE... Help!

Posted 04 December 2008 - 12:46 AM

Hi!

You have a css fila and a style attribute in your html..
I guess you only want your css file to set the style of your site. Delete the 
<style type="text/css"></style>

to get the css file work correctly..


Hope this helps!

regards

B.Ihde
Was This Post Helpful? 1
  • +
  • -

#3 SirenDesigns  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 03-December 08

Re: Having display issues in IE... Help!

Posted 04 December 2008 - 01:32 PM

View Postb.ihde, on 3 Dec, 2008 - 11:46 PM, said:

Hi!

You have a css fila and a style attribute in your html..
I guess you only want your css file to set the style of your site. Delete the 
<style type="text/css"></style>

to get the css file work correctly..


Hope this helps!

regards

B.Ihde



THANKS!! That helped a lot, but I'm still having one more issue. The problem is that the content (not the navigation) is far below the fold... so you have to scroll faaaaaar down to see it. As well as some of the footers are not at the bottom, but some are.... any ideas?? Here is the code again, in case you missed it:

CSS
/** BASIC */

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	background: #FFFFFF url(images/background.jpg) repeat-y left top;
	behavior:url("csshover.htc");
}

a {
	text-decoration: none;}

a:hover {
	text-decoration: underline;
	color: #666666;

}

a:visited{color:#666666;
	text-decoration:none;}

h1 {
	font-weight: bold;
}

h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	font-weight: bold;
}

h2 {
	font-size: 14px;
	padding: 0px;
	color: #006600;
}

h3 {
	font-size: 1px;
	padding: 0px;
	color: #FFFFFF;
}
p, ol, ul {
	margin-top: 0px;
	padding: 0px;
}

p.top{  margin: 1.5em 6%;}
p.indent{  margin: 1.5em 12%;}


.text1 {
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}

.text2 {
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	padding-bottom: 10px;
}

.text3 {
	padding: 5px 83px 5px 5px;
}

.img1 {
	float: left;
	margin: 0px;
	border: 0;
}

.float{
	float:left;
	padding-right: 1em;
	padding-bottom: 0.5em;
}

.floatright{
	float:right; 
padding-left: 1em;
	padding-bottom: 1em;
	padding-top: 1em; }	

/** HEADER*/

#header {
	width: 800px;}

#header h1 {
	font-weight: bold;
	font-size: 22px;
	text-transform: uppercase;
}

#header h2 {
	text-transform: uppercase;
}
		
/** MENU*/

#menu1 {
	float: left;
	width: 200px;
	height: 600px;
	margin: 0px auto;
	font-weight:lighter;
	font-size: 11px;
	font-family: Helvetica;
	text-transform: uppercase; }

#menu1 a:link {
color: #ffffff;
text-decoration: none; }

#menu1 a:visited {
color: #ffffff;
text-decoration: none; }

#menu1 ul {
	margin: 0px;
	list-style: none;
	padding: 0px;

}

#menu1 li {
}

#menu1 a:hover { text-decoration: none;
	color:#999999
}

#menu-01 {
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;	
}

#menu-02 {
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-03 {
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-04 {
	margin: 0px 0px 5px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-05 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-06 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-07 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}

#menu-08 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}
	
#menu-09 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;}
	
#menu-10 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;
	}
	
#menu-11 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;
}
#menu-12 {
	margin: 0px 0px 10px 0px;
	padding: 5px 5px 5px 15px;
	list-style: none;
}
/** CONTENT */

#content {
	width: 800px;
	height:220em;
	padding: 0px;
}

#left {
	float: left;
	width: 200px;
}

#right {
	width: 520px;
	padding: 175px 20px 0px 255px;
	color: #666666;
}

#right a:link{color: #666666;
				text-decoration: none; }

#colB {
	float: right;
	width: 520px;
	
}


/** FOOTER */

#footer {
	float: left;
	width: 800px;
	padding-top: 10px;
	position:fixed;
	bottom:0; 
	background:white;
}




#footer p {
	margin: 0px;
	color: #666666;
	text-align: left;
	background-color:#FFFFFF;
	font-size: 9px;
}

#footer a:link {
color: #666666;
text-decoration: none; }


#footer p.a:link {
color: #666666;
text-decoration: none; }

/** */


HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>UM Music Therapy</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
 ul {
list-style: none; /* Remove the bullets */
margin: 0;
padding: 0;
width:200px; /* Menu width */
}
ul li {
display: block; /* Make a menu item a block (height 100%, width 100%) */
height:100%;
width:100%;
position: relative;
float:left; /* Make sure (in IE) there is no margin between the menu items */
}
ul li a{
display:block; /* When rollover the menu item, the whole item will be seen as link. */
}
ul li a:hover {
padding:0;

}
ul ul {
position: absolute;
top: 0;
display:none; /* Display nothing when not 'hovered' */
}
ul li ul li{ background:#006600;
			padding: .5em;}
ul li ul li a:hover{ }
ul li:hover ul{
display: block; /* Make sure the submenu is displayed as blocks as well. */
left:205px; /* Your menu width. The submenu appears there, when you hover a menu item. */ 
width:175px;}
.style1 {color: #666666}
</style>

</head>
<body>
<div id="main">

<div id="header"><span class="img1"><a href="index.html"><img src="images/banner.jpg" alt="Music Therapy Home" width="800" height="150" border="0" /></a></span></div>
<div id="content">
  <div id="left">
	<p> </p>
	<div id="menu1">
	  <ul>
		<li id="menu-01"><a href="bachelor.html">Bachelor of Music</a></li>
		<li id="menu-02"><a href="masters.html">Master of Music</a></li>
		<li id="menu-03"><a href="masters_equiv.html">Master of Music with Equivalency</a></li>
		<li id="menu-04"><a href="doctor.html">Doctor of Philosophy</a></li>
		<li id="menu-05"><a href="clinical.html">Clinical Training</a></li>
		<li id="menu-06"><a href="faculty.html">Faculty Research</a></li>
		<li id="menu-07"><a href="student.html">Student Life</a>
			<ul>
				
				<li><a href="testimonials.html">Student Testimonials</a></li>
				<li><a href="research.html">Student Research</a></li>
				<li><a href="gallery.html">Photo Galleries</a></li>
			   
			</ul>
		
		<li id="menu-08"><a href="alumni.html">Alumni Achievements</a></li>
		<li id="menu-09"><a href="inquiries.html">Inquiries</a></li>
		<li id="menu-10"><a href="ress_project.html">Ress Family Hospital Performance Project</a></li>
		<li id="menu-11"><a href="http://www.music.miami.edu/giving.html" target="_blank">How to make a Donation</a></li>
		<li id="menu-12"><a href="links.html">Related Links</a></li>





	  </ul>
	</div>

  
  </div>
	   
  <div id="right">
	<h2> What is Music Therapy? </h2>
	<p>Music therapy involves using music as a tool to help people regain or develop important life skills, such as communication, physical movement, attention and memory, emotional growth or social skills. Therapeutic techniques are based on scientific knowledge regarding how the human brain and body respond to and utilize musical stimuli.</p>
	<p>Music therapists work with individuals of all ages who require treatment due to deficits in physical, cognitive or social/emotional functioning. Potential employment sites include medical or psychiatric hospitals, clinics, nursing homes, rehabilitation centers, special education or <br />
	early intervention school settings, hospices, or correctional settings. Music therapy can be a rewarding career for the individual who has a strong musical background and who is interested in a health care profession. </p>
		<h2> The Frost School of Music offers four degree programs in Music Therapy: </h2>
		<p>• Bachelor of Music degree in Music Therapy<br />
		  • Master of Music degree in Music Therapy<br />
		  • Master of Music degree in Music Therapy with Equivalency<br />
		• Doctor of Philosophy degree in Music Education with Music Therapy Emphasis</p>
		<h2> Unique benefits of our Music Therapy program include: </h2>
		<p>• Learning in a humanistic and scientifically-based music therapy curriculum<br />
		  • Faculty trained in an evidence-based approach, known as Neurologic Music Therapy<br />
		  • A low student-teacher ratio to promote thorough learning of academic concepts and <br />
		  clinical skills<br />
		  • Exceptional standards for clinical training opportunities and supervision<br />
		  • A rich music environment with a plethora of performing opportunities<br />
		• A 95% employment rate among music therapy graduates</p>
	  <p> </p>
 
  </div>
</div>

	 <div align="left" id="footer">
	<p> </p>
	<p><img class="float"src="images/UM.gif" alt="UM Logo" /> </p>
	<p> </p>
	<p> </p>
	<p> </p>
	<p>COPYRIGHT 2008 FROST SCHOOL OF MUSIC | UNIVERSITY OF MIAMI</p>
	<p> </p>
	 </div>

</div>

	 </body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 b.ihde  Icon User is offline

  • D.I.C for life
  • member icon

Reputation: 42
  • View blog
  • Posts: 1,070
  • Joined: 29-September 08

Re: Having display issues in IE... Help!

Posted 06 December 2008 - 10:26 AM

Hi,

ok for the footer which isn΄t at the bottom..

you have

/** FOOTER */

#footer {
	float: left;
	width: 800px;
	padding-top: 10px;
	position:fixed;
	bottom:0; 
	background:white;
}

#footer {
i would try to change it to:
float: left;
width: 800px;
padding-top: 10px;
vertical-align: bottom;
background: white;
}


For the content:

I guess the content is under the menu and not next to it right?
If so, you can make a table to set the menu at one side and the content at the other side..
just like:

<table style="width: 100%">
<tr>
		<td style="width: 30%">MENU CONTENT</td>
		<td style="width: 70%">TEXT CONTENT</td>
</tr>
</table>



Hope this helps!

If you have any problems with it, feel free to pm me :)


regards

B.Ihde
Was This Post Helpful? 1
  • +
  • -

#5 SirenDesigns  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 03-December 08

Re: Having display issues in IE... Help!

Posted 08 December 2008 - 01:46 PM

View Postb.ihde, on 6 Dec, 2008 - 09:26 AM, said:

Hi,

ok for the footer which isn΄t at the bottom..

you have

/** FOOTER */

#footer {
	float: left;
	width: 800px;
	padding-top: 10px;
	position:fixed;
	bottom:0; 
	background:white;
}

#footer {
i would try to change it to:
float: left;
width: 800px;
padding-top: 10px;
vertical-align: bottom;
background: white;
}


For the content:

I guess the content is under the menu and not next to it right?
If so, you can make a table to set the menu at one side and the content at the other side..
just like:

<table style="width: 100%">
<tr>
		<td style="width: 30%">MENU CONTENT</td>
		<td style="width: 70%">TEXT CONTENT</td>
</tr>
</table>



Hope this helps!

If you have any problems with it, feel free to pm me :)


regards

B.Ihde

Thanks so much for the help! I've fixed the footer problem thanks to everyone's suggestions, but regarding the content... it is STILL not working properly in IE. It's not that it's below the menu, it is actually just appearing below the fold. So, instead of being right at the top under the header, it starts much further down and the viewer had to scroll down to see it :( I'm still playing around with it... thankfully my client is understanding and patient
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1