HTML - Background Alignment Problem

I've been putting my layout into html from photoshop and finally finished, thing is I was using Firefox to view it as I went along. Now when I view it in Internet Explorer, there is this small unexplained space on the right side of my header image that is screwing up the page, plus the table that I have the navigations links on the top left has way more spacing between rows than it does on Firefox.

Here's the layout: http://www.ff12guide.com/

the two problems a

1) the empty space to the right of 'header_red.jpg' and 'top-2-shadow.jpg' at the top of the page

2) the links in the 'sections' area at the top-left (characters, combat, etc.) is much more spaced out than it is in Firefox, and does not look right

I absolutely cannot figure out how to fix this and it's driving me nuts, anyone have an idea?

Hi, I've finally created a 2 level CSS menu and I've positioned a DIV layer below it for the content. However, I would like to know how to shift the content DIV layer up, closer to the menu (horizontal one).

Or is my coding for the menu causing a problem?

Here's my site btw: Click

On my website, www.JKRfan.com , the alignment on the layout is a little bit off and I can't figure out why. The problem with the alignment also changes from page to page. Will somebody please help?

Thanks,
Kristen

Hey



Can someone please tell me how I can cushion the object on the right to the content in the center? I can't use fixed widths, since the width of the central content differs. If I remove 'float: right;' from .css, the object goes behind the central content.

HTML:

Code:

<div class="breadcrumbs-container">
	<div class="breadcrumbs-left"></div>
	    <span class="breadcrumbs">
		<a href="{U_INDEX}" accesskey="h">{L_INDEX}</a>
		<!-- BEGIN navlinks -->
		<img src="{T_THEME_PATH}/images/breadcrumb_arrow.gif" width="8" height="9" alt=">" /> 
		<a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a>
		<!-- END navlinks -->
		</span>
	<div class="breadcrumbs-right"></div>
	</div><!-- /breadcrumbs container -->

CSS:

Code:

.breadcrumbs-container {
    background: transparent;
	margin: 0;
	padding: 0;
	height: 30px;
        width: 100%;
}

.breadcrumbs {
    background: url("{T_THEME_PATH}/images/breadcrumb-bg.png") repeat-x;
	height: 30px;
	float: left;
	vertical-align: middle;
	line-height: 30px;

}

.breadcrumbs-left {
    background: url("{T_THEME_PATH}/images/breadcrumb-bg-left.png") left no-repeat;
	width: 50px; height: 30px;
	float: left;
}

.breadcrumbs-right {
    background: url("{T_THEME_PATH}/images/breadcrumb-bg-right.png") right no-repeat;
	width: 50px; height: 30px;
	float: right;
}

Thanks

So, I'm having trouble getting a table to align over a background in IE. It looks fine in every other browser as you can see he



But this is what it looks like in IE, about 1 pixel over:



You can view the site at: http://www.ringaroundwithrosie.com/aboutrosie2.html
and the CSS here.

Does anyone see anything that could explain why it is not aligned properly in IE?

Thanks for your help!

Hello there,
I am in serious need of help. I am working on a site where I could update the navbar at any time and not have to change the code on numerous pages. After some reading, I concluded that the use of an SSI would be a suitable solution. With that being said, my headache ensues.

I have developed an outline in dreamweaver for my website, and have created a div where the ssi will be placed. The navbar was created in Fireworks.

In IE, i can get the menu to appear where I want it, which is below the flash image below the header, however, when I run the mouse over the dropdown, the drop down appears some 50 pixels above the navbar. I am thinking that this might be a css problem.

In Firefox, the div tag appears off to the left and when the mouseover is done, the dropdown appears in the same place as they have in IE.

In both instances, the dropdown menu is in line with the image used in the navbar.

I would really appreciate any help someone could offer. If someone could send me a working solution, I would be even more grateful. I think my eyes are tired of viewing the code.

the site can be viewed at the following url: http://www.prestigeinteractive.com/wmems2/

I would greatly appreciate any help you can offer.

Thanks,

Greg
ps. if you would like the source files, email me at gwhite@prestigeinteractive.com

Hi all, my first post...

I'm having troubles when i try to add a table after a left aligned table. When i add the second table it goes just at right of the previous table, not at bottom as i want.


Example:
HTML Code:

<table width="60%" border="1" align="left" >
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<table width="60%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Any sugestions about placing the second table at bottom of first one are welcome.

OK well This workse perfectly with a .html document, but when I use .php it all goes bad,

http://rapid-hook.com/script-2/index.php

The arrows ar suppose to be aligned with each other, but theres a gap between the table, for the bottom only, not sure how to fix this.

Goodday,

This is a bit of a follow-up on my previous question, but in some ways, it's also a seperate problem:
Have a look at this.
In the first table, the height is determined by 'height="200"' and the position of the 'Text' is 24 pixels above the bottom, exactly what I wanted.
But now in the second table: Here the height is determined by the content of the first row and the 'Text' part's height is way to big.

What happened?
Why isn't it showing a table with the height I have set?
What should I do to tell a cell it's height, starting from the bottom of the table?

Thank you for your help,
Laurens,

I am haveing trouble with my links..they are not going all the way to the right side..they stay under the text

here is my website
http://www.highlandartworld.com/

any sugestions?

Can someone please help me and shed light on this? TIA!!
I'm building an ecommerce site and there are 4 thumbnails that you can click on, then the main image swaps to the thumbnail you just clicked on (like how most ecommerce sites work). But I won't have 4 thumbnails all the time, maybe 2 or 3 but maximum of 4. When I test the page with 4 thumbnails, it works fine. But if I have only 2 or 3 thumbnails, the spacing looks odd on Firefox. (Looks perfect on Safari) I want them to be always left justified but they look like they are forced to be centered in the space given. What am I doing wrong? I appreciate any help!
The following code is for the thumbnail:
Code:

<tr>            <td width="60" align="left"><a href="#" onClick="javascript:image_click(1);return false;"><img border="0" src="thumbnail.asp?file=[image1]&maxx=60&maxy=0" name="pimage1"></a> </td>
                <td width="5" align="center"></td>
                <td width="60" align="left"><a href="#" onClick="javascript:image_click(2);return false;"><img border="0" src="thumbnail.asp?file=[image2]&maxx=60&maxy=0" name="pimage2"></a> </td>
                <td width="5" align="center"></td>
                <!--END: image2-->
                <!--START: image3-->
                <td width="60" align="left"><a href="#" onClick="javascript:image_click(3);return false;"><img border="0" src="thumbnail.asp?file=[image3]&maxx=60&maxy=0" name="pimage3"></a> </td>
                <td width="5" align="center"></td>
                <!--END: image3-->
                <!--START: image4-->
                <td width="60" align="left"><a href="#" onClick="javascript:image_click(4);return false;"><img border="0" src="thumbnail.asp?file=[image4]&maxx=60&maxy=0" name="pimage4"></a> </td>
                <td width="5" align="center"></td>
                <td width="60" align="left"></td></tr>
                <!--END: image4-->

Hi,
I can usually troubleshoot basic html issues, but don't have much knowledge of frames. The page design is a basic 2-frame horizontal format with body content files that swap in and out from a header menu bar.

Both header and body files are centered, and should be visually seamless.

The problem is when the main body frame is set to scrolling="yes", the scroll bar in the browser window offsets the center of the frame, and the two frames appear out of alignment.

If the main body frame is set to scrolling="no" then they line up properly (but obviously cannot scroll down through the page). You can view the issue he
http://www.sequentz.com/menutest/index.htm

I would greatly appreciate some help sorting this out, so that the two files align seamlessly and the bottom file can scroll. Thank you.

I have a content alignment issue in IE and I can not find the problem anywhere. In FF it looks perfect but in IE the content is at the bottom of the page and I do not know what or what I am overlooking and missing. I don't know if it is the php throwing it off. I wouldn't think so though.

Here is the page:

http://www.mesquitechristmas.com/local/display.php?id=2

Here is the code:

PHP Code:
<?php

include ('db_connect.php');

if (isset($_GET['id'])) {
  $id = mysql_real_escape_string($_GET['id']);
  $sql = "SELECT * FROM users WHERE id = $id;";
  if ($result = mysql_query($sql)) {
    if (mysql_num_rows($result)) {
      $row = mysql_fetch_array($result);
      $displayname = $row["displayname"];
      $displaytype = $row["displaytype"];
      $address = $row["address"];
      $city = $row["city"];
      $state = $row["state"]; 
      $postal = $row["postal"];
      $country = $row["country"];
      $rating = $row['rating'];
      $votes = $row['votes'];
      $imgurl = $row['imgurl'];
      $comments = $row['comments'];
    } else {
      die("No user found");
    }
  } else {
    die(mysql_error());
  }
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Mesquite Texas Country Christmas" />
<meta name="keywords" content="Mesquite, Texas, Country Christmas" />
<meta name="author" content="NA" />
<link rel="stylesheet" type="text/css" href="/stylesheet.css" media="screen" title="FBC" />
<script type="text/javascript" src="drop_down.js"></script>
<title>A Mesquite Country Christmas</title>
</head>
<body>

 <div id="wrap">

<a href="/index.html">
<img id="frontphoto" src="/images/header.png" width="760" height="237" alt="Mesquite Country Christmas" border="0"></a>

<div id="menu">

<h2 class="hide">Menu:</h2>

<ul id="avmenu">
<li><a href="/index.html">Home</a></li>
<li><a href="/christmasstory.html">The Christmas Story</a></li>
<li><a href="/directions.html">Directions</a></li>
<li><a href="#">Information</a><ul>
      <li><a href="/information.html">Display Facts & Info</a></li>
      <li><a href="/faq.html">FAQ</a></li>
      <li><a href="/playlist.html">2008 Playlist</a></li>
      <li><a href="#">Christmas History</a></li>
  </ul></li>
<li><a href="#">Photos</a>
  <ul>
      <li><a href="/2007photos.html">2007</a></li>
  </ul></li>
<li><a href="#">Videos</a>
  <ul>
      <li><a href="/2007videos.html">2007</a></li>
  </ul></li>
<li><a href="/guestbook.php">Guestbook</a></li>
<li><a href="/webcam.html">Web Cam</a></li>
<li><a href="/webradio.html">Internet Radio</a></li>
<li><a href="http://www.noradsanta.org/" TARGET="_blank">Track Santa</a></li>
<li><a href="/projects.html">Projects & How Tos</a></li>
<li><a href="/links.html">Links</a></li>
<li><a href="/contact_us.html">Contact Us</a></li>
</ul>
 
<center><a href="http://www.toysfortots.org/" TARGET="_blank"><img src="/images/toys_for_tots.jpg" border="0" width="110" height="153" vspace="10"></a></center>

<center><a href="http://christmas.bronners.com/2007/house/534.html"><img src="http://christmas.bronners.com/voteforme/vote.jpg" border="0" width="110" height="153" alt="christmas decorations" vspace="10"></a></center>

</div>

<div id="content">

 <div class="fadebox">

<h2><? echo $row['displayname']; ?></h2>

<hr />

<table border="0" cellpadding="0" cellspacing="0" width="100%">
     <tr>
        <td align="center"><img src="<? echo $row['imgurl']; ?>" class="border" height="345" width="460"></td>
     </tr>
      <tr>
<td>
<table align="center"><tr><td>Rated 0 from 0 people | <b>Rate This</b>: <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=1">1</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=2">2</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=3">3</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=4">4</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&amp;rate=5">5</a>
</td><td>&nbsp;</td></tr></table></td></tr></table>

<table align="center" style="border-top: 1px solid rgb(51, 102, 51);" border="0" cellpadding="4" cellspacing="0" width="100%">

<span class="title">About this Display...</span>
<tr><td class="bg2" width="100"><b>Display Name</b>:</td><td class="bg2"><? echo $row['displayname']; ?></td></tr><tr><td class="bg1"><b>Display Type</b>:</td><td class="bg1"><? echo $row['displaytype']; ?></td></tr><tr><td class="bg2"><b>Description</b>:</td><td class="bg2"><? echo $row['description']; ?></td></tr><tr><td class="bg1"><b>Address</b>:</td><td class="bg1"><? echo $row['address']; ?><br><? echo $row['city']. "," . $row['state']. " " . $row['postal']; ?><br><? echo $row['country']; ?><br><a href="http://www.mapquest.com/maps/map.adp?searchtype=address&amp;formtype=search&amp;countryid=US&amp;addtohistory=&amp;country=US&amp;address=<? echo $row['address']; ?>&amp;city=<? echo $row['city']; ?>&amp;zipcode=<? echo $row['postal']; ?>&amp;historyid=&amp;submit=Get+Map" target="_NEW"><b>Get Directions</b></a></td></tr><tr><td class="bg2"><b>Website</b>:</td><td class="bg2"><a href="<? echo $row['website']; ?>" target="_blank"><? echo $row['website']; ?></a></td></tr><tr><td class="bg1"><b>Sponsor Links</b>:</td><td class="bg1">
<script type="text/javascript"><!--
google_ad_client = "pub-8048181801684156";
//displays
google_ad_slot = "4239948836";
google_ad_width = 234;
google_ad_height = 60;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
        </td></tr></table>

</div>

   </div>
 </div>

<div id="footer">
&copy; 2007 Mesquite Country Christmas

<br />
<br />

<script type="text/javascript"><!--
google_ad_client = "pub-8048181801684156";
//468x60, created 1/8/08
google_ad_slot = "0360766123";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


</div>

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

If anyone can help me with this that would be great!

-Thanks

Hi all,

Newbie here.

So I've built an HTML website and I want to vertically centralise it because it looks a little funny on larger screens at the moment.

I have followed several tutorials worth of direction on how to do it and tables seem to be the easiest but I'm having a problem with getting the table to "fit to window".

This is the table instantiation:

<table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

The problem is that the height is not working. If I change it to a specific value such as 900px then it works perfectly but it must be getting the wrong value otherwise.

Has anyone encountered this before and can you help?

The site is http://www.thechapelstudios.co.uk