Menu
hey,
my page doesnt look right when its in firefox. it brings some of my navbar down onto the page. look at it in IE then Firefox and see the diffrence
i think its a problem with my css code, but im not sure. someone help me.
THE SITE IS THE FIRST ONE IN MY SIGNATURE
HTML:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type” />
<title>Maniac Studios</title>
<link rel=”stylesheet” href=”mainstyle.css” />
</head>
<body>
<div id=”body”>
<!–Banner–>
<img class=”banner” alt=”banner” src=”banner.PNG” />
<!–Navigation–>
<!–I put all of the opening <li> tags at the end of line of code above it to keep from spaces displaying–>
<div id=”navbar”>
<ul class=”navbar”>
<li><a href=”home.html”><img alt=”home button” src=”home_button.PNG” /></a></li><li>
<a href=”about.html”><img alt=”about button” src=”about_button.PNG” /></a></li><li>
<a href=”services.html”><img alt=”services button” src=”services_button.PNG” /></a></li><li>
<a href=”portfolio.html”><img alt=”portfolio button” src=”portfolio_button.PNG” /></a></li><li>
<a href=”contact.html”><img alt=”contact button” src=”contact_button.PNG” /></a></li><li>
<img alt=”” src=”blanknavbar.PNG” /></li>
</ul>
</div>
<!–Heading for design of the week–>
<img class=”designofweek” src=”design_of_week_bar.PNG” alt=”design_of_week_bar.PNG” />
<!–Table For design of the week–>
<table class=”designofweek”>
<tbody>
<tr>
<td>
<img style=”width: 214px; height: 214px;” src=”3diconarrowbutton.GIF” alt=”3d%20icon%20arrow%20button.GIF” />Simple Downloading
button origanlly made for PSP Unlimited
but I wont use it.
(Made with GIMP)</td>
</tr>
</tbody>
</table>
<div id=”content”>
<h1>Maniac Studios…</h1>
<p>Maniac Studios is a high tech web design/developer service. We offer professionally made websites, with graphics at a very small cost.
Whether you want a full out website with everything web pages should have and more, or if you are just looking to tell people
about your business, we are what you need. Every tool we use is some type of open source program. We believe that professional, fresh looking websites can be achieved without spending hundreds and thousands of dollars out of the designers pockets or the customers.</p>
</div>
<!–Copyright bar and Maniac Studios pic–>
<img class=”footer_copyright” style=”width: 759px; height: 29px;” src=”copyright_bar.PNG” alt=”copyright_bar.GIF” />
<img class=”footer_maniac” style=”width: 174px; height: 77px;” src=”maniacstudios.gif” alt=”maniacstudios.gif” />
<!– Valid css and xhtml buttons–>
<a class=”validfooter” href=”http://validator.w3.org/check?uri=referer”><img src=”http://www.w3.org/Icons/valid-xhtml10-blue” alt=”Valid XHTML 1.0 Transitional” height=”31″ width=”88″ /></a>
<a class=”validfooter1″ href=”http://jigsaw.w3.org/css-validator/validator?uri=http://home.comcast.net/~motormaniac/mainstyle.css”>
<img src=”http://www.w3.org/Icons/valid-css-blue” alt=”Valid CSS!” /></a>
</div>
</body>
</html>
CSS:
[CODE]
body {
font-family: verdana,Times,serif;
color: #0E1D2D;
font-weight: normal;
font-size: 14px;
color: #356AA0;
text-align: center; height: 700px;
background-color:white;
}
banner {
font-family: verdana,Times,serif;
color: silver;
font-weight: normal;
font-size: 14px;
}
h1 {
font-weight: normal;
font-style: normal;
text-decoration: none;
background-color: transparent;
font-family: verdana,times,monospace;
color: #356AA0;
font-size: 24px;
text-align: center;
text-transform: none;
}
h3 { font-family: verdana,times,monospace;
color: #356AA0;
text-decoration: underline;
font-size: 18px;
font-weight: normal;
}
a {
color: blue;
text-decoration:none;
}
a:visited {
color: blue;
text-decoration:none;
}
a:hover {
color: red;
text-decoration: none;
}
img {
border:none;
}
img.logo_maniac {
border:none;
}
ul {
list-style-type:none;
}
img.footer_copyright {
position:absolute;
top:900px;
left:80px;
}
img.footer_maniac {
position:absolute;
top:990px;
left:350px;
}
a.validfooter {
position:absolute;
top:990px;
left:550px;
}
a.validfooter1 {
position:absolute;
top:1020px;
left:550px;
}
img.designofweek {
position: absolute;
right: 0px;
top: 355px;
}
table.designofweek {
position: absolute;
right: 0px;
top: 380px;
width:359px;
height:310px;
}
img.blog {
position: absolute;
left: 490px;
top: 300px;
}
table.updates {
position: absolute;
left: 530px;
top: 355px;
}
a.affilated1 {
color: #EBD88B;
text-decoration:none;
position:absolute;
left: 30px;
border: none;
}
a.affilated2 {
color: #EBD88B;
text-decoration:none;
position:absolute;
left: 30px;
border: none;
}
/*NAVBAR STYLE*/
ul.navbar {
padding: 0px;
margin: 0;
width: 0;
display:inline;
border: none;
}
ul.navbar li {
margin: 0px;
padding: 0px;
text-align: left;
display: inline;
border: none;
}
ul.navbar a {
color: silver;
padding: 0;
margin: 0;
width: 0;
}
div {
background-color: transparent;
border:0; }
#navbar {
width: 900px;
height: 48px;
margin: 0;
padding: 0px;
z-index: 1;
background-color:#356AA0;
position:absolute;
top:146px;
left:0px;
}
#body {
width: 900px;
height: 1080px;
margin: 0;
padding: 0px;
background-color:#B9D0E7;
position:absolute;
top:35px;
left:49px;
}
#content {
width: 400px;
height: 600px;
margin: 0;
padding: 0px;
position:absolute;
top:300px;
left:20px;
text-align:justify;
}
#content_right {
width: 250px;
height: 600px;
margin: 0;
padding: 0px;
position:absolute;
top:300px;
right:20px;
text-align:justify;
}