Problem with banner

D

Decadre

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;
}
 
J

Jim Higson

Decadre said:
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
Click to expand...

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?
 
D

Decadre

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.
 
A

Andy Dingley

Decadre said:
I'm attempting to create my first website, and I'm also trying to learn
how to use CSS.
Click to expand...

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).
 
J

Jim Moe

Decadre said:
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.
Click to expand...
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Validate your code: <http://validator.w3.org/>
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.
 
D

Decadre

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Working on mobile css menu with plenty of frustration! 2
Help with my responsive home page 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Need help with code on website (noob) 2
Help with code 0
Buttons lining up 1
menu bar and banner responsive issues....any guidance is appreciated! 0

Members online

Total: 38 (members: 1, guests: 37)
Robots: 199

Forum statistics

Threads
473,764
Messages
2,569,565
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top