I have the following code:
index.html
<HTML>
<HEAD>
<TITLE>My App</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>
<div id="logo"><img src="logo.jpg" /></div>
<div id="menu">
<FORM METHOD="LINK" ACTION="new.php">
<INPUT TYPE="submit" VALUE="Create New Entry">
</FORM>
<FORM METHOD="LINK" ACTION="viewall.php">
<INPUT TYPE="submit" VALUE="View All Entries">
</FORM>
<FORM METHOD="LINK" ACTION="list.php">
<INPUT TYPE="submit" VALUE="Generate Mailing List">
</FORM>
</div>
<div id="search">
<form action="search.php" method="post">
Search By First or Last Name:
<input type="text" name="term" />
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</BODY>
</HTML>
and
style.css
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
div#logo {
position:absolute;
width:290px;
height: 200px;
top: 0px;
left:0px;
background-color: black;
}
div#menu {
position: relative;
width: 150px;
height: 150px;
top: 20px;
left: 140px;
background-color: black;
}
div#search {
position: relative;
width: 265px;
left:25px;
clear: both;
color: white;
background-color: black;
}
It looks fine when I view in Safari, but when I view in FireFox, Chrome, or Opera the image in disappears. It’s gone completely in Chrome and Opera, and in FireFox it shows a broken link icon. I know my use of CSS here is not entirely correct, or even best practices, but I still can’t figure out why the image doesn’t show up? (And what’s more, why FireFox shows the broken icon)
file was named .png.jpg, so it didn’t show up…newb mistake