HTML - Vertical Menu Not Aligning In Ie7

Hello,

I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it?

I started with code something like

<div align="center">

<ul type="disc">
<li>Wine</li>
<li>Women</li>
<li>Song</li>
</ul>

</div>

This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed.

I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way?

I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot:

http://img80.imageshack.us/img80/6827/screenshotjs.png

Have a look. The lines are two pictures, they are split close to the middle.

How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side?

Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc

So I'm working on a <dl> and using this bit of code as an example:


<style type="text/css">dl{ border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; background-color:yellow;} dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; }
</style>

<dl>

<dt>first item</dt>
<dd>definition for first item in list</dd>
<dt>second item</dt>
<dd>definition for second item in list<br>
extending across more than one line</dd>
<dt>third item</dt>

<dd>definition for third item in list</dd>
</dl>

That bit works exactly like you'd expect it to. However, when I apply it to my own list I run into a problem and i can't see the problem. Here's the link to my page:

http://site.outletpccomputerrepair.c...opups/test.htm

whenever I have a second line of <dd>, the alignment messes up. I can't see what to do in order to get the <dd> elements to align properly whenever there's a second line. Please help!

Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions.

Example script:
<div style="text-align: left; position: absolute;">
<!-- Begin BidVertiser code -->
<script language="JavaScript1.1"
src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&amp;bid=341700"
type="text/javascript"></script>
<noscript><a
href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet
advertising</a></noscript>
<!-- End BidVertiser code --> </div>
<div style="text-align: center;"><a
href="http://pinkkittens.org/"><img alt="Banner"
src="http://pinkkittens.org/images/pinkkittenbannernew.png"
style="border: 0px solid ; width: 815px; height: 121px;"
align="top"></a></div>
<div id="flashcontent" style="text-align: center;"></div>
<script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script>

I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers?
Web address for better viewing pleasure is http://www.pinkkittens.org/

I have a form i am creating for a widget to put on my website but for some reason it does not align all the way to the left instead it is off center. How do i put it to the far left?
And then there is a random box that appears in the top, how do I remov this? Thank you

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <input>
</head>
<body>
<form id="form1"
 action="https://app.realeflow.com//api/contactSubmit.aspx?id=35151&amp;type=1&amp;ar=30178"
 method="post" name="form1">
  <script type="text/javascript">// <![CDATA[
function numbersonly(myfield, e, dec) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (dec && (keychar == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; }
// ]]></script>
  <div id="seller_opt" class="optin"
 style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 477px; PADDING-RIGHT: 0pt; BACKGROUND: url(http://www.ibuyhousesinsanantonio.com/wp-content/uploads/2012/01/Untitled.png) no-repeat 0pt 50%; HEIGHT: 481px; PADDING-TOP: 55px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial">
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >Name:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard_ownerName"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px; font-size-adjust: none; font-stretch: normal" name="SellerWizard$ownerName" maxlength="100">

  </div>
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >E-mail
Address:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard$ownerEmail"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px;
 font-size-adjust: none; font-stretch:
 normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerEmail" maxlength="100">

  </div>
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >Zip
Code:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard$ownerZip"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px; font-size-adjust:
 none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerZip" maxlength="15">

  </div>
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >Mobile
Phone*:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard$ownerMobilePhone"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px 0px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px; font-size-adjust: none;
 font-stretch: normal"
 onkeypress="return numbersonly(this, event)" name="SellerWizard$ownerMobilePhone" maxlength="25">
&nbsp;
  </div>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input
 id="SellerWizard_FinishNavigationTemplateContainerID_FinishButton"
 class="submit" style="MARGIN: 0pt 0pt 0pt 25px"
 onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("SellerWizard$FinishNavigationTemplateContainerID$FinishButton", "", true, "", "", false, false))'
 name="SellerWizard$FinishNavigationTemplateContainerID$FinishButton"
 value="Finish"
 src="http://api.ning.com/files/2FjYylCa-7----tgtm1C84N-wASg37E3PmRpOeW5GET9uz4-SqDzfp9Xn7pslOJrglrucDsLut3pJXluZymZKd-mGJj0vi26/submitbutton.jpg"
 type="image"><br>
*Optional
  </div>
  </div>
</form>
<br>
</body>
</html>

You can see where it doesnt align on the website and another view of it not being where it is suppose to be in an html editor, thanks for any help!

Hi All,

I Though i had all this figured out,

But unfortunatly thats not the case im actually beginning to pull my hair out now

All i want is three buttons in a line with a margin about seperating them from the web form.

But i get the attached

Heres my HTML

HTML Code:

        <div class="leftColumn">
            <asp:Label ID="lblUserRef" runat="server" CssClass="StandardLabel" Text="User Ref"
                Style="margin-left: -7px; margin-right: 7px;"></asp:Label>
            <asp:TextBox ID="txtUserReference" Style="margin-left: 2px" runat="server" ToolTip="Please enter a User reference"
                CssClass="ShortTextBox"></asp:TextBox>
        </div>
        <div class="SmallSpace">
        </div>
    </div>
    <div class="ButtonContainerDiv">
        <div class="ButtonHolder">
            <a href="#" class="CancelButton">Cancel</a> <a href="#" class="RaiseButton">Raise</a>
            <a href="#" class="SaveButton">Save</a>
        </div>
    </div>
</asp:Content>

The small space has a pixel height of about 3.

My Css for the buttons.

HTML Code:

.ButtonContainerDiv
{
 margin-top:30px;
 width:760px;
 height: 100px;
 margin-left:auto;
 margin-right: auto; 
}

.ButtonHolder
{
 margin-left:auto;
 margin-right: auto;
 margin-bottom:auto;
 margin-top:auto;   
}

/* CANCEL BUTTON */

.CancelButton 
{
	-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ad0034), color-stop(1, #db0042) );
	background:-moz-linear-gradient( center top, #ad0034 5%, #db0042 100% );
	background-color:#ad0034;
	-moz-border-radius:12px;
	border:1px solid #616161;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
	padding:8px 40px;
	text-decoration:none;
	float: left;

}
.CancelButton:hover 
{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #db0042), color-stop(1, #ad0034) );
	background:-moz-linear-gradient( center top, #db0042 5%, #ad0034 100% );
	background-color:#db0042;
}
.CancelButton:active 
{
	position:relative;

}

/* SAVE BUTTON */

.SaveButton
{
	-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1b214), color-stop(1, #d19602) );
	background:-moz-linear-gradient( center top, #f1b214 5%, #d19602 100% );
	background-color:#f1b214;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border:1px solid #616161;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
	padding:8px 40px;
	text-decoration:none;

	}

.SaveButton:hover 
{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d19602), color-stop(1, #f1b214) );
	background:-moz-linear-gradient( center top, #d19602 5%, #f1b214 100% );
	background-color:#d19602;
}

.SaveButton:active 
{
	position:relative;

}

/* RAISE BUTTON */

.RaiseButton
{
	-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #549228), color-stop(1, #377508) );
	background:-moz-linear-gradient( center top, #549228 5%, #377508 100% );
	background-color:#549228;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border:1px solid #616161;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
	padding:8px 40px;
	text-decoration:none;
	float:right;

}

.RaiseButton:hover 
{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #377508), color-stop(1, #549228) );
	background:-moz-linear-gradient( center top, #377508 5%, #549228 100% );
	background-color:#377508;
}
.RaiseButton:active 
{
	position:relative;

}

Please someone help me

Hey All,

So I have this frustrating situation illustrated by this screeny: www.kiddyjunction.ca/images/pic.jpg

The yellow box (which is an iframe) aligns to center itself between those beige flash tabs on the left, and the other side of the white box, which is PERFECT. However, the logo, represented by the red box, aligns itself to be in the center of the white box, instead of between the edge and the flash material, despite all being in the same container. How do I get the logo to align over the center of the iframe (yellow box)?

Thanks!

I've been working in Flash for too long now or something, a little bit rusty with HTML. This recent website I've been working on for a friends restaurant is giving me some trouble. Im working without dreamweaver or imageready or anything like that, just code. And for some reason I cant get the table to fully line up. I know its probably going to end up being such a minor detail that Im missing, but ive spent a while now with no luck.

Hoping someone can view this code and tell me what im not seeing:


Http://www.lindesignz.com/mazzeh


(p.s. I know I broke it up more than it needs to be. its for future graphic edits.)

Hi, I seem to have lost the code I had for aligning text. I know it's simple, can someone help me. Take a look at my newsletter at http://www.ilovejesus.com/lot/awesomebks/news.shtml. You will note the text is not lined up correctly with the book covers. I don't want it to be completely lined up like a newspaper, just look a little better than it does. Thanks.

Hey guys, i have 3 tables that I want to align like
1 2 3
at the moment they are
1
2
3
any ideas, here is the code i have

HTML Code:

<form action="process.php" method="POST" class="style1">
<table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3">

<tr>
   <td>Xbox 360 GT:</td>

</tr>
<tr>
   <td><input type="text" name="x360gt" value="x360" /></td>
   <td></td>
</tr>

<tr><td colspan="2" align="right">
<input type="hidden" name="subedit1" value="1">
<input type="submit" value="Edit Gamertag"></td></tr>

</table>
</form>

<br>
<form action="process.php" method="POST" class="style1">

<table  width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3">

<tr>
   <td>PS3 GT:</td>
</tr>
<tr>
   <td><input type="text" name="ps3gt" value="ps3" /></td>
   <td></td>
</tr>

<tr><td colspan="2" align="right">
<input type="hidden" name="subedit2" value="1">
<input type="submit" value="Edit Gamertag"></td></tr>

</table>
</form>
<br>
<form action="process.php" method="POST" class="style1">
<table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3">

<tr>
   <td>PC GT:</td>
</tr>
<tr>
   <td><input type="text" name="pcgt" value="pc" /></td>
   <td></td>

</tr>
<tr><td colspan="2" align="right">
<input type="hidden" name="subedit3" value="1">
<input type="submit" value="Edit Gamertag"></td></tr>

</table>
</form>

Could anyone help me out please

I have a pagination sample that I'm working on and I need a little bit of help getting some links to line up correctly. There is a image link (prev) to start off followed by a bunch of normal text links and capped off by another image link (next). As it stands the text links that are in between the two image links are vertically aligning to the bottom of those images. No matter what I try I can't get them to align to the vertical center. Any ideas or tips would be great.

You can view my page at http://mptp.o3world.com/pagination_test.html

And here is my page code.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
body { margin: 0; padding: 0; font: 11px Verdana, Arial, Helvetica, sans-serif; }
#search_pagination p { padding: 16px 0; }
#search_pagination p a { margin-left: 1px; padding: 0 4px; color: #449d02; border: 1px solid #449d02; text-decoration: none; }
#search_pagination p a:hover { background: #449d02; color: #fff; }
#search_pagination p a.button { margin: 0; padding: 0; border: none; }
</style>
</head>
<body>
<div id="search_pagination"><p><a href="##" class="button"><img src="images/button_prev.png" alt="Previous" width="69" height="30" border="0" /></a> <a href="##">1</a> <a href="##">2</a> <a href="##">3</a> <a href="##">4</a> <a href="##">5</a> <a href="##">6</a> <a href="##">7</a> <a href="##">8</a> <span>...</span> <a href="##">14</a> <a href="##">15</a> <a href="##" class="button"><img src="images/button_next.png" alt="Next" width="70" height="30" border="0" /></a></p></div>
</body>
</html>

I have this Web page I'm working on and I'm not sure on how to get the overlayed images to line up 'automatically'. Here is the code I have:
<div id="main-copy">
<h3>NorthEast Regional Radar</h3>

<div id="topo" style="Z-INDEX: 1; LEFT: 0px; POSITION: relative; TOP: 0px" >

<img src="http://www.srh.noaa.gov/ridge/Overlays/Topo/Short/box_Topo_Short.jpg" border="2" alt="Topo Base" ></img>
</div>
<div id="radar" style="Z-INDEX: 2; LEFT: 0px; POSITION: relative; TOP: -555px">
<img src="http://www.srh.noaa.gov/ridge/RadarImg/N0R/box_N0R_0.gif" border="2" alt="Radar Image"></img>
</div>
<div id="county" style="Z-INDEX: 3; LEFT: 0px; POSITION: relative; TOP:-1113px">
<img src="http://www.srh.noaa.gov/ridge/Overlays/County/Short/box_County_Short.gif" border="2" alt="State Borders" ></img>
</div>
<div id="legend" style="Z-INDEX: 4; LEFT: 0px; POSITION: relative; TOP: -1668px">

<img src="http://www.srh.noaa.gov/ridge/Legend/N0R/OKX_N0R_Legend_0.gif" border="2" alt="Legend Overlay"></img>
</div>
</div>

You can see I've attempted to get these to line up by specifying a "-" TOP offset. Doesn't work in all cases. How do I fix this the proper way ?? Thanks.

Hi all, im sure this is an easy one for alot of you in here but here goes....

Ive got a table which is say 40 pxls high, ive split it into 2 columns and on the left I have text links and on the right im trying to put an H1 tag. Anyway when I convert my text into an H1 tag its like its been top aligned in the table and obviously I want it to sit vertically in the centre.

Ive tried changing alignment options in dreamweaver with no effect. The text links in the left hand column display normally also.

Thanks!

Gah, I've been sitting here trying to do this for hours and my head is utterly boggled!

This is the kind of thing I want, I've tried aligning the text within the table to the bottom and then wrapping it around the image but obviously I'm just a huge, epic failure. Eck.

(I don't know if you can catch the longshore-drift of my beautiful art--oh, how I kid you --but the black box represents an image and the lines are text!)

Any help would be much appreciated! Thanks lovelies.