|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
April 29th, 2008, 11:30 AM
|
|||
|
|||
|
Image alignment problem in table-based XHTML template
Hi there....
I have a pester-some layout issue that is only occurring on Internet Explorer browsers (doesn't seem to matter which version) that I was hoping to get a few extra sets of eyes on. Here's the scoop. The web site in question is located here. Describing the issue, there are username and password login fields that have been set up using images, and these fields look fine and are aligned properly in Firefox & Safari. However, view the same page in IE, and what you'll see is that the image on the password field is offset to the right about 10 pixels or so, creating an undesirable visual effect. This is a table-based web site, so I checked out the cell padding and cell spacing parameters on the tables, and they have been set to zero, so there is nothing there. That is notable is that the box directly above the login fields is brought in with a PHP include, and when I remove that statement, the alignment contracts and looks fine. However, I don't see that there is anything in that include which would effect the table width, and I actually entered a smaller width just to make sure that the table width is not affected. I'll include pertinent CSS and HTML below.... any thoughts? Pertinent HTML from index.php: Code:
<table width="742" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><? include('includes/inc_header.php'); ?></td>
</tr>
Pertinent HTML from inc_header.php: Code:
<tr>
<td width="215" valign="top"><a href="index.php" onClick="closeAds();"><img src="<?php bloginfo(stylesheet_directory); ?>/images/free_bingo_game_logo.gif" alt="" width="215" height="120" border="0"></a></td>
<td width="436" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="70" colspan="3" background="<?php bloginfo(stylesheet_directory); ?>/images/bingo_head.gif""><? include('inc_headerbox.php'); ?></td>
</tr>
<tr>
<td width="133" background="<?php bloginfo(stylesheet_directory); ?>/images/bingo_game_topbg.gif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><input name="rememberme" type="checkbox" value="1" checked></td>
<td class="text"><span class="bold">Members Login</span><br>
Remember Me </td>
</tr>
</table> </td>
<td width="152" height="50" align="center" background="<?php bloginfo(stylesheet_directory); ?>/images/bingo_game_username.gif"><input name="Username" type="text" class="inputform"
onFocus="formDefault(this);" onBlur="formDefault(this);" onKeyDown="formDefault(this);"></td>
<td width="151" height="50" align="center" background="<?php bloginfo(stylesheet_directory); ?>/images/bingo_game_password.gif"><input name="Password" type="password" class="inputform"
onFocus="formDefault(this);" onBlur="formDefault(this);" onKeyDown="formDefault(this);"></td>
</tr>
HTML from inc_headerbox.php: Code:
<table class="headerbox">
<tr>
<td>
<h1>Hey bingo players!</h1> <h2>Let's party bingo friends!</h2> <h3>At BingoSuite--the best online bingo site on the internet. Play bingo online in our gala bingo rooms that offer the best internet bingo games, 24 hours a day.</h3> <h2>E Z win bingo games, both 90 ball bingo and 75 ball bingo, at BingoSuite--your online bingo palace.</h2></td>
</tr>
</table>
Pertinent CSS Code:
.headerbox {
margin: 1px;
padding: 1px;
background-color: #fff;
border: 1px solid #0e3067;
width: 90%;
}
.headerbox h1 {
color: #000;
font-size: 9px;
font-weight: bold;
display: inline;
}
.headerbox h2 {
color: #9a000b;
font-size: 9px;
font-weight: bold;
display: inline;
}
.headerbox h3 {
color: #120068;
font-size: 9px;
font-weight: bold;
display: inline;
}
.formbox {
background-image: url('images/form_box.gif');
background-repeat: no-repeat;
background-position: top left;
width: 145px;
height: 25px;
vertical-align: middle;
margin: 0;
padding: 0;
}
Sorry for the long post - just trying top be as complete as possible.... Mick
|
|
#2
April 29th, 2008, 12:23 PM
|
||||
|
||||
|
1) You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is just one step in the process of fixing your page. The doctype tells the browser which rendering mode to use for the page.
Activating the Right Layout Mode Using the Doctype Declaration Fix Your Site With the Right DOCTYPE! Choosing a DOCTYPE Doctype switching Rendering Mode and Doctype Switching http://www.w3.org/QA/2002/04/valid-dtd-list.html 2) The first step in debugging should always be making sure that your code is valid. http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ 3) Why should you avoid using tables for layout?
__________________
Spreading knowledge, one newbie at a time. Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions IE7: the generation 7 browser new in a world of generation 8 browsers. Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
|
|
#3
April 29th, 2008, 10:59 PM
|
|||
|
|||
|
Yea, I know I could feasibly spend a ton of time redoing this whole site, but I am not the original developer by a long shot. It has so many tables interspersed with the layout, it's sick, and the 90's style slices are killing me. However, I've not been contracted out with the authorization to revamp the whole site (though I'd like to), just to integrate Wordpress as a CMS which I have done. At this point, I just need to find a fix for this GUI problem.
So yea, I know this is not the "proper" way of doing things. Still, I think that there should be some way that I can fix this darn thing.... so, with that said.... any other ideas?
|
|
| Viewing: Dev Shed Forums > Web Design > HTML Programming > Image alignment problem in table-based XHTML template |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
