HTML - Html / Css Navbar Alignment Issues

Hey guys.

Having some issues on both my website and one I did for my Brother, the images not aligning properly. Both are fine in Firefox, but not in IE.

www.michaelsingleton.co.uk
www.ucba.co.uk

If anyone would be so kind as to have a look over the code, it would be much appreciated!

Thanks

Mike.

Hello, quick question here.
I'm working on this site: (replace @'s with a's)
v@rd@burstyn.com/version2/

The previous designer left it in a bit of a mess, and now that I've made some changes that appear nicely in my Safari browser, the tables are hugely misaligned when I look at a number of the pages in Firefox (i.e., water.html or rites.html).

Any advice as to how to get the tables back under control? I've tried for a while but nothing seems to fix it.

Thanks very much in advance.

Hey everyone! I am completely new to webpage design and have enjoyed some parts of it! I have just been teaching myself as I go and viewing tutorials to learn most of what I have done. Now I am in a jumble and have no idea what to do. I am working ... my main problem is things aligning correctly. I am working on this for a friend and really would like to just be done with it! Please check it out, I attached the pages so maybe you can lead me in the right direction. I believe I have not positioned things correctly. They appear okay sometimes on internet explorer / funcky on firefox / and reallly crazy on safari! Also, the navagation bar is very glitchy, maybe I shouldn't have done a flash navigation? Im going nuts over here! I appreciate all your help.

Hello,
I made a very simple table layout (with photoshop and imageready) and its my very first time making this type of layout so I'm having a little trouble with the coding. I haven't added a style.css file to it, except for maybe the css that wraps my navigation to a certain width.

Here is the url: http://rezina.awardspace.com/layout01

I can't seem to align the images correctly. My friend told me that one of the images was not sliced correctly, so I sliced it but .. it kind of fixed the right side, and not the left.

Also, the extra.jpg (which is the outside background-the stripes) seems to repeat itself both vertically and horizontally, is there a way to fix that?

Thanks. =))

oh. oops. I just read the rules, sorry for the vague title. I would try changing it to be more specific but I don't know how..

Hey guys,

I have been designing a portfolio for my photography for some time.

There are a few issues I have and I would appreciate your help.



http://fjchapman.com/portfolio/portfolio.html

1. If you'll notice, the SWF object won't open.

If you go to http://fjchapman.com/portfolio/viewer.swf , the swf is fine. There is just something wrong with my code.

2. Why is it so screwed up in IE?

I have been going through my code but I cannot understand why IE is adding some mysterious padding. Help?

3. Alignment of links.

While the links are just fillers (concert photography, portraits) for now, how can I have them aligned to the bottom left of my header?


Thank you guys so much for your time.

Hello, I just made my new site for my company and I tried to keep it extremely simple. I used wordpress to do the basic layout automatically and made some simple edits with some basic html i picked up along the way this week. There seems to be two problems though:


1) the form is inside a table which doesnt seem to align properly within any of the popular browsers (firefox/IE/chrome) .... it should look like 1 image instead of 3 separate pieces

2) i eventually got the form to align slightly better but the spot where I "Enter my zip code" doesnt align with the background image behind it.....sometimes it doesnt even say "enter zip code" which is very bad for a user experience. in firefox it doesnt say it, but in chrome it does say it....either way, both are aligned very poorly.....


I put my code into this site:
http://w3schools.com/html/tryit.asp?...=tryhtml_intro

...and after editing it, i've come to find that it works perfectly within that html editor and looks exactly how i want it to look. but then when i put the code back into my wordpress site, the alignment messes up again......

so i did some research and found out that wordpress has "deprecated" some of the html tags and that they dont work anymore...if i understand correctly. so now i have to find a way to pick new tags or use CSS...this is just so confusing and i thought maybe somebody here might be able to offer me some assistance to help me fix up this form/table problem.

my site's url is:
http://www.allautoinsurance.org

my code that I'm editing is on the right sidebar, where the alignment messes up:

<div style="text-align: center;"><span style="font-size: 14pt; font-family: Georgia; color: rgb(0, 0, 0);"><span style="font-size: 14pt;"><span style="font-size: 14pt;">Our free online service instantly browses the best rates in your zip code area at the click of a button. We've helped thousands of people quickly and easily save money on their auto insurance:</span></span></span><br />
<br />

<form action="http://network.mossaffiliatemarketing.com/z/61/CD62/&subid3= "method="post">
<table border="0" cellpadding="0" cellspacing="0" width="225">
<tr>
<td colspan="2"><img src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/top.jpg"></td>
</tr>

<tr>
<td class="background1" valign="middle" height="54" width="153">
<style>
.background1 {
background-image: url(http://www.allautoinsurance.org/wp-c...tom_left.jpg);
background-repeat: no-repeat;
}
</style>

<input type="text" name="subid1" value="ENTER ZIP CODE" style="margin-left:30px; margin-bottom:5px; width:110px; border-width:0px; font-size:14px; font-family: Arial, Helvetica, sans-serif;" onClick="javascript:this.value='';">
</td>
<td>
<input type="image" src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/bottom_right.jpg"></td>
</tr>
</table>

</form>

</div>
<div style="text-align: left;"><span style="font-size: 12pt;"><span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 1)</span> Input your zip code and click the button above to begin browsing the auto insurance providers in your area</span></span></span><br />
<br />
<span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 2)</span> Select the auto insurance provider you're most comfortable with by clicking their picture<span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">&nbsp; </span></span></span></span><br />
<span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">Warning</span>: Dont <span style="font-style: italic; font-size: 12pt;">always </span>go with the cheapest in the area</span></span></span><br />
<br />
<span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 3)</span> Continue with the providers process if they meet your requirements</span></span></span></span><br />
</div>
<div style="margin-left: 40px;"><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"></span></span></div><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"><br />
<span style="font-size: 12pt;">***We've been showing people how to get insurance quickly and easily for years.&nbsp; We respect your privacy, it is just as important to us as it is to you.</span></span></span>



.....thanks for any help, i really appreciate your time and effort. if this code doesnt look smart at all its cuz i used some free WYSIWYG editor to generate it. i actually am very confused lol. thanks again.
Best,
Kyle P

Can someone help me. If you go to ColinQuinn.Net, you can see all the text is in one column under the pic. I want to get the text to the right of the photo, and proceed the text all the way across in normal form. If I paste it to word, it comes out fine. I dont understand whats wrong with it. Thanks.

In the new website I am building, I have one line that displays at the top of the page out of place. It is similar to 2 other pages that are coded correctly. I think the best way to describe it is for you to take a look.

NOTE: ALTHOUGH PAGES ARE .PHP, THEY ARE JUST HTML FILES WITH PHP EXTENSION, SOME PHP IS GOING TO BE IMPLEMENTED IN THE FUTURE BUT THERE IS NONE YET.

Page that is wrong:
www.heartlandcustom.com/greenproducts.php

Similar correct pages:
www.heartlandcustom.com/residentialproducts.php
www.heartlandcustom.com/commercialproducts.php
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>
<title>insidecontent</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
}
-->
</style></head>
<body bgcolor="#587652">
<!-- DO NOT MOVE! The following AllWebMenus code must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR greentext ******** -->
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [4]',awmMenuName='greentext',awmBN='DW';awmAltUrl='';</script>
<script charset='UTF-8' src='greentext.js' type='text/javascript'></script>
<script type='text/javascript'>awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR greentext ******** -->
<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR residentialtext ******** -->
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="residentialtext",awmBN="730";awmAltUrl="";</script>
<script charset="UTF-8" src="residentialtext.js" type="text/javascript"></script>
<script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR residentialtext ******** -->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [4]',awmMenuName='menu',awmBN='DW';awmAltUrl='';</script>
<script charset='UTF-8' src='menu.js' type='text/javascript'></script>
<script type='text/javascript'>awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu ******** -->
<!-- ImageReady Slices (insidecontent.psd) -->
<table id="Table_01" width="781" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="5"><img id="insidecontent_01" src="images/insidecontent_01.jpg" width="780" height="97" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="97" alt="" /></td>
  </tr>
  <tr>
    <td colspan="4"><div align="center">
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
 width="711" height="350" id="CoffeeCup" align="middle">
        <param name="movie" value="myalbum3.swf"/>
        <param name="quality" value="high" />
        <param name="scale" value="noscale" />
        <param name="salign" value="lt" />
        <param name="bgcolor" value="#ffffff" />
        <embed src="myalbum3.swf" quality="high" bgcolor="#ffffff" width="711" height="350"
 name="CoffeeCup" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash"
 pluginspage="http://www.macromedia.com/go/getflashplayer" />      
</object>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p align="left">&nbsp;</p>
    </div>
    <span id='awmAnchor-greentext'>&nbsp;</span></td>
    <td rowspan="5"><img id="insidecontent_03" src="images/insidecontent_03.jpg" width="47" height="653" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="575" alt="" /></td>
  </tr>
  <tr>
    <td id="awmAnchor-menu"></td>
    <td colspan="3" rowspan="2"><img id="insidecontent_05" src="images/insidecontent_05.jpg" width="193" height="40" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="35" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="3"><img id="insidecontent_06" src="images/insidecontent_06.jpg" width="540" height="43" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="5" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="2"><img id="insidecontent_07" src="images/insidecontent_07.jpg" width="20" height="38" alt="" /></td>
    <td><img id="insidecontent_08" src="images/insidecontent_08.jpg" width="121" height="22" alt="" /></td>
    <td rowspan="2"><img id="insidecontent_09" src="images/insidecontent_09.jpg" width="52" height="38" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="22" alt="" /></td>
  </tr>
  <tr>
    <td><img id="insidecontent_10" src="images/insidecontent_10.jpg" width="121" height="16" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="16" alt="" /></td>
  </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Thanks,
Anders

Hi, when I save a word doucment as a html, the Alignment moves from centered to Left alignment.
Is this normal?
Can i stop this from happening?
I am a basic user of a PC.
Thanks.
SD

Hi Everyone,

I'm really needing help. I'm taking a stab at building my first webpage to my Dad's business. I am trying to figure out how to put a company logo in the top left corner, but every time I do it moves everything around. Does anyone have any idea on how I can keep the current format but also put a logo in the top left corner?

Any and all help is greatly apprecaited as this is the 3rd or 4th forum I have posted on looking for help.

The site is www.bennettspainting.com

Best Regards,

Aetrox

Hi guys,

I've created an advert with some affiliate links in that I want to display on my main pages of my website. I have only fairly recently jumped into the world of web design/development so I've probably not made the most efficient page.

The advert is layed out inside a table that is 4 columns and 2 rows and everything seems fine when I view that page. Except, when I put this page into my main pages (via an iframe) it shows nearly correctly, but the alignment is slightly off: the second column in is a few pixels down than the others. I have checked the coding over and over to no avail.

Is there maybe a reason for this? Or some tips that you could give?

I did try yesterday by just copying and pasting the code directly from the advert page to the main pages which require them - but that's a whole new can of worms! The alignment of that attempt was beyond a joke (even then I couldn't work it out...).

Many thanks in advance for your ideas.

I have my sidebar to the bottom center. I want it to the left of my content.



l-------------l -----------------------------------------------------------------
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l------------ l l----------------------------------------------------------------l




That's what I want it to look like. Here's my code right now;



<center><TR height=*>
<TD bgcolor=2f2f2f valign="left"><font color=eaeaae>
<CENTER>
<BR><BR>

<TABLE border=0>
<TR width=25%><TD bgcolor=green><CENTER><FONT SIZE="+3"><A

HREF="index.html">Home</A></FONT></CENTER></TD></TR>
<TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A

HREF="characters.html">Characters.</A></FONT></CENTER></TD></TR>
<TR><TD bgcolor=green><CENTER><FONT SIZE="+3"><A HREF="mguide.html">Mission

Guide</A></FONT></CENTER></TD></TR>
<TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A

HREF="contact.html">Contact</A></FONT></CENTER></TD></TR></center>

</CENTER>
</font></TD>
<TD valign="left">

I've created a frameset, and on the top frame I have a flash animation, and on the main frame is where my stuff is loaded!
The thing is, the top is aligned to center, and the main frame too! but on the main frame isn't aligned with the top one, I think is because of the scrollbar! It aligns between the left end of the browser and the scroll bar instead of the right end of the browser... is there a way to align without the scrollbar?? i can't disable the scrollbar because i need it LoL

Hope you understand what I'm saying ... LooL

check this link http://black1c3.awardspace.com/
so you can see what i'm saying the two images are not aligned...

thanks for your time!!

im not sure if this is an issue with html or css but im i have 3 columns in a table of 1 row and im using css to assign a background image to the table columns and the 1st and 3rd column will not top align the background image properly to line up with the background image of the 2nd column (or possibly its the 2nd not lining up with the 1st and 3rd) i will link to the site and post the affecting code here (you can view source on the page to see the html)

http://www.wiffleague.com/main.php

Code:

td.mainBoxTitle
{
	background-color: #4d6066;
	background-image: url('../images/topmiddleedge.png');
	background-repeat: repeat;
	background-position: top left;
	background-attachment: fixed;
	font-family: Geneva, Verdana, Tahoma;
	color: #000000;
	font-size: 8pt;
	text-decoration: none;
	font-weight: bold;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
}

td.mainBoxTitleLeft
{
	background-color: #4d6066;
	background-image: url('../images/topleft.png');
	background-repeat: no-repeat;
	background-position: top left;
	font-family: Geneva, Verdana, Tahoma;
	color: #000000;
	font-size: 8pt;
	text-decoration: none;
	font-weight: bold;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
}

td.mainBoxTitleRight
{
	background-color: #4d6066;
	background-image: url('../images/topright.png');
	background-repeat: no-repeat;
	background-position: top right;
	font-family: Geneva, Verdana, Tahoma;
	color: #000000;
	font-size: 8pt;
	text-decoration: none;
	font-weight: bold;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
}

note: the 3 background images in question were sliced off of the same original psd file and exported as png files using the same pixel height per slice (35px) and a 35px width for the left and right image with a 3px width for the middle image