Forum Moderators: not2easy

Message Too Old, No Replies

Slight issue with CSS and IE6 / FF

slight alignment issue

         

mondaynightmike

6:41 pm on Nov 19, 2008 (gmt 0)

10+ Year Member



I'm having a problem where IE6 is displaying the text maybe 4/5pixels to the right of where FF is displaying them, and also 4/5 pixels higher.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if gt IE 6]>
<link href="ie7fixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<style type="text/css">
<!--
.style1 {
font-family: verdana;
font-size: 11px;
color: #616161;
}
.style2 {font-size: 11px}
.style3 {color: #616161}

html,body {
margin: 0;
padding: 0;
}
-->
</style>

</head>

And then this is the text part i'm aligning over an image


<td colspan="5" rowspan="19">
<div id="container">
<div style='position: absolute; left: 700px; top: 255px; height: 359px; width: 484px;'>
<p class='style1 style2 style'>About MRsupport</p>
<p class='style1'>Hello and welcome to MRsupport. MRsupport is a personal service run by me Michael Riccioni. For years now I have been number one on speed dial for friends and family as soon as a computer related problem popped up, so I decided in my spare time I would run this service to help others who live locally to me. (located in Burton Latimer, Kettering)</p>
<p class='style1'>I work as a computer engineer during the day but deal only with business&rsquo;s ranging from 1 to 2 employees and also those which employ 100+, so i come across everything from stand alone PC&rsquo;s, Servers (2003/SBS2003/2000/Exchange) and large networks.</p>
<p class='style1'>The difference with this service is it is aimed at the home computer user. Common problems like setting up wireless broadband, or data recovery/transfer (such as pictures, music and videos).</p>
<p class='style1'>I offer a range of services as well as competitive prices compared to those of well known companies with the added benefit of fast service (no need to wait 7 days just to find out whats wrong with your machine), It&rsquo;s simple, you drop the PC/Laptop in to the shop then I aim to fix have the computer ready for collection within a minimum of 48 hours and no later than 96 hours. </p>
<p class='style1'>And what&rsquo;s more if I am unable to fix the problem then you don&rsquo;t pay a single penny, so there&rsquo;s really nothing to lose!</p>
</div>
<img src="images/index_13.jpg" alt="" width="505" height="406" class="style1"></td>

Any Ideas?

swa66

9:19 pm on Nov 19, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First off:
<!--[if gt IE 6]>
this will also offer the non-standard CSS to IE8 when it is released. Id' suggest to make it:
<!--[if IE 7]>

IE8 isn't that far away anymore.

I see don't see a reset (or setting) of margins and padding on the <p>. If I were to ever try matching positioning of a table cell with an absolutely positioned block (I'd never try it), Id'start with a


* {
margin:0;
padding:0;
}

as I don't trust browser defaults.

If you know the number of pixels to shift it, why not simply add it to the conditional comment ?
Something somewhere in that table giving your table content a nudge (e.g. one cell with a bit too much content...) is enough to wack it all out of alignment.

Since you know how to do absolute positioning, why bother with a table (that has colspan="5" rowspan="19" and as such must be a nightmare to maintain)