New site looks different in IE, HELP!

North Park Demolition

I made this the other day. as per usual, it looks fine in chrome, and firefox and stupid in internet explorer. the spacing between the pictures appears and leaves white gaps, and there is blue round the top of the menu buttons.

any help would be appreciated

Hi,

I realise you may be a beginner and without wishing to offend that site looks like something from last century rather than something made the other day.:slight_smile:

I can give you some quick fixes in a moment but the honest answer is that it needs to be re-designed from the ground up using modern CSS design principles and not the outdated code that you are using. It looks as though its an auto generated design so I guess it’s not really your fault but the software you used.

Ok enough of the lecture… :wink:

The blue border around the images is the default border that some browsers apply to images when they are links. You can turn that off with css as follows:


a img{border:none}

That should also cure some of the gaps.

The table is centred in IE7 and under because you are using the deprecated align=center attribute here:


<table style="display: inline-table;" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="900" [B]align="center"[/B]>

If you remove the align=“center” then the table will be left aligned as it is in Firefox which is what you said you wanted. Once it is left aligned then your swf will fall into position because you have absolutely placed it from the viewport and not from a current context so the only place is can be correct is when the page is left aligned.

I’m not sure why you have used absolute positioning inside a table though as that is rather a strange thing to do as the table can handle the positioning by itself (although tables shouldn’t be used for layout anyway though).

As a rule of thumb if you see spacer.gif or more than one empty element making space then you are going about it the wrong way.

e.g.


<p style="margin:0px"></p>
            <p style="margin:0px"></p>
            <p style="margin:0px"></p>
            <p style="margin:0px"></p>
            <p style="margin:0px"></p>
            <p style="margin:0px"></p>
            <p style="margin:0px"></p>

.....

  <tr>    <td><img src="[spacer.gif" width="1" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="63" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="66" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="43" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="12" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="18" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="45" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="45" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="25" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="39" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="50" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="60" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="52" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="76" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="68" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="74" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif" width="163" height="1" border="0" alt="" /></td>    <td><img src="[URL="http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif"]spacer.gif](http://www.sitepoint.com/forums/view-source:http://www.wirralminidiggerhire.com/NPD/spacer.gif)" width="1" height="1" border="0" alt="" /></td>   </tr>

That is really bad for your health and has no place being in a modern website.

Also why the frames?

No-one uses frames these days because of the accessibility issues and their cumbersome nature so ditch the frames.

Hope that’s of some use and sorry for being a little blunt.

I greatly appreciate your advice, Thankyou.

I Designed it completely myself. in what way could it look more modern? Can you recommend any guide or book to design a really good modern website?.

Once again, Thankyou!!!

Not to mention that the HTML and CSS validation claims are misleading, being based on the frame rather than the content, which throws errors for both.

For XHTML see: [Invalid] Markup Validation

For CSS see: W3C CSS Validator results

Look at other CSS sites and look under the hood and disect them and play with them and see what other people are doing to get a feel for what’s needed.

A lot of this is practice and learning so just keep at it.:wink:

The sitepoint reference and the faq at the top of the forum (see my sig) have a lot of information so check those out. If you do a forum search for css books you will see what others have recommended also :slight_smile:

thanks again my friend!