Another Vertical-Alignment Problem (Sorry)

2 New Member

Hello,

I've read numerous posts & guides on this subject but i'm still having problems. I'm writing some HTML for the company intranet and all our browsers are currently (you guessed it) IE6.

In most of the guides that I've read you can "fix" this problem in IE6 by nesting a series of divs inside each other and fiddling the margins. However this only seems to work when you know the size of the content you're putting in. It also seems to run into trouble when your container is inside a table (as is the case with me). Just to add further insult I'm also working in flow layout (or whatever the term is, NOT absolute :) )

I've got a table containing link buttons (represented as DIVs inside Anchor Tags). This is immediatly a problem as IE6 apparently doesn't supports divs in anchors but it seems to work. I'm using Javascript for the rollovers since IE6 doesn't seem to like aligning the text on Hover when I use pseduo classes.

The problem is that I'd like to vertically center the button text inside the div. Everything I've tried thus far hasn't worked. I could next another div inside and specify a "top" value manually but I'd like to avoid manually setting each one if I can.

Could anyone make any suggestions?

example code (excluding my failed attempts at vertical align) to follow, cheers,

Olly

CSS:

DIV.buttonOff
{
background-image:url(myIma ge1.png);
background-repeat:repeat-y;
background-position: top left;
width:100px;
height:60px
}

DIV.buttonOver
{
background-image:url(myIma ge2.png);
background-repeat:repeat-y;
background-position: top left;
width:100px;
height:60px
}

Script:

function doOver (element)
{
element.classNa me = "buttonOver ";
}

function doOff (element)
{
element.classNa me = "buttonOff" ;
}

Html:

<table>
<tr>
<td valign="center" align="center"> <a href="myRef.com "><div class="buttonOf f" onmouseover="do Over(this)" onmouseout="doO ff(this)" align="center"> My Multi Line Quite long Button text</div></a>
</td>
<td valign="center" align="center"> <a href="myOtherRe f.com"><div class="buttonOf f" onmouseover="do Over(this)" onmouseout="doO ff(this)" align="center"> short btn txt</div></a>
</td>
</tr>
...etc...
</table>

May 25 '07 #1

Subscribe Reply

3295

drhowarddrfine

7,435

Recognized Expert Expert

IE6 apparently doesn't supports divs in anchors but it seems to work.

Anchors are 'inline' but divs are 'block' elements.

I don't see the need to have a cell around a div to do this. I don't see the purpose of the div. You also have some errors because "middle" isn't correct everywhere there.

May 25 '07 #2

O11Y

New Member

Sorry for the late reponse. I'm not sure what you mean by "Cell" around the div?.

I'm using a table for layout purposes. The above HTML was an example, not every TD will have a button.

An obvious choice to do this would be to use <IMG> s but I want the text for the buttons to be dynamically configurable. I will be using ASP to control their text.

I haven't used "middle" anywhere so I'm a bit confused by that comment. As far as I know the HTML VAlign tag uses "center" as opposed to middle but please correct me on that. Either way, the TDs are correctly valigning.

If you can suggest the way I should be doing this then that would be very useful as opposed to just pointing out my flaws.

Cheers,

Jun 1 '07 #3

drhowarddrfine

7,435

Recognized Expert Expert

I'm not sure what you mean by "Cell" around the div?.

<td> is a table data cell and you have a div inside the cell:
[HTML]<td valign="center" align="center"> <a href="myOtherRe f.com"><div[/HTML]
Since a cell encloses those contents, what is the purpose of the div?

I'm using a table for layout purposes.

Never use tables for layout. They are for data only. Use CSS.

As far as I know the HTML VAlign tag uses "center" as opposed to middle

It uses "middle".

If you can suggest the way I should be doing this then that would be very useful as opposed to just pointing out my flaws.

So you don't want me to point out errors in your markup but you want your markup to work correctly?

I see what you are trying to do but I'll need a minute.

Jun 1 '07 #4

drhowarddrfine

7,435

Recognized Expert Expert

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td style="height:1 00px;width:100p x;background-image:url(myima ge1.png)">
<div>
<a href="#">
My Multi Line Quite long Button text
</a>
</div>
</td>
</tr>
</table>
</body>
</html>[/HTML]

Jun 1 '07 #5

Similar topics

12439

vertical-align on span that resides inside a table cell

by: kAldam | last post by:

I am currently using IE 6.0 and 5.5 and the scenario is the following. I have a span that contains text, and the span is beign contained by a table cell (this is the way thing need to be in my application). I have an issue when the span has a heigth less than 18px (meaning height of the span, there is only one line of text and the height of the text is less than 18). The issue is that I start getting a padding, I add a color background to...

HTML / CSS

2468

What new relating frames exists in ASP.NET what doesn't exist in old ASP? And changing another frame´s controls

by: qwerty | last post by:

I´m new to ASP.Net. My workmate has some experience with it. He claimed that in ASP.Net working with frames is much simpler than it was ASP. I asked explanation but he couldn't give me such. (a button inside a-tag with attribute target isn't anything new relating ASP.Net, its same old HTML). He claimed that you could change another page´s controls´s property´s value from another frame by using this method: ' Page "Bottom"

ASP.NET

12143

vertical-align: center

by: Eric Lindsay | last post by:

If I want to have the middle of an image vertically aligned with the middle of a heading (or several lines of heading), is there some particular way people would recommend? vertical-align: center looked made for that. The effect I want is img heading img heading img heading or heading

HTML / CSS

2260

vertical-align

by: shivas | last post by:

Hi, I am using vertical-align for a table row, but the Image and the text are not aligned properly. I don't what to align image in the img tag, rather in the row itself I want to align. I want to align both text and the image (some time appended in the same cell) in the top. Can anyone help me in this? --

HTML / CSS

4826

Vertical centering without tables

by: Markus Ernst | last post by:

Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up doing this demo with tables. The main problems are the vertical centering of the info area, and of the text inside the squares.

HTML / CSS

4422

vertical align with not specified height

by: acunnon | last post by:

I am trying to put together an login page my problem is getting the three items aligned to the middle verticaly without specifing a height to anything on the page. CSS html{ height:100%; min-height:100%; } body{ vertical-align:middle;

HTML / CSS

3700

GDI+ - finding a rectangle inside another rectangle

by: sklett | last post by:

I have a situation where I'm getting in Image that has a gray (solid, same color) background with a smaller white rectangle inside. The position is not always the same. What I need to do is locate the postion and determine the size fo the white rectangle and then crop the image to leave only the white rectangle remaining. I'm very new to GDI+ and have really no idea where to start. Can anyone suggest a good way to accomplish this? ...

C# / C Sharp

5167

What good are vertical tab and form feed for ?

by: Spiros Bousbouras | last post by:

The fact that vertical tab and form feed exist both in the basic source character set and the basic execution character set suggests to me that there is a class of display devices where vertical tab and form feed produce a predictable and consistent (among different devices) behaviour. So what are these devices and what is the behaviour ? For old printers , form feed presumably moves to the next page but vertical tab is a mystery to me.

C / C++

987

another div layout problem

by: Joe Stateson | last post by:

My default.aspx page has two div's. The top div holds a menu and the bottom one holds a 3rd party tabstrip with 10 pages of varying height. I only want a single vertical scroll bar, the browser viewport. If I hard code the bottom div with a height as large as the tallest page in the tab strip I get the desired result. Anything less, then one or more pages will have a second vertical scroll bar. I coded the bottom div to be "100%" and...

ASP.NET

5505

vertical-align...

by: maya | last post by:

hi, how do I get text to vertical-align inside a div? http://www.mayacove.com/misc/home.html vertical-align should work, according to this: http://htmlhelp.com/reference/css/text/vertical-align.html

HTML / CSS

9647

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10163

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10108

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9960

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7510

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6744

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5397

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4064

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3668

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP