[Help] Align a Image Properly

**Sponge Bob** · 7th May 2010, 05:42 AM

Hello,

I have been experiencing this problem of internet explorer and firefox for my site.

www.photonservers.com you can try on both the browsers. the logo in internet explorer tends to be on the middle top and pushes the buttons down, while firefox is perfect..

Here are the screenshots:

My Code:

Code:

 
 
 <br>
            <a href="index.php" title="Photon Servers" ><img src="images/logo.png" align="left"></img></a>
            <div align="right">
        
        
     <br>
        <body onload="MM_preloadImages('images/top/facebook2.png','images/top/google2.png','images/top/linkedin2.png','images/top/tweet2.png','images/top/yahoo2.png','images/top/msn1.png')">
<a href="http://www.facebook.com/pages/PhotonServers/368596391218" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Facebook','','images/top/facebook2.png',1)"><img src="images/top/facebook.png" alt="Facebook" name="Facebook" width="63" height="64" border="0" id="Facebook" /></a><a href="http://twitter.com/photonservers" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','images/top/tweet2.png',1)"><img src="images/top/tweet.png" alt="twitter" name="twitter" width="63" height="64" border="0" id="twitter" /></a>
<a href="http://linkedin.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('linkedin','','images/top/linkedin2.png',1)"><img src="images/top/linkedin.png" alt="linkedin" name="linkedin" width="63" height="64" border="0" id="linkedin" /></a><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gtalk','','images/top/google2.png',1)"><img src="images/top/google.png" alt="GTalk" name="gtalk" width="63" height="64" border="0" id="gtalk" /></a>
<a href = 'ymsgr:sendim?photonservers' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('yahoo','','images/top/yahoo2.png',1)"><img src="images/top/yahoo.png" alt="yahoo" name="yahoo" width="63" height="64" border="0" id="yahoo" /></a>
<a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('msn','','images/top/msn1.png',1)"><img src="images/top/msn.png" alt="msn" name="msn" width="63" height="64" border="0" id="msn" /></a>


<!-- http://www.LiveZilla.net Chat Button Link Code --><a href="javascript:void(window.open('http://live.photonservers.com/livezilla.php','','width=590,height=550,left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))"><img src="images/top/live.png" width="140" height="64" border="0" alt="PhotonServers Live Help"></a><!-- http://www.LiveZilla.net Tracking Code --><div id="livezilla_tracking" style="display:none"></div><script type="text/javascript">var script = document.createElement("script");script.type="text/javascript";var src = "http://live.photonservers.com/server.php?request=track&output=jcrpt&nse="+Math.random();setTimeout("script.src=src;document.getElementById('livezilla_tracking').appendChild(script)",1);</script><!-- http://www.LiveZilla.net Tracking Code -->




            
</div>
        
        </div><!-- #header-inner (end) -->

Any help would be highly appreciated

Would it because the images are not showing transparent on internet explorer, what can i do.

Thanks & Regards

Sponge Bob Reviewed by Sponge Bob on 7th May 2010. [Help] Align a Image Properly Hello, I have been experiencing this problem of internet explorer and firefox for my site. www.photonservers.com you can try on both the browsers. the logo in internet explorer tends to be on the middle top and pushes the buttons down, while firefox is perfect.. Here are the screenshots: http://i44.tinypic.com/vg55oz.jpg Rating: 5

**anantgupta** · 7th May 2010, 05:55 AM

IE is really a big pain

You have to make diff stylesheet for IE

Use these tags in your orignal CSS


Or try add images in blocks ( <p tags )

**Rapid4All** · 7th May 2010, 05:56 AM

I'm using IE 8.0 and Firefox 3.6.3. I dint see any difference . It works perfect.

**Sponge Bob** · 7th May 2010, 06:12 AM

@anantgupta i tried using the <p tags but not working fine.

Even with this

Doesnt work...

Rapid4All i guess its the older versions of Internet Explorer that have issues.

**Rapid4All** · 7th May 2010, 06:38 AM

<br>
<a href="index.php" title="Photon Servers"><img src="images/logo.png" align="left"></a>
<div align="right">

<br> <<<< remove this tag

Did you try remove this tag?
I'm not a coder, just want try to fix this issue

**Sponge Bob** · 7th May 2010, 07:25 AM

That tag is to get a line down, for the buttons, if i remove that the buttons will go up, instead of going down to align it in the middle, that has no problem.

Anyone else to assist?

Thanks

**Lock Down** · 11th May 2010, 06:42 PM

Ok. First just a comment. You have to body statements.
this one should replace the one at the top.

Code:

        <body onload="MM_preloadImages('images/top/facebook2.png','images/top/google2.png','images/top/linkedin2.png','images/top/tweet2.png','images/top/yahoo2.png','images/top/msn1.png')">

Now to the alignment problem.

Code:

            <a href="index.php" title="Photon Servers" ><img src="images/logo.png" align="left"></img></a>
            <div align="right">
        
        
     <br>
        <body onload="MM_preloadImages('images/top/facebook2.png','images/top/google2.png','images/top/linkedin2.png','images/top/tweet2.png','images/top/yahoo2.png','images/top/msn1.png')">
<a href="http://www.facebook.com/pages/PhotonServers/368596391218" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Facebook','','images/top/facebook2.png',1)"><img src="images/top/facebook.png" alt="Facebook" name="Facebook" width="63" height="64" border="0" id="Facebook" /></a><a href="http://twitter.com/photonservers" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','images/top/tweet2.png',1)"><img src="images/top/tweet.png" alt="twitter" name="twitter" width="63" height="64" border="0" id="twitter" /></a>
<a href="http://linkedin.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('linkedin','','images/top/linkedin2.png',1)"><img src="images/top/linkedin.png" alt="linkedin" name="linkedin" width="63" height="64" border="0" id="linkedin" /></a><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gtalk','','images/top/google2.png',1)"><img src="images/top/google.png" alt="GTalk" name="gtalk" width="63" height="64" border="0" id="gtalk" /></a>
<a href = 'ymsgr:sendim?photonservers' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('yahoo','','images/top/yahoo2.png',1)"><img src="images/top/yahoo.png" alt="yahoo" name="yahoo" width="63" height="64" border="0" id="yahoo" /></a>
<a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('msn','','images/top/msn1.png',1)"><img src="images/top/msn.png" alt="msn" name="msn" width="63" height="64" border="0" id="msn" /></a>


<!-- http://www.LiveZilla.net Chat Button Link Code --><a href="javascript:void(window.open('http://live.photonservers.com/livezilla.php','','width=590,height=550,left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))"><img src="images/top/live.png" width="140" height="64" border="0" alt="PhotonServers Live Help"></a><!-- http://www.LiveZilla.net Tracking Code --><div id="livezilla_tracking" style="display:none"></div><script type="text/javascript">var script = document.createElement("script");script.type="text/javascript";var src = "http://live.photonservers.com/server.php?request=track&output=jcrpt&nse="+Math.random();setTimeout("script.src=src;document.getElementById('livezilla_tracking').appendChild(script)",1);</script><!-- http://www.LiveZilla.net Tracking Code -->

should be :

Code:

 <br><span style="vertical-align:middle; float:left;">

<a href="http://www.photonservers.com/index.php" title="Photon Servers" ><img valign="middle" src="http://www.photonservers.com/images/logo.png" align="left"></img></a></span><span style="vertical-align:middle;align:right;">
</span><span style="vertical-align:middle; float:right;">
<a href="http://www.facebook.com/pages/PhotonServers/368596391218" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Facebook','','http://www.photonservers.com/images/top/facebook2.png',1)"><img src="http://www.photonservers.com/images/top/facebook.png" alt="Facebook" name="Facebook" width="63" height="64" border="0" id="Facebook" /></a><a href="http://twitter.com/photonservers" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','http://www.photonservers.com/images/top/tweet2.png',1)"><img src="http://www.photonservers.com/images/top/tweet.png" alt="twitter" name="twitter" width="63" height="64" border="0" id="twitter" /></a>
<a href="http://linkedin.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('linkedin','','http://www.photonservers.com/images/top/linkedin2.png',1)"><img src="http://www.photonservers.com/images/top/linkedin.png" alt="linkedin" name="linkedin" width="63" height="64" border="0" id="linkedin" /></a><a href="http://www.photonservers.com/contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gtalk','','http://www.photonservers.com/images/top/google2.png',1)"><img src="http://www.photonservers.com/images/top/google.png" alt="GTalk" name="gtalk" width="63" height="64" border="0" id="gtalk" /></a>
<a href = 'ymsgr:sendim?photonservers' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('yahoo','','http://www.photonservers.com/images/top/yahoo2.png',1)"><img src="http://www.photonservers.com/images/top/yahoo.png" alt="yahoo" name="yahoo" width="63" height="64" border="0" id="yahoo" /></a>
<a href="http://www.photonservers.com/contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('msn','','http://www.photonservers.com/images/top/msn1.png',1)"><img src="http://www.photonservers.com/images/top/msn.png" alt="msn" name="msn" width="63" height="64" border="0" id="msn" /></a>

<!-- http://www.LiveZilla.net Chat Button Link Code --><a href="http://www.photonservers.com/javascript:void(window.open('http://live.photonservers.com/livezilla.php','','width=590,height=550,left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes'))"><img src="http://www.photonservers.com/images/top/live.png" width="140" height="64" border="0" alt="PhotonServers Live Help"></a><!-- http://www.LiveZilla.net Tracking Code --><div id="livezilla_tracking" style="display:none"></div><script type="text/javascript">var script = document.createElement("script");script.type="text/javascript";var src = "http://live.photonservers.com/server.php?request=track&output=jcrpt&nse="+Math.random();setTimeout("script.src=src;document.getElementById('livezilla_tracking').appendChild(script)",1);</script><!-- http://www.LiveZilla.net Tracking Code -->
</span>

Since I am not sure what the <div>s are there for you can remove or change them as needed. But they are not required for alignment.

**Sponge Bob** · 11th May 2010, 06:51 PM

Hey thanks for the info, after doing the changes this is what as showing at my end when i loaded the site:

**Lock Down** · 11th May 2010, 07:00 PM

The alignment is correct. B ut looks like the background color is missing. Is it the red along the sides of the menus and background that is wrong?
If so where is the bgcolor defined?

**Sponge Bob** · 11th May 2010, 07:05 PM

Yeah that is what is wrong, the bgcolor is defined on the sylesheet. But as you can see also there is alot of space that is left at the top.

[Help] Align a Image Properly

Thread Tools

Display

[Help] Align a Image Properly

Sponsored Links

Thread Information

Users Browsing this Thread

Similar Threads

[HTML] How To Align Any Image Center !

Newbie question: how to align to right?

[Help] Align Images to center in CSS

How do i align my webpage to the center?

How to center align ads..?

Tags for this Thread

Posting Permissions

themaCreator - create posts from...

themaPoster - post to forums and...

themaManager - edit and manage...

themaLeecher - leech and manage...

themaRegister - register to forums...