HTML - Issue In Page Alignment

I want to display label and input element like below,

Code:

                user name: <text box>
            email address: <text box>
                                   <some lengthy text>
confirm email address: <text box>

I don't want to use table. All the colons at the end of the label should align vertically.
All the text boxes also must align vertically.
<some lengthy text> must be right aligned along with text boxes. this may wrap to multiple lines. wrapped text also right aligned along with text boxes.
please help me. thanks.

Hi all, yes it's me again.

Just a quick problem I'm trying to solve.

I have a script to add tabs to my site, but I can't get the text aligned in the middle of the tabs.

I realize this could be solved by having the text actually on the image, but I don't want all my webspace taken up buy a couple hundred images, when one would work.

I have attached the scripting for the tabs along with a preview of how it currently looks.

Anyone got any ideas?

Regards

Jake

I am having an alignment issue with a row of images. The site is located he http://www.teewala.com/teewala

I cannot figure out why the three images are shifted slightly to the right. The code is very simple, so I figure the solution should be simple. Any help is greatly appreciated.

Thanks!

I am having a problem with content being misaligned in Firefox. If you look at the page in IE it looks fine. But several elements are misaligned in Firefox. If you look at the site www.displaypoints.com/promotions (currently displaying as http://69.89.31.104/~displayp/promotions.html) in IE and then Firefox you can see the issue. This is happening on several pages including this one so I'm sure it's a coding issue but I can't figure it out. Any help would be appreciated.

http://www.jakobmetzger.com/misc/sites/kindling/

In IE the only pages that render correctly where the top blue line that goes across the screen is the forums page. the other pages have a black space to the right of the menu. Any ideas?

I am trying to left-align this table and I cannot figure out why it will not behave. Mind you, the problem is only occurring in IE7 - IE8 and Firefox are fine. Please help?


Code:

<table summary="main content panel" align="left" bgcolor="#ffffff" border="0" cellpadding="0" width="535" height="200">
<tbody>
<tr align="left">
<td align="left" width="15%"><img src="/images/369/images/content_image.png"><br><br><br><br></td>
<td style="background: transparent url(/panel.png) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; vertical-align: middle; text-align: center;" align="left" width="70%"><h2 style="font-family: Arial;"><font color="#0088ce" size="6">Project Initiative</font></h2><h1 style="font-family: Arial; text-align: center;"><font size="3" face="Arial">TEXT HERE</i>.</font></h1><br><br></td>
</tr></tbody></table>

N00b here, brought forth out of desperation and the fact that none of my coder-friends have a clue whats causing this.

Currently coding my first website ( by hand in notepad. Awesome learning... thinger ... not so great on the troubleshooting.)

So- can anyone help me fix why this site looks fine on IE, but the BG doesn't quite align in firefox?

Would be MUCHLY appreciated!

When you go to my site www.sforu.com with IE 6 or IE7 the picture is all misaligned,
So could you take a look and let me know whats wrong with it, because it's driving me crazy


Thank you

Hello, I realize several threads have already been posted and that many of you dislike tables. I am having, however, a table issue that I think is only solvable through HTML adjustment of said table. In FF and IE8, my homepage looks excellent, just how I've laid it out. However, in earlier versions of IE (which the majority of my demographic still use), the layout of the table is askew. The remainder of my page is made up of various Flash movies, and I have tested that these are not the cause of the layout issue. The 2-cell table I have is being thrown for a loop (laying itself out to the right and stretching the site), and I'm not sure what the cause of it is. It needs to be left-aligned; below is my code:

Code:

<table summary="main content panel" align="left" bgcolor="#ffffff" width="535">
<tbody>
<tr>
<td align="left" width="15%"><img src="/images/369/images/content_image.png"></td>
<td style="background: transparent url(/images/369/images/panel.png) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; vertical-align: middle; text-align: center;" align="left" width="70%"><h2 style="font-family: Arial;"><font color="#0088ce" size="6">Project Initiative</font></h2><h1 style="font-family: Arial; text-align: center;"><font size="3" face="Arial">Valmont is currently conducting research on producing rice under mechanized irrigation in an effort to conserve water and energy, and increase profitability by bringing land into production, an initiative appropriately titled <i>Circles for Rice</i>.</font></h1></td>
</tr></tbody></table>

I'm unsure what the "scroll 0% 0%" through "-moz-initial;" is, the CMS I'm using has thrown that code in. (BTW - cannot get out of using CMS, which I would dearly love, this is a work project, so use what I'm given ) Here is why I think I still need to use a table: I need to be able to align two images (a photo and a border) but be able to insert text on top of the border. I had originally created this in Flash, but I totally spaced that I needed some text on the homepage so Google can index the text correctly. Is there another option to accomplish what I'm trying to do, one without tables? I appreciate all other options! Thanks!

Hi all, beginner question here.

I'm attempting at building a small website for my local golf club, one of the tabs on the page is a "Contact" link, inside this tab page I have attempted to embed a small GoogleMap with co-ordinates of the golf club. Whilst testing with IE7 the embedded GoogleMap appears randomly at the bottom of the page totally out of place where it should be. If browsing using Firefox, IE8 or Chrome it appears in the correct place, which is in the middle of the "Contact" page, and only when you click on the "Contact" tab.

I only seem to have this issue with IE7, all the other browsers I've tested so far it aligns perfectly (Firefox, IE8, Chrome).

As I say above, this issue only appears in IE7 - however I'm more than sure it is just a stupid mistake on my behalf, but I've tried and tried and can't seem to resolve it.

Appreciate any help anyone can offer - Many thanks in advance.

The website URL is: http://staging.boarsheadgolfcentre.co.uk/

The bit of code that handle the embedded map is:
Code:

<div class="box" id="contact_page">                    
                    <div class="m_table">
                    <table width="85%" align="left" cellpadding="20">
                        <tr>
                            <td>
                                <h1 align="left">Contact Us</h1>
                            </td>
                            <td rowspan="5">
                                <div id="map_canvas" style="border-style:solid; border-width:1px; float: right; width: 350px; height: 450px"></div>
                                <strong style='float:right;'><a href="http://maps.google.co.uk/maps?hl=en&expIds=17259,28023&xhr=t&cp=39&um=1&ie=UTF-8&q=Boars+Head+Golf+Centre+Ltd,+Crowborough&fb=1&gl=uk&hq=Boars+Head+Golf+Centre+Ltd,&hnear=Crowborough,+East+Sussex&cid=0,0,4613151939200773413&ei=y98ITfieOYO3hQelsojLDw&sa=X&oi=local_result&ct=image&resnum=2&sqi=2&ved=0CCUQnwIwAQ" style='text-decoration: none;'><font color=#000000>For a larger map click here</font></a></strong>
                            </td> 
                        </tr>
                        <tr>
                            <td>
                                <p style='border: none;'>
                                    <strong>Boars Head Golf Centre&nbsp;</strong><br />Boars Head, Crowborough, East Sussex, TN6 3HD&nbsp;<br /><br />
                                    <strong>General Manager:&nbsp;</strong>Peter Grenham<br /><strong>Telephone:&nbsp;</strong>01892 664 545<br /><br />
                                    <strong>Professional:&nbsp;</strong>Keith Robson<br /><strong>Assistant Professional:&nbsp;</strong>George Scott
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p style='border: none;'>
                                    <strong>Location/Description:</strong><br />
                                    Situated just outside Crowborough on the way to Tunbridge Wells on the B2157. Traveling from Crowborough Town turn right on the Boars Head roundabout and head back up the B2157 for about 100 yards, entrance on your left (signposted).<br />
                                    Parkland course with water and trees. 9 hole course, 2698 yards (5396 18 holes), S.S.S. 67 (18 holes).<br /> Practice facilities available (driving range, grass tee, putting green and chipping area).
                                </p>
                            </td>
                        </tr>
                    </table>

                    </div>
                    </div>

Code:

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAGSrquuMPubSa0rTVyaJ2-hRM3sC8BNhS4dKTfFraCAxHin8KOhRLTWtdRIc0Q2_nPROmXypLuvQBUw"
            type="text/javascript"></script>

    <script type="text/javascript">

        function initialize() {
            if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map_canvas"));
                var center = new GLatLng(51.065371, 0.183923);
                map.setCenter(center, 13);

                var marker = new GMarker(center, { draggable: false });

                GEvent.addListener(marker, "dragstart", function () {
                    map.closeInfoWindow();
                });

                GEvent.addListener(marker, "dragend", function () {
                    marker.openInfoWindowHtml("Just bouncing along...");
                });

                map.addOverlay(marker);
                GEvent.addListener(marker, "click", function () { marker.openInfoWindowHtml('Boars Head Golf Centre'); });

            }
        }
    </script>

hi,
I am a newbie when it comes to HTML. I developed a web page and the contents of the page is aligned to the left. How would I align the page so that it is centered.
Here is the URL for the web page:
http://qhcontracting.com/

Thanks a bunch for any replies!
GW

Can anyone help with a problem i have with web page alignment?
when i publish my site the page is not centred but sits on the left of the screen!
i am using dreamwever 4 and not messing about with the code.
cheers,jc

Hello, I am a page and was wondering how I would align it center in the page without all the formating being messed up. So I was wondering if there was a way to make everything center in the page but look just as it does now, just centered no matter the size of the page. Hope you can help! Thank you in advance.

This is the page I would like the code to center
http://www.primenewscenter.com/updat...ncom&buid=4928

Thanks!

Hi everyone,
I'm working on a website for a family member who has a buisness doing antique restoration, I'm trying to make all the pages have the same alignment, the address is http://www.maxbarr.com/ if you click on the buttons along the top you'll see what i mean, some of them are the same alignment others are shifted slightly to the left, they all have exactly the same code as I've used a Dreamweaver template. However they do use stylesheets as well, with the gallery pages using two so I'm guessing it may be that.

For bonus marks can someone tell me how to make the copyright information in the gallery section the same size as one the other pages.

here is the code for the template:

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=utf-8" />
<title>.:Max Barr Antique Furniture Restoration:.</title>
<style type="text/css" media="all">
<!--
@import url("../styles.css");
#header #logo a {
	font-family: Times New Roman, Times, serif;
}
#index #outerWrapper #gradient #contentWrapper br {
	color: #FFF;
}
#index #outerWrapper #gradient div {
	color: #FFF;
}
-->
</style>
<!-- TemplateBeginEditable name="gallery info" --><!-- TemplateEndEditable -->

<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #leftColumn1 {
  width: 200px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
#outerWrapper #contentWrapper #content {
  zoom: 1;
}
</style>
<![endif]-->
</head>
<body id="index">

<div id="header">
  <div id="logo">
    <a href="index.html"  onmouseover=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Max Barr Antique Restoration</a></div>
</div>
<div id="outerWrapper">
  <div id="gradient">
    <div id="nav" style="margin-bottom: 10px;">
      <div align="center">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="profile.html">Profile</a></li>
        <li><a href="restoration.html">Restoration</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      </div>
    </div>
    <div id="contentWrapper">
      <div align="center"></div>
      <div id="content"> <!-- TemplateBeginEditable name="Content" -->
        <h1>This is the page title</h1>

        <h2>This is the H2 tag</h2>

        <!-- TemplateEndEditable --></div>
    </div>
    <div id="credit" align="center">Copyright &copy; 2009 Max Barr
      <br />
      </div>
            </div>

    </div>
</body>
</html>

And here's the code for the stylesheet:

Code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
img {
	border-style: none;
}

body {
	background-color: #000000;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-align: center;
	background-image: url(images/body-bg.png);
	background-repeat: repeat-x;
	background-position: top;
}
h1 {
	color: #FFFFFF;
	font-size: 24px;
	font-weight: normal;
	line-height: 28px;
	letter-spacing: -1px;
}
h2 {
	color: #999999;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
}
a,  a:link {
	color: #CCCCCC;
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	color: #CCCCCC;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
	text-decoration: bold;
}
a:focus {
	color: #CCCCCC;
}
a:active {
	color: #CCCCCC;
}
#outerWrapper {
	margin: 0 auto 0px;
	text-align: left;
	width: 920px;
	background: #fff url(images/content-bg.png) repeat-y left 13px;
}
#outerWrapper #gradient {
	background-image: url(images/gradient-shadow.png);
	background-repeat: no-repeat;
	background-position: center top;
}

#header  {
	height: 80px;
	background-image: url(images/header-bg.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding-left: 20px;
}
#header   #logo {
	color: #FFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight: normal;
	padding-top: 10px;
	padding-left: 0px;
	line-height: 50px;
	float: left;
	width: 1000px;
	text-decoration: none;
}
#header #links{
	color: #C06A05;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	float: right;
	width: 370px;
	text-align: right;
	margin-top: 25px;
	padding-right: 25px;
}
#links a, #links a:active, #links a:visited {
	font-weight: normal;
	color: #C06A05;
}
#header #links a:hover {
	color: #CCCCCC;
	text-decoration: none;
}

#nav    {
	height: 62px;
	margin-right: 20px;
	margin-left: 20px;
	color: #FFFFFF;
	background-color: #CCCCCC;
	background-image: url(images/nav-bg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
	margin-bottom: 0px;
}
#nav ul {
	margin: 0px;
	padding: 0px;
}
#nav ul li {
	margin: 0px;
	display: block;
	float: left;
	list-style: none;
	clear: right;
}
#nav ul li a {
	display: block;
	padding-right: 20px;
	padding-left: 20px;
	text-align: center;
	color: #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 62px;
	font-weight: normal;
	background-image: url(images/nav-border.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}
#nav ul li a:hover {
	background: url(images/nav-hover.jpg) repeat-x top;
	text-decoration: none;
	color: #FFFFFF;
}
#nav ul li#active {
	background: url(images/nav-hover.jpg) repeat-x top;
	text-decoration: none;
}
#nav ul li#active a {
	color: #FFFFFF;
}
.subpage-navimage {
	float: right;
}

#spacer {
	background-image: url(images/nav-spacer.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 27px;
}

#outerWrapper #feature {
	height: 230px;
	width: 880px;
	margin-left: 20px;
	margin-bottom: 5px;
	background-image: url(images/feature.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

#outerWrapper #contentWrapper {
	padding-right: 25px;
	padding-left: 30px;
	clear: both;
	padding-top: 10px;

}
#outerWrapper #contentWrapper #leftColumn1 {
	float: left;
	padding: 0px;
	width: 200px;
	background-color: #232323;
	border: 1px solid #161616;
}
#outerWrapper #contentWrapper #content {
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	background-color: #3E3E3E;
	color: #CCCCCC;
	border: 1px solid #2C2C2C;
	font-size: 12px;
	line-height: 18px;
}
#content-image {
	margin-bottom: 15px;
}

#content ul li {
	margin-bottom: 5px;
}

#outerWrapper #footer {
	background: url(images/footer-bg.png) no-repeat left top;
	height: 60px;
	color: #666666;
	text-align: center;
	padding-top: 25px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 30px;
}
#leftColumnContent {
	width: 190px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	color: #999999;
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#leftColumnContent h3 {
	border: 1px solid #000000;
	padding-top: 5px;
	padding-bottom: 6px;
	font-size: 12px;
	padding-right: 4px;
	padding-left: 4px;
	background-image: url(images/sidebar-h3-bg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	color: #CCCCCC;
}

#leftColumn1 ul {
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
#leftColumn1 ul li {
	list-style: none;
	display: inline;
}#leftColumn1 ul li a {
	display: block;
	padding: 4px 4px 4px 6px;
	color: #999999;
}
#leftColumn1  ul li a:hover {
	text-decoration: none;
	background-color: #171717;
	color: #CCCCCC;
}
.fltlft {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
.fltrt {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}
.sidebarlt {
	padding: 6px;
	border: 1px solid #000000;
	background-color: #4E4E4E;
	color: #CCCCCC;
}
.sidebardk {
	color: #999999;
	border: 1px solid #4A4A4A;
	padding: 6px;
	background-color: #1F1F1F;
}
.sidebardk a, .sidebardk a:hover, .sidebardk a:visited, sidebardk a:active {
	color: #999999;
}


}
#credit {
	text-align: center;
	padding-top: 0px;
	padding-bottom: 8px;
	font-size: 11px;
	color: #333333;
	width: 920px;
	margin-right: auto;
	margin-left: auto;
}
#credit a, #credit a:hover, #credit a:visited, #credit a:active, #credit a:focus {
	color: #333333;
	font-weight: normal;
}
#index #outerWrapper #gradient p {
	color: #FFF;
}
#index #outerWrapper #gradient div {
	color: #FFF;
}

btw I know the code is very messy, I'm trying to learn more so I can clean it up a bit
Thanks very much