HTML - Alternatives For Vertical Alignment??

I am hoping that someone may have a solution for me - in one of my table columns I have 3 images (logos that link to sites) and I have set them with a vertical top alignment - so that when the page goes long - the logos stay at the top - this works perfectly in all browsers, except (of course) IE... would anyone know how to fix this?
My site can be viewed at http://bebywebtest.9k.com/history.html ... if you click open the collapsible menus - you can see the logos - start to center themselves down the page - instead of staying at the top...

<br /> </td>
<td width="5" rowspan="3">&nbsp;</td>
<td width="380" height="179" bordercolor="#000066" bgcolor="#FFFFFF"><div align="center"><a href="http://www.israelbonds.ca"><img src="Images/header-march-2006.gif" alt="bonds" name="israelbonds" width="256" height="100" border="0" valign="top" id="israelbonds" /></a></div></td>
</tr>

SO - if anyone has any suggestions on how to remedy this fiasco - I would be most grateful!
Thanks.

I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high.

So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text.

I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not.

I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible?

Hello to all Forum members.

It's my first post here. I have a problem on my site using FF 2.0 and opera.

When you open http://review4dummies.com/test/index.php you see it has horizontal alignment = center, but when you click on link About Us the site will move about 10 pixels to the right and of course its centered but... huh not exactly. When you browse and click on link Contact Us its back to normal. Clicking on report-a-bug does not move site too.

I was checking whole code and noticed that if i add some paragraphs and blank tables to the about-us.php file everything seems to be ok.

This is driving me nuts, any help will be apreciated.

PS: in ie6 everyting seems to be ok.

PS2: I also noticed this bug on some sites:

eg. home.pl when you click on menulink "Praca" it will move horizontaly too.

eg2. nazwa.pl when you click on menulink "KONTAKT" it will move too.

Anybody?

Best Regards!

Hello,

I'm trying to program a couple unordered lists into my web page and I encountering a problem.

I can't seem to align them with the top of the cell. They act as if there's an extra list item above the first one.

Here's the URL to the page: http://www.cactusridgerr.com/CCRR/comfort.htm

Here's the code for the bottom two cells with the lists in them:

Code:

<tr>
<td style="vertical-align: top; padding-left: 0px; padding-top: 0px;">
<ul type="disc" style="margin: 1em;">
<li>Elegant dining room</li>
<li>Fireside lounge</li>
<li>Library and computer room</li>
<li>Craft room & country kitchen</li>
</ul>
</td>

<td style="vertical-align: top; padding-left: 0px; padding-top: 0px;">
<ul type="disc" style="margin: 1em;">
<li>Wellness and exercise spa</li>
<li>Beauty salon</li>
<li>Theater and multi-purpose room</li>
</ul>
</td>
</tr>

Does anyone know why they refuse to be aligned with the top of the cells?

Hi guys. I need some expert about an issue I'm having.

Site: Zhentor Online

The website content is loaded into an IFRAME (which you can see just below the advertisement box, below the part where it says "Zhentonian Time"). However, the website uses a dynamic IFRAME resizing script, which as you can guess, resizes the IFRAME to accomodate the contents, removing scrollbars. However, for this to work, the IFRAME needs to load twice. So you can imagine that can get a little annoying over time, having each page load twice...

I load the contents into the IFRAME to prevent from loading the heavy graphics again and again. But I'm getting really annoyed with the double load issue, and would like an alternative, or a better script which only loads the IFRAME once. I'm looking for a scrollbar-free solution which is why I've neglected framesets. I also used another script a while back which loaded documents into a DIV but for some reason I was unable to submit forms through the DIV, which rendered it useless.

JUST to make sure, the IFRAME I am concerned with is the 2nd bordered box from the top of the page. The first one holds advertisements, and the second one, which starts with the header "Zhentonian Time" is the IFRAME that loads all website content. If anyone has any ideas or suggestions please free to put them forward. A superior IFRAME resize script would be awesome, or any other way which might be suitable.

Thank you.

I am trying to pass some HTML code though XML but the browser is ignoring the HTML tags as oppose to turning them into HTML tags. In the example below, I want to create a link to Google with CData, but the browser outputs "<a href="http://www.google.ca/">Google</a>" as oppose to creating a link to Google.

Code:

<![CDATA[<a href="http://www.google.ca/">Google</a>]]>

Heyas,

I'm creating a project at the mo that needs a rather large number of tables. The whole project so far is CSS, but with the amount of data that needs to be displayed (with up to and beyond 150 on some pages) I think the div option is out as nesting them correctly would probably be a nightmare.

On attempting to validate my html with a strict doctype, the only error I'm getting is that td width="###" isn't allowed. So is there any other alternative, or some other way to specify cell widths that will validate?

Getting everything to validate properly was a bit heavy on the workload, and if possible I'd like to be able to stick with strict and not have to migrate to transitional.

Also just to add that the tables are pretty simple.

E.g. Table set one is 2 columns wide. Column 1 and column 2 stay the same width throughout an unlimited number of additional rows.

E.g. Table set two is 5 columns, and once again, these width are constant throughout an unlimited number of rows.

In short, is there any alternative to using td width that will validate as a strict doctype aside from creating and nesting 400 divs?

Cheers,
Mopy

I am trying to make my code more standards compliant and use the "strict" DTD. But when I try to validate using the W3C validator, there are a few things that I'm having trouble with.

Target: I was using <a href target="blank" ....> to open some external links in a new window, but this isn't allowed in HTML 4 strict or XHTML 1 strict. What is supposed to be the replacement? The only thing I could find on a web search was a javascript, which I know little about. Is that the only alternative? (Seems a bit silly if it is, as this must be a commonly used feature.)

Align: I used this to centre graphics, but this isn't allowed either. Are we supposed to set up different image classes in the CSS to allow centering, left, etc?

br: Use of the <br> tag is allowed in HTML 4 strict, but there seem to be some paces where it isn't allowed. Does anyone have a reference to the rules for this?

Thanks

I'm in the process of making a page where the menu/navigation is on the left, and to the right of it is the content area. I'm planning on using an iframe like I have in the past, so that the only place that reloads every time you click a menu option is the content area.

The thing is, for the first time this website will have more content than my others, in which case a scroll bar would appear for just the content iframe ... is there any way around having this scroll bar appear? I would rather the height of the iframe just continue to extend as far down as the actual content goes, then stop. This way, the only scrollbar that appears on the webpage is the main scroll bar on the side of the browser.

Is this possible with the iframe? if not, is there a better alternative??

please help!!

EDIT: Edit: Okay, so I found a script that actually works but now I have another tiny problem. This is the code I found that works: http://www.milonic.com/mfa/2005-Apri...djustment.html

But see on the javascript code it has a section that says "//extra height in px to add to iframe in FireFox 1.0+ browsers" ... this code actually does add extra unwanted space at the bottom of the iframe... extends it further than necessary. But I can't find the part where I can adjust/remove this? Could someone help me out with this??

I'm working on an application where the user will be able to build a page made up of several unrelated blocks of information. Since I'd like to generate some ad revenue from these pages, I'm concerned the disjointed nature of the information will tend to confuse ad networks (e.g. AdSense), leading to sub-optimal ads, fewer click-throughs, and less money.

It would be very easy for me to create each block of information as a separate page ("sub-page"), containing its own ad code, and then pull them (and their ads) all together in the user-created pages using frames or iframes. Based on my (limited) understanding of how the ad networks work, it seems this would enable better-targeted ads based on each of these sub-pages. If I'm right, the only problem is the frames and their associated headaches.

1. Am I making too much of the ad relevance issue?

2. Is there a non-frame solution that will achieve the same results?

3. Are the benefits of frames worth the problems?

Thanks.

Involute

I've made a site (http://sketch.uk.com) that hides and displays divs according to the browser size. However, ideally I'd like to prevent the hidden divs loading their content until they are visible. A good example is the index page of the above link. There is an iframe for the flash animation that changes to a static picture when you resize to a smaller window. If you were to open the site on the smaller window (such as a tablet or mobile for example) it would be better that the iframe were never loaded at all. Any suggestions?

Hi

Comparing this code

<div style="border:1px solid black; width:120px;height:25px; padding-top:0px;">hello</div>

in Internet Explorer 9 and FireFox 4 shows, that the word 'hello' is not at the same vertical position.

Is there a method, to adjust this?

Thanks for your information.

Patrick

have some html code which is putting some image buttons into a menu which goes across the top of the page.
I want to change this too make them go down the page. I have a css file with the code that looks like this

Code:
Code:

   #nav_menu
   {
    /* background: transparent; */
      background: #ddd;
      border: #dcdce9 solid thin;
      /* margin: 10em; */
      position:absolute;
      top: 70px;
      left: 0px;
      padding: 0pt;
      right:0px;
      height: 51px;
      /* bottom:200px; */
   }

and the html code looks like this

Code:
Code:

<ul id="globalnav">
   <li><a href="index.php?here=home" class="" id="home">Home</a></li>
   <li><a href="index.php?here=daybook" id="daybook" class="">Day Book</a></li>
   <li><a href="index.php?here=wms" id="wms" class="">Work Management System</a>
      <ul>
         <li><a href="index.php?here=staff" id="staff" class="">Staff</a></li>
         <li><a href="index.php?here=shifts" id="shifts" class="">Work shifts</a></li>
      </ul>

what part do i need to change to make it go vertically?

Hello,

I have been struggling with a "dead center" align for some time now, and because I am not such a skilled html code creator, I decided to apply for some help, I'll try to be as explicit as I can be.

I have a simple html page, created with Dreamweaver CS3, and I've imported a Flash object, created with Flash 8. All I want is to align this movie horizontally as well as vertically, and when the page loads I have to send the focus to the flash movie, so that the visitor won't have to click on the flash movie in order to receive the focus.

I can center align the flash like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- PICHI Media (c) 2008 All Rights Reserved --><HTML><HEAD><TITLE>Always Follow Dreams</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
html,body { 
height:100%; 
width:100%; 
overflow:auto; 
} 

body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
	background-image: url();
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #000000;
}
a:active {
	color: #000000;
}
.style4 {font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif;}
#apDiv1 {
	position:absolute;
	width:324px;
	height:25px;
	z-index:1;
	left: 354px;
	top: 303px;
	background-color: #000000;
	visibility: hidden;
}
-->
</style>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<head>
</head>
<BODY>
<CENTER>
  <DIV align=right></DIV>
</CENTER>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD width="0" height="0" align=center vAlign=middle>
      <P align="center">
        </script><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','440','src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="440" id="test" >
          <param name="movie" value="test.swf">
          <param name="quality" value="high">
          <embed movie src="test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="440"></embed>
        </object>
        </noscript></P>
      </TD>
  </TR></TBODY></TABLE>
</BODY></HTML>

As you can see this source code will center align both ways horizontally and vertically.
I belive this is doing the job:

Code:

<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD width="0" height="0" align=center vAlign=middle>
      <P align="center">

Aligment sorted now let's get to the focus part. When the page loads I want to set the focus to the flash movie, and now I don't mean to remove that rectagle we all see in SP2 and IE7. No not that, that's easy to remove with some code. What I want is the actually focus in a text field in my flash movie.
I can do this with the following 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>Untitled Document</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body onLoad="window.document.test.focus();">
<center>
<table width="100%" height="100%" align="center">
<tr>
<td valign="middle" align="center">

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','name','test','width','400','height','440','id','test','title','test', 'src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" name="test" width="400" height="440" id="test" title="test">
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<embed src="test.swf" width="400" height="440" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="test"></embed>
</object></noscript>
</center>
</td>
</tr>
</table>

</body>
</html>


The focus part works with this i believe:

<body onLoad="window.document.test.focus();">

where TEST is the ID of my flash movie. BUT, the movie is not vertically align. It still is horizontally, but not vertically. And this is my problem. If I combine the two examples, the one where the content is dead center, and the one where I set the focus to the flash movie it won't work, and I get this error:

'window.document.test' is null or not an object

This page is right now on my site:

http://www.danandrei.ro

And if you double click on the small browser icon from the lower left corner, you know the one that shows error messajes like "DONE but with some errors". you can see what I mean.

My question is:

IS IT POSSIBLE TO BOTH CENTER ALIGN, HOR AND VERT, AND ALSO SET FOCUS TO THE FLASH MOVIE ? IF SO, DO YOU GUYS HAVE ANY CLUE HOW ?

Thank you.

I get this error message when trying to validate my page in 4.01 transitional. What html code can I use to get a vertical alignment with my tables.

Error Line 18, column 79: there is no attribute "VALIGN" .
... cellspacing=10 align="center" valign="top">


Thanks