Log in

View Full Version : Why Wont This Work?!


Jas
06-09-2007, 07:52 PM
I am re-formatting the Sweets & Treats website, due to some comments on the crumby source code (I blame Front Page) so I am diong it all by hand. BUT THERE IS A PROBLEM . . .

This works in IE, but not FF. It's my first CSS page, so there could well be a stupid mistake. There are three pages:

SnT.css :


body{
background-color: #000000;
text-align: center;
min-width: 700;
}div#container{
width: 708;
margin-right: auto;
margin-left: auto;
background-color: #9B0000;
text-align: left;
border-width: 4;
border-style: outset;
border-color: #9B0000;
}div#menupic{
float: left;
width: 120;
height: 65;
background-color: #9B0000;
}div#head{
font-size: 60;
padding: 0;
font-weight: normal;
height: 65;
position: relative;
top: 15;
overflow: hidden;
}div#menu{
width: 120;
float: left;
text-align: center;
}div#text{
float: left;
background-color: #FFFFFF;
width: 575;
height: 600;
}div#pic{
position: relative;
text-align: left;
float: left;
background-color: #9B0000;
width: 120;
}div#footer{
float: left;
width: 575;
} .picture {

}.menuoption{
width: 100;
height: 20;
background-color: #FFFF9D;
text-decoration: none;
margin-top: 3;
margin-bottom: 3;
color: #000000;
}


menu.js :


function SHOWPIC(pic){
pic = (pic + 'b');
document.getElementById(pic).style.display = 'block';
} function HIDEPIC(pic){
pic = (pic + 'b');
document.getElementById(pic).style.display = 'none';
}

function pics(){
document.write("<div id=1b class=picture style='display: none;'>HOME</div>");
document.write("<div id=2b class=picture style='display: none;'>ABOUT US</div>");
document.write("<div id=3b class=picture style='display: none;'>PRODUCTS</div>");
document.write("<div id=4b class=picture style='display: none;'>PARTIES</div>");
document.write("<div id=5b class=picture style='display: none;'>GALLERY</div>");
document.write("<div id=6b class=picture style='display: none;'>CONTACT</div>");
}function menubuttons(){
document.write("<a href='index.htm' class=menuoption id=1 onmouseover=SHOWPIC(id) onmouseout=HIDEPIC(id)><b>HOME</b></a><br>");
document.write("<a href='aboutus.htm' class=menuoption id=2 onmouseover=SHOWPIC(id) onmouseout=HIDEPIC(id)><b>ABOUT US</b></a><br>");
document.write("<a href='products.htm' class=menuoption id=3 onmouseover=SHOWPIC(id) onmouseout=HIDEPIC(id)><b>PRODUCTS</b></a><br>");
document.write("<a href='parties.htm' class=menuoption id=4 onmouseover=SHOWPIC(id) onmouseout=HIDEPIC(id)><b>PARTIES</b></a><br>");
document.write("<a href='gallery.htm' class=menuoption id=5 onmouseover=SHOWPIC(id) onmouseout=HIDEPIC(id)><b>GALLERY</b></a><br>");
document.write("<a href='contact.htm' class=menuoption id=6 onmouseover=SHOWPIC(id) onmouseout=HIDEPIC(id)><b>CONTACT</b></a><br>");
}


layout.htm


<html>
<head>
<title>www.Sweets-n-Treats.com</title>
<meta http-equiv='Keywords' content='candy, icecream, sweets & treats, food, parties'>

<link href='SnT.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='menu.js'></script>
</head>
<body>

<div id=container>
<div id=menupic>
<script type='text/javascript'>pics()</script>
</div>

<div id=head>
<font face='vizier heavy'><center>Sweets & Treats</center></font>
</div>

<div id=menu>
<br><br><br><br><br><br>

<script type='text/javascript'>menubuttons()</script>

</div>

<div id=text><br>
TEXT
</div>

<div id=pic>
picture here
</div>

<div id=footer>
<center> Copyright &copy; 2007 by Sweets & Treats | Website by Jason M. Mace </center>
</div>
</div>

</body>
</html>


(Ignore the bad formatting on the JS file for now . . .)

The background is suppose to go all the way down and the menu buttons are suppose to be the same size. . .
dtuch_master
06-09-2007, 08:18 PM
Looks the same for me in both FF and IE
Jas
06-09-2007, 08:25 PM
What? Are you using FF 2 and IE7? (Should have said that)
dtuch_master
06-10-2007, 04:41 AM
Yeah, I am using FF 2 and IE 7
techno_race
06-10-2007, 06:55 PM
????? That's very strange.
As for the CSS, under body, I've never heard of min-width.
Jas
06-10-2007, 07:29 PM
Weird that you are using FF2 and IE7 and it's the same. In any case, I used a table to make it work in FF. If anyone knows why the CSS isn't working for me, let me know.


????? That's very strange.
As for the CSS, under body, I've never heard of min-width.

I read that some Web Browsers (Netscape?) mis-interpret the div's and cut them off or something. It's there as a precaution . . .
alexjewell
06-10-2007, 09:04 PM
min-width is a css property to set the minimum width of something. It really doesn't work well in IE, but there are some ways to get around it.