Can't get the website to display the same in both IE and Firefox. height's arent displayed correctly
newbie
Location: Rochester Institute of Technology
Posted: Sat, 2008-10-11 22:14
I'm making a website for my ROTC at my college and I'm using CSS. I have a menu bar on the left and a content section on the right. They are in two separate div's and i'm trying to get them to match up at the bottom.
the menu div stops halfway because the menu doesn't go down all the way. so i set the height to a percentage to try and match up with the content section. (or exact height they're both screwed up)
so here's the two images:
firefox:
IE:
as you can see there's a difference and I can't figure out how to make them match.
any ideas?
EDIT: http://people.rit.edu/~ijs4097/rotc/ View it in firefox and then IE and see the huge difference. And if you look on the main page, the flash slideshow is displayed in the correct size in Firefox but in IE it shrinks it down for some reason. any ideas?
I usually just throw everything in tables and it works perfectly. guaranteed. no questions asked, no matter what browser. But I used div's this time because they're supposedly so much better and it's just working great so far as you can tell. I really see the reason to switch over...
code for css style:
body {
background-color: #006600;
background-image: url('background.gif');
text-align: center;
}
div#site {
margin-left: auto;
margin-right: auto;
width: 800px;
overflow: hidden;
}
div#header {
margin-top: 0px;
padding-top: 0px;
padding-bottom: 12px;
background: black;
text-align: right;
}
div#header span a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
margin-top: 0px;
padding-bottom: 2px;
text-decoration: none;
}
div#header span a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-color: #999999;
margin: 0px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
height: 100%;
padding-bottom: 2px;
}
div#menu {
text-align: left;
width: 170px;
background: #333333;
color: orange;
float: left;
height: 77%;
}
div#menu ul {
margin: 0px;
padding: 0px;
display: block;
list-style-type: none;
}
div#menu ul li {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FF6600;
text-decoration: none;
float: left;
background-color: #333333;
display: block;
width: 100%;
padding-top: 2px;
padding-bottom: 2px;
text-indent: 5pt;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
font-weight: bold;
}
div#menu ul li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: block;
width: 100%;
padding-top: 2px;
padding-bottom: 2px;
text-indent: 5pt;
}
div#menu li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #999999;
margin: 0px;
padding: 15px;
display: block;
width: 100%;
padding-top: 2px;
padding-bottom: 2px;
text-indent: 5p
}
div#content {
float: left;
background: white;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
color: #000000;
margin-left: 15px;
margin-right: 25px;
}
div#content_outer{
float: left;
overflow: hidden;
width: 630px;
background: white;
}
div#content_left {
margin-left: 20px;
margin-top: 10px;
margin-right: 30px;
float: left;
width: 380px;
font-size: 11pt;
text-align: justify;
}
div#content_left h1{
font-size: 15pt;
}
div#content_information {
text-align: left;
float: right;
margin-right: 10px;
width: 188px;
margin-top: 30px;
}
.information_header {
display: block;
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #999999;
border: 1px solid #999999;
color: #000000;
font-weight: bold;
margin-bottom: 7px;
}
.information_box {
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
width: 100%;
background-color: #CCCCCC;
border: 1px solid #999999;
margin-bottom: 10px;
}
div#information_contact {
font-size: 8pt;
}
div#footer {
background-color: #FFFFFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
padding-top: 10px;
padding-bottom: 5px;
margin-bottom: 5px;
clear: both;
}
a {
font-weight: normal;
text-decoration: underline;
color: #000000;
}
div#menu a {
color: white;
}
div#menu li {
margin-left: 0px;
padding: 0px;
}
<!------------------------------------------------------!>
div#title {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #333333;
font-weight: bold;
}
div#body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
html for website:
<html><head>
<title>RIT Army ROTC - Tiger Battalion - Rochester, NY</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="index_files/default.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<div id="site">
<div id="header">
<span>
<a href="http://www.rit.edu">RIT Homepage</a>
<a href="https://infocenter.rit.edu/">SIS - Information Access Center</a>
<a href="http://people.rit.edu/~ijs4097/rotc/">
</span>
<img src="index_files/6sep04v1.jpg" width="800" border="0" height="200">
</a>
</div>
<div id="menu">
<ul>
<li>Navigate</li>
<li><a href="http://www.rit.edu/cast/armyrotc/">Home</a></li>
<li>Army ROTC at RIT</li>
<li><a href="http://people.rit.edu/~ijs4097/rotc/prospective_students.html">Prospective Students</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/scholar.php">Scholarship Information</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/bravo.php">Cadet Training</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/charlie.php">Extracurricular Activ.</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/info.php">Information Request</a></li>
<li>Tiger Battalion</li>
<li><a href="http://www.rit.edu/cast/armyrotc/cadre.php">Cadre and Staff</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/gallery/">Photo Gallery</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/rangerplatoon/">Ranger Platoon</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/rangerchallenge/">Ranger Challenge</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/alumni.php">Alumni</a></li>
<li>Links and Resources</li>
<li><a href="http://www.rit.edu/cast/armyrotc/delta.php">Cadet Resources</a></li>
<li><a href="http://www.army.mil/">Army.mil</a></li>
<li><a href="https://www.us.army.mil/">Army Knowlege Online</a></li>
</ul>
</div>
<div id="content_outer">
<div id="content_left">
<h1>Rochester Institute of Technology</h1>
<p>
Army ROTC is for scholars, athletes, and leaders. It takes dedication and hard
work to meet the standards of the Tiger Battalion. Think you have what it takes
to become a Tiger? Fill out an <a href="/info.php">info request form</a> today and get yourself started
on the right path.
</p>
<p>
Our program culminates in the commission of a cadet into the U.S. Army as a
2nd Lieutenant officer. Our battalion carries a proud tradition of commissioning
outstanding cadets into the Army every year. Become a part of the tradition; give
us a visit today.
</p>
<p>
Army ROTC builds strong leadership skills, and will help you develop good time
management. One of our goals is to enhance your decision–making abilities, which
enable you to prioritize your schoolwork, and eventually your professional work.
</p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="256" height="600" title="navigation">
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<embed src="slideshow.swf" width="400" ></embed>
</object>
</div>
<div id="content_information">
<div id="information_newsletter" class="information_box">
<span class="information_header">Read the latest Newsletter!</span>
<form name="form1">
<select name="menu1">
<option>Select Issue...</option>
<option value="alumni/FALL 06 NEWSLETTER.pdf">Fall 2006</option>
<option value="alumni/Spring 06 Newsletter.pdf">Spring 2006</option>
</select>
<input name="Button1" value="Go" onclick="MM_jumpMenuGo('menu1','parent',0)" type="button">
</form>
</div>
<div id="information_events" class="information_box">
<span class="information_header">News and Events</span>
August 25, 2007
<br>Freshman move in for ROTC
<br>August 26, 2007
<br>General move in for all Freshman
<br>September 3, 2007
<br>Start of Classes
<br>September 7, 2007
<br>First Training Lab
</div>
<div id="information_photo" class="information_box">
<span class="information_header">Photo Gallery</span>
<img src="index_files/gallery.jpg" alt="Chinook" />
<br>You can also check out the latest pics from the 2007 Spring Field Training Exercise
</div>
<div id="information_contact" class="information_box">
<span class="information_header">Contact Info</span>
Army ROTC
<br>16 Lomb Memorial Drive
<br>Rochester NY 14623
<br>Army ROTC Office: Building 10
<br>Phone Number: 585.475.2881
<br>Email:
</div>
</div>
<div id="footer">
Copyright © 2008 Tiger Battalion | <a href="http://www.rit.edu/cast/armyrotc/notice.php">Legal Notice</a>
</div>
</div>
<script language="JavaScript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_jumpMenuGo(selName,targ,restore){ //v3.0
var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);
}
</script>
</div>
</div>
</body></html>
Moderator
Posts: 6782
Joined: 2004-05-01
Location: Brisbane
hokeyplyr48 wrote:I usually
Posted: Sun, 2008-10-12 21:53
If it's all so hard for you, sounds like you'd be better off just giving up and going back to what you know.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
newbie
Posts: 4
Joined: 2008-10-11
Location: Rochester Institute of Technology
i realize it's making it
Posted: Sun, 2008-10-12 22:02
i realize it's making it harder, but if i keep resorting back to what's easy i'll never learn.
i want to learn how to fix this. I tried using inches, centimeters, points, etc. They all don't work.
How would you go about solving this problem?
Moderator
Posts: 6782
Joined: 2004-05-01
Location: Brisbane
Remove the height and
Posted: Sun, 2008-10-12 22:12
Remove the height and min-height from your menu column and instead use the faux columns approach. Also remove position: absolute from your footer. As for the video, it could because you haven't specified width and height.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
newbie
Posts: 4
Joined: 2008-10-11
Location: Rochester Institute of Technology
hmm I see how that would
Posted: Sun, 2008-10-12 23:09
hmm I see how that would work but it seems like if you have to have an image to do that then CSS isn't doing it's job at all.
I was putting the absolute on the footer because i always wanted that to be at the bottom of the screen and i wanted the page to fill the entire screen. logically you would think 100% would do that but it apparently doesn't. So if you look at that website you can see what I was trying to model. Any tricks for that attempt?