Latest Announcemnent
New thread

[Help] Align a Image Properly

Status
Not open for further replies.
Sponge Bob

Sponge Bob

Active Member
3,153
2009
192
0
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:
[SLIDE]http://i44.tinypic.com/vg55oz.jpg[/SLIDE]


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
 
15 comments
IE is really a big pain

You have to make diff stylesheet for IE

Use these tags in your orignal CSS
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iebigpain.css" />
<![endif]-->


Or try add images in blocks ( <p tags )
 
@anantgupta i tried using the <p tags but not working fine.

Even with this
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iebigpain.css" />
<![endif]-->
Click to expand...

Doesnt work...

Rapid4All i guess its the older versions of Internet Explorer that have issues.
 
<br>
<a href="index.php" title="Photon Servers"><img src="images/logo.png" align="left"></a>
<div align="right">

<br> <<<< remove this tag
Click to expand...
Did you try remove this tag?
I'm not a coder, just want try to fix this issue :D
 
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
 
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.
 
Hey thanks for the info, after doing the changes this is what as showing at my end when i loaded the site:

[slide]http://i42.tinypic.com/4vimvb.jpg[/slide]
 
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?
 
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.
 
Ok easy enough when I got the whole thing.
change this:
Code: 
</span> 
</div> 
</div><!-- #header-inner (end) -->
to this:
Code: 
</span> 
</div><!-- #header-inner (end) -->
 
instead of using a div for your logo try using absolute or relative postioning this may fix the problem displying the logo in different browsers
 
Status
Not open for further replies.
Back
Top