|
|
Posted by Decadre on 02/27/06 05:01
Hello everyone,
I'm attempting to create my first website, and I'm also trying to learn
how to use CSS. I created a website, and have done what I consider to
already be some substantial work on it. However, I'm having a problem with
the banner and another banner type pic that I have.
On my main PC in IE, it displays about as I want it. There is some
padding around the site that I don't know why it's there. When I view the
page using Firefox, the page overflows some to the right causing a
horizontal scrollbar to appear.
On my laptop and on other PCs I've checked my site out on, the
horizontal scroll bar always appears because of the overflow.
There is a lot of code already written so I guess I'll just post my
<body> and my code for the CSS. The address of the site is www.decadre.com
BODY CODE
<div id="Masthead">
<IMG SRC="uipics/Decadre_Logo.jpg" WIDTH="100%" HEIGHT="150" BORDER="0"
ALT="">
</div>
<div id="NavBtnBck">
<IMG SRC="uipics/NavBtnBck.gif" WIDTH="100%" HEIGHT="50" BORDER="0" ALT="">
</div>
<div id="NavBtn">
<TABLE>
<TR>
<TD><A HREF="index.html"><IMG SRC="uipics/HomeDown.gif" WIDTH="125"
HEIGHT="35" BORDER="0" ALT="Home"></A></TD>
<TD><A HREF="Games.html" onMouseover="document.GameBtn.src=GameHvr.src"
onMouseout="document.GameBtn.src=GameUp.src"><IMG SRC="uipics/GameUp.gif"
WIDTH="125" HEIGHT="35" BORDER="0" NAME="GameBtn" ALT="Games"></A></TD>
<TD ><A HREF="Jokes.html" onMouseover="document.JokeBtn.src=JokeHvr.src"
onMouseout="document.JokeBtn.src=JokeUp.src"><IMG SRC="uipics/JokesUp.gif"
WIDTH="125" HEIGHT="35" BORDER="0" NAME="JokeBtn" ALT="Jokes"></A></TD>
<TD><A HREF="Pictures.html"
onMouseover="document.PicsBtn.src=PicsHvr.src"
onMouseout="document.PicsBtn.src=PicsUp.src"><IMG SRC="uipics/PicsUp.gif"
WIDTH="125" HEIGHT="35" BORDER="0" NAME="PicsBtn" ALT="Pictures"></A></TD>
<TD><A HREF="Programming.html"
onMouseover="document.ProgBtn.src=ProgHvr.src"
onMouseout="document.ProgBtn.src=ProgUp.src"><IMG SRC="uipics/ProgUp.gif"
WIDTH="125" HEIGHT="35" BORDER="0" NAME="ProgBtn"
ALT="Programming"></A></TD>
<TD><A HREF="Links.html" onMouseover="document.LinkBtn.src=LinkHvr.src"
onMouseout="document.LinkBtn.src=LinkUp.src"><IMG SRC="uipics/LinksUp.gif"
WIDTH="125" HEIGHT="35" BORDER="0" NAME="LinkBtn" ALT="Links"></A></TD>
<TD><A HREF="Misc.html" onMouseover="document.MiscBtn.src=MiscHvr.src"
onMouseout="document.MiscBtn.src=MiscUp.src"><IMG SRC="uipics/MiscUp.gif"
WIDTH="125" HEIGHT="35" BORDER="0" NAME="MiscBtn"
ALT="Credits/About"></A></TD>
</TR>
</TABLE>
</div>
<div id="NavList">
<IMG SRC="uipics/HomePage.gif" WIDTH="125" HEIGHT="125" BORDER="0"
HSPACE="0" ALT="Home Page Links">
<ul>
<li><A HREF="EQ2.html"> Games </A></li><br>
<li><A HREF="Jokes.html"> Jokes </A></li><br>
<li><A HREF="Pictures.html"> Pictures </A></li><br>
<li><A HREF="Programming.html"> Programming </A></li><br>
<li><A HREF="Links.html"> Links </A></li><br>
<li><A HREF="Misc.html"> Credits/About </A></li><br>
</ul>
</div>
<div id="Content">
JAVA CODE HERE (edited out for space)
</div>
</BODY>
CSS CODE
body{background-color: #ffffff;
}
#Content{
margin: 225px 0 0 175px;
position: absolute;
}
#Masthead{
position:absolute;
margin: 0 0 0 0;
}
#NavBtn{
position:absolute;
margin: 153 0 0 10%;
}
#NavBtnBck{
position:absolute;
margin: 150 0 0 0;
}
#NavList{
background-color: #3399FF;
border: 2px outset #000000;
height: 450px;
margin: 200px 0 0 0;
position: absolute;
width:150px;
}
[Back to original message]
|