Problem with banner

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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


<div id="Masthead">
 <IMG SRC="uipics/Decadre_Logo.jpg" WIDTH="100%" HEIGHT="150" BORDER="0"
<div id="NavBtnBck">
 <IMG SRC="uipics/NavBtnBck.gif" WIDTH="100%" HEIGHT="50" BORDER="0" ALT="">
<div id="NavBtn">
   <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"
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"
onMouseout="document.ProgBtn.src=ProgUp.src"><IMG SRC="uipics/ProgUp.gif"
WIDTH="125" HEIGHT="35" BORDER="0" NAME="ProgBtn"
   <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"
<div id="NavList">
 <IMG SRC="uipics/HomePage.gif" WIDTH="125" HEIGHT="125" BORDER="0"
HSPACE="0" ALT="Home Page Links">
  <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>
<div id="Content">
        JAVA CODE HERE (edited out for space)


body{background-color: #ffffff;

margin: 225px 0 0 175px;
position: absolute;

margin: 0 0 0 0;

margin: 153 0 0 10%;

margin: 150 0 0 0;

background-color: #3399FF;
border: 2px outset #000000;
height: 450px;
margin: 200px 0 0 0;
position: absolute;

Re: Problem with banner

Decadre wrote:

Quoted text here. Click to load it

Not answering the question, but my computer doesn't have a Java runtime and
your site displays "Java is enabled". Perhaps you mean (ECMA|Java)script?

Re: Problem with banner

oh no clue, that was code I stole and never took out when I couldn't figure
out why the buttons weren't working originally. I should yank it out, but
I've been pulling my hair out trying to get the CSS figured out for the
banner (graphics) up top. In first the last time I thought of it in a long
time was when copying an pasting it here.

Quoted text here. Click to load it

Re: Problem with banner

Decadre wrote:

Quoted text here. Click to load it

Not bad, now try it again without _any_ Java or JavaScript involved.
It's easier and better.

You don't need JavaScript for menu rollovers. Look at how to do it with
:hover and CSS instead (searching will show lots of tutorials).

Re: Problem with banner

Decadre wrote:
Quoted text here. Click to load it
  The reason for the scroll bar is because you logo image is 1280 pixels
wide. Unless the viewport is wider than that, you get a scroll bar.
  Also the horizontal menu is quite wide, about 900 pixels.
  You must be viewing your site on a 1600x1200 monitor at fullscreen to
not need any scrolling. IE6 has a scroll bar when I view your site.

  Decide on which DTD to use. You have mashed HTML and XHTML together both
in the doctype and the code. For the most consistent results across
browsers, use HTML 4.01 Strict. Drop the <?xml ...> altogether.
  " ">

  Validate your code: <
  The top header is not a masthead. You should use (and style) <h1> for a
page's primary header.
  What padding? Each browser has its own defaults for the various HTML
elements. All margins and paddings are mutable; use CSS to specify what
you want.

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Problem with banner

Thx everyone for responding, I'll try everyone's suggestion and give it a go

Quoted text here. Click to load it

Site Timeline