Help - Search - Members - Calendar
Full Version: Positioning and other problems
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
tharpdevenport
Oct 23 2007, 05:58 PM
Here is the code:

CODE
<script language="javascript" src="http://banner.0catch.com/cgi-bin/popup_mainsite.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>hewhohasnoname</TITLE>
<NOBANNER>

<STYLE type="text/css">
BODY { scrollbar-arrow-color: blue; scrollbar-Track-Color: 87CEFA; margin: 0px; background-image: url(_webimages/clouds2.gif); PADDING: 0px; Margin: 0px; }

#SOL { BORDER: 0px; PADDING: 0px; POSITION: relative; }
#SOL A { BORDER: 0px; COLOR: ff9900; text-align: center; font-weight: bold; text-decoration: none; PADDING-TOP: 35%; }
#SOL A:hover { COLOR: yellow; font-weight: bold; }
#BB { BACKGROUND-IMAGE: url(_webimages/BlueBallGIF.gif); HEIGHT: 66px; WIDTH: 65px; font-size: 20px; letter-spacing: 5px; LEFT: 0px; POSITION: absolute; background-repeat: no-repeat; text-indent: 10px; }
#O { font-weight: bold; COLOR: ff9900; }

#SCROLL { Border-left: #DCDCDC 2px solid; Border-top: #DCDCDC 2px solid; Border-bottom: #DCDCDC 2px solid; Border-right: 0px; display: block; Width: 100%; Height: 200px; Margin: 0px; Padding: 10px; background: f5f5f5; color: black;  overflow: auto; scrollbar-arrow-color:#000000; scrollbar-base-color:#C0C0C0; scrollbar-3dlight-color:#000000; scrollbar-darkshadow-color:#000000; scrollbar-highlight-color: silver; scrollbar-shadow-color:#f5f5f5; font-family: times new roman; Font-size: 18px; text-wrap: wrap; }

#P { PADDING: 0px; }
.BAR { background-color: #f5f5f5; Height: 30px; }
.C1 { background-image: url(images/LCTop.gif); background-repeat: no-repeat; }
.C2 { background-image: url(images/LCBot.gif); background-repeat: no-repeat; }</STYLE>

<META http-equiv="Content-Type" Content="text/html; charset=ISO-8859-1">
</HEAD>
<BODY>


<IMG style="LEFT: 130px; POSITION: absolute; TOP: 20px" src="/images/hewhohasnonameName.gif" border="0">

<DIV id=SOL><A id="BB" style="LEFT: 60px; TOP: 105px" href="/hewhohasnonamenews.html">News</A></DIV>
<DIV id="SOL"><A id="BB" style="LEFT: 40px; TOP: 178px" href="/hewhohasnonameCDs.html">CDs</A></DIV>
<DIV id=SOL><A id="BB" style="LEFT: 30px; TOP: 250px" href="/hewhohasnonamenews.html">Resume</A></DIV>
<DIV id=SOL><A id="BB" style="LEFT: 40px; TOP: 323px" href="/hewhohasnonameaudio.html">Audio</A></DIV>
<DIV id="SOL"><A id="BB" style="LEFT: 60px; TOP: 397px" href="mailto:lesley@whateveragency.com" A>Contact</A></DIV>

<P align="right">
<TABLE style="Position: absolute; Top: 25%; Right: 0px; Width: 650px" cellSpacing="0" cellPadding="0" border="0">
<TBODY>
<TR>
<TD class="C1"></TD>
<TD class="BAR"></TD></TR>
<TR>
<TD width="30" bgcolor="#f5f5f5"></TD>
<TD><DIV id="SCROLL">
<SPAN style="FONT-WEIGHT: bold; COLOR: #ff9900; TEXT-DECORATION: underline overline">Biography&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SPAN> <BR>
<BR>
&nbsp;&nbsp;&nbsp;&nbsp;So and so was born the day before yesterday...
<BR>
<BR>
<UL type="circle">
<LI>Stuff</LI></UL>
</DIV></TD></TR>
<TR>
<TD class="C2"></TD>
<TD class="BAR"></TD></TR>
</TBODY></TABLE>
</P>


</BODY>
</HTML>



There are five "blue balls" positioned on the left in such a way where it looks like they areorbiting a big circle (that isn't there).

I wanted the same for another page, except they are on hte right, in a mirror reflection, but it's not working:

CODE

<script language="javascript" src="http://banner.0catch.com/cgi-bin/popup_mainsite.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>hewhohasnoname's Audio Samples</TITLE>
<NOBANNER>

<STYLE type="text/css">
#SOL { BORDER: 0px; PADDING: 0px; POSITION: relative; }
#SOL A { BORDER: 0px; COLOR: ff6347; text-align: right; font-weight: bold; text-decoration: none; PADDING-TOP: 35%; }
#SOL A:hover { COLOR: yellow; font-weight: bold; }

.BB { BACKGROUND-IMAGE: url(_webimages/BlueBallGIF.gif); HEIGHT: 66px; WIDTH: 65px; Font-size: 20px; Letter-spacing: 5px; POSITION: absolute; RIGHT: 0px; background-repeat: no-repeat; Text-indent: 10px; }

#O { font-weight: bold; COLOR: ff6347; }

#SCROLL { Display: block; Position: absolute; LEFT: 0px; Bottom: 0px; Width: 620px; Height: 370px; Margin: 0px; Padding: 20px; Background: f5f5f5; Color: inherit;  overflow: auto; Border: #DCDCDC 2px solid; scrollbar-arrow-color:#000000; scrollbar-base-color:#C0C0C0; scrollbar-3dlight-color:#000000; scrollbar-darkshadow-color:#000000; scrollbar-highlight-color: silver; scrollbar-shadow-color:#f5f5f5; font-family: times new roman; Font-size: 18px; text-wrap: wrap; }

BODY { scrollbar-arrow-color: blue; scrollbar-Track-Color: 87CEFA; Margin: 0px; background-image: url(_webimages/clouds2.gif); PADDING: 0px; }
#P { PADDING: 0px; }

.BAR { background-color: #f5f5f5; Height: 30px; }
.C3 { background-image: url(images/RCTop.gif); background-repeat: no-repeat; }</STYLE>

<META http-equiv="Content-Type" Content="text/html; charset=ISO-8859-1">
</HEAD>
<BODY>


<IMG style="LEFT: 130px; POSITION: absolute; TOP: 20px" src="/images/hewhohasnonameAudioLOGO.gif" border="0">

<DIV id="SOL"><A class="BB" style="RIGHT: 60px; TOP: 105px" href="/hewhohasnonamenews.html">News</A></DIV>
<DIV id="SOL"><A class="BB" style="RIGHT: 40px; TOP: 178px" href="/hewhohasnonameCDs.html">CDs</A></DIV>
<DIV id=SOL><A class="BB" style="Right: 30px; TOP: 250px" href="/hewhohasnonamenews.html">Resume</A></DIV>
<DIV id="SOL"><A class="BB" style="Right: 40px; TOP: 323px" href="/hewhohasnonameaudio.html">Audio</A></DIV>
<DIV id="SOL"><A class="BB" style="RIGHT: 60px; TOP: 397px" href="mailto:lesley@whateveragency.com" A>Contact</A></DIV>


<TABLE style="Position: absolute; Bottom: 0px; Left: 0px; Width: 650px; Height: 400px" cellSpacing="0" cellPadding="0" border="0">
<TBODY>
<TR>
<TD class="BAR"></TD>
<TD class="C3"></TD></TR>
<TR>
<TD><DIV id="SCROLL">
<SPAN style="FONT-WEIGHT: bold; COLOR: #ff9900; TEXT-DECORATION: underline overline">Biography&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SPAN> <BR>
<BR>
&nbsp;&nbsp;&nbsp;&nbsp; Based in Los Angeles,&nbsp; <SPAN id="O">hewhohasnoname</SPAN>&nbsp;has toiled in the film and TV business for many years, primarily behind the scenes, as composer, orchestrator, arranger, and conductor.&nbsp; He has orchestrated for such composers as:
<BR>
<BR>
<UL type="circle">
<LI>Your mama
<BR>
<BR>
<SPAN id="O">ORCHESTRATIONS</SPAN>
<LI>Sure.</LI></UL>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN id="O">hewhohasnoname</SPAN> composed the score for the upcoming movie:&nbsp; blank.</DIV></TD>
<TD width="30" bgcolor="#f5f5f5"></TD></TR>
<TR>
<TD colspan="2" class="BAR"></TD></TR>
</TBODY></TABLE>

</BODY>
</HTML>



There was a couple other problems, on other pages, but I can't recall them; will post them later.
tharpdevenport
Nov 3 2007, 02:08 PM
Anyone?
Darin McGrew
Nov 3 2007, 03:38 PM
Can you provide the URL (address) of a document that demonstrates the problem?
tharpdevenport
Nov 6 2007, 03:41 PM
Sent a PM as I want to keep the page private.
tharpdevenport
Dec 1 2007, 02:21 PM
Anyone?
Darin McGrew
Dec 1 2007, 03:19 PM
Do you still want to keep the page private?

Do you still want to use a hosting provider that breaks your markup, so your page triggers quirks mode?

After deleting the script at the top (added by your hosting provider) and deleting the doctype declaration (you're nowhere near using Strict HTML), I still got a number of errors in your markup. For one thing, id attribute values must be unique within a given document.

You also have a number of CSS errors. And you're using position:absolute which introduces its own problems.
tharpdevenport
Dec 4 2007, 02:19 PM
Yes, want to keep it private still.

I mainly use the 150m.com provider because it's name is short (none of that long bravenet.com stuff in the site address), and I know my way around it quickly, plus ... as far as I know all free sites have pop ups.

Damn, I forgot to clear up the id/class thing; I meant to fix that, but forgot. Did it now.


The DOCTYPES all look pretty much the same to me, when I was reading a page with differet ones; only certain ones that I knew for a fact I wasn't using code from, I knew not to use, but with my knowledge of them, they all blend together. I have no clue on how to pick the right one.


I use position: absolute because I don't recall reading anything about it being wrong to use, and if I use relative, it will put them in the wrong spots.
Darin McGrew
Dec 4 2007, 02:48 PM
QUOTE
The DOCTYPES all look pretty much the same to me, when I was reading a page with differet ones; only certain ones that I knew for a fact I wasn't using code from, I knew not to use, but with my knowledge of them, they all blend together. I have no clue on how to pick the right one.
There are two main consumers of doctype declarations: validators and browsers. Your hosting provider adds a script element before the doctype declaration, which prevents both validators and browsers from using it. You may as well remove it. If you remove it, then our validator will use HTML 4.01 Transitional by default, which is probably the most appropriate choice given that you aren't ready to move to a Strict DTD.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2013 Invision Power Services, Inc.