Different Browsers and changed to positioning/formatting

[POWERPLAY27]

Hi guys, I created a website and I am having trouble with browsers. This is my website so far www.sign-technologies.net When you go into IE the positioning of some of my flash animations change. In Chrome and Firefox they are fine. Is there a piece of code I can use to detect, which browser is being used to view the site, so the code is adjusted to meet the requirements of the browser being used?

[snaphost]

Hi POWERPLAY27, I can see that you are using ASP.NETIn your code-behind this will get the browser string from the User-Agent header:var browser = Request.Browser.Browser;Then you can have 'case' or 'if' statement where you can alter your code for specific browser. Hope this helps. Oleg

[jlhaslip]

Instead of using "Flash", create an animated gif.

[POWERPLAY27]

Hi POWERPLAY27, I can see that you are using ASP.NETIn your code-behind this will get the browser string from the User-Agent header:var browser = Request.Browser.Browser;Then you can have 'case' or 'if' statement where you can alter your code for specific browser. Hope this helps. Oleg

<!--browser searching --><script type="text/javascript">var browser = "Unknown";var version = 0;if (window.opera){browser = "Opera";version = "5+";if (window.opera.setPreference){version = "9";}}else if(document.all){browser = "Internet Explorer";version = "6-";if (window.XMLHttpRequest){version = "7+"; (I'm guessing I would have to add something here?) }}else if (window.sidebar){browser = "Firefox";version = "1+";}document.write(browser + " " + version);	</script>

do you mean something like this? Have a look at this webpage www.sign-technologies.net/webdesigner.aspx in firefox/chrome/ safari and then have a look at the same webpage in I.E. You will notice that the flash animation writing seems more bigger than what is shown in the other browsers. I'm actually confused on what I have to actually adjust to make the content look the same in IE as it does in the other browsers.

Edited February 6, 2013 by POWERPLAY27

[dsonesuk]

Compare the width, height used for embed (FF) to the width height of object (IE).

[POWERPLAY27]

Compare the width, height used for embed (FF) to the width height of object (IE).

Sorry how would ago about doing this? I have checked the source code in IE and the width and height are the same, however in chrome (the other browser I use) I cannot see this information when looking at the source code.

[dsonesuk]

The view source i see in FF and IE both show, the element object (note: this is old method, with new the object targets both crappy IE and other better browsers ) targets crappy IE, notice the width 490 x 320) and height is higher and wider than those set for embed (450 x 270) which targets much better browsers.

<div id="webdesignerFlash">         <object width="490" height="320" align="absmiddle" title="Web Designer" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">	    <param value="Web Designer.swf" name="movie">	    <param value="high" name="quality">	    <param value="transparent" name="wmode">	    <embed width="450" height="270" align="absmiddle" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" quality="high" src="Web Designer.swf">	  </object>    </div>

Therefor it will be bigger and wider in IE, solution make width and height the same as those set in embed.

[POWERPLAY27]

Thanks thats sorted out the issue, thanks for clearing that up for me! :-)

[POWERPLAY27]

http://www.sign-technologies.net/Portfolio.aspx?portfolioid=3 I have one more issue in IE, have a look at this webpage and move the mouse around the screen, you should see the image going further and further below the screen changing its {margin-top} location.Do the same in the other browsers and this won't happen. Here is the asp code my friend used (he developed the whole website)

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace SignTech{    public partial class Portfolio : System.Web.UI.Page    {	    int _portfolioId = 0;	    int _imageId = 0;	    protected void Page_Load(object sender, EventArgs e)	    {		    if(Request.QueryString["portfolioid"] != null)		    {			    string pi = Request.QueryString["portfolioid"];			    if(int.Parse(pi) > 0)			    {				    _portfolioId = int.Parse(pi);			    }		    }		    if (Request.QueryString["imageid"] != null)		    {			    string ii = Request.QueryString["imageid"];			    if (int.Parse(ii) > 0)			    {				    _imageId = int.Parse(ii);			    }		    }		    FillPortfolio();	    }	    private string GetStockPrice()	    {		    double randomStockPrice = 50 + new Random().NextDouble();		    return randomStockPrice.ToString("C");	    }	    private void FillPortfolio()	    {		    string tableStart = "<table class='tablecenterednoborders'>";		    string tableEnd = "</table>";		    string rs = "<tr>";		    string re = "</tr>";		    string cs = "<td class='cellcentered'>";		    string ce = "</td>";		    string content = "";		    List<PortfolioManager.PortfolioData> portfolios = new List<PortfolioManager.PortfolioData>();		    List<PortfolioManager.ImageData> images = new List<PortfolioManager.ImageData>();		    PortfolioManager pm = new PortfolioManager();		    //Load portfolio bar		    portfolios = pm.GetPortfolios();		    content = tableStart;		    content += rs;		    foreach (PortfolioManager.PortfolioData p in portfolios)		    {			    content += cs;			    content += "<a href='Portfolio.aspx?portfolioid=" + p.portfolioId + "'>";			    content += "<img class='portfoliothumbnail' src='" + pm.GetImageLocation(pm.GetFirstImageId(p.portfolioId)) + "' />";			    content += "</a>";			    content += ce;		    }		    content += re;		    content += tableEnd;		    divPortfolioThumbnails.InnerHtml = content;		    // Load image bar		    if(_portfolioId > 0 )		    {			    images = pm.GetImages(_portfolioId);		    }		    else		    {			    images = pm.GetImages(portfolios[0].portfolioId);		    }		    content = tableStart;		    content += rs;		    foreach (PortfolioManager.ImageData i in images)		    {			    content += cs;			    content += "<a href='Portfolio.aspx?portfolioid=" + i.portfolioId + "&imageid=" + i.imageId + "'>";			    content += "<img class='portfoliothumbnail' src='" + pm.GetImageLocation(i.imageId) + "' />";			    content += "</a>";			    content += ce;		    }		    content += re;		    content += tableEnd;		    divImageThumbnails.InnerHtml = content;		    // Load first image		    content = tableStart;		    content += rs;		    content += cs;		    if (_imageId > 0)		    {			    content += "<img class='portfolioimage' src='" + pm.GetImageLocation(_imageId) + "' />";		    }		    else		    {			    content += "<img class='portfolioimage' src='" + pm.GetImageLocation(images[0].imageId) + "' />";		    }		    content += ce;		    content += re;		    content += tableEnd;		    divPortfolioImage.InnerHtml = content;	    }    }}

Not sure if you know asp.net yourself, but if you do, can you see anything in that code which might be causing that to happen?

[justsomeguy]

I don't even see a reason for that behavior in the rendered code. The style information of the element that grows does not actually change to make the element taller, there's nothing changing in the style information to cause that to happen. Sounds like an IE bug.

[POWERPLAY27]

Ok, thank you very much for clearing that up. I have spent a fair amount of time thinking about what it might be causing that reaction in IE.

[dsonesuk]

It does not seem to be a problem in IE8, so you could force that page into IE8 compatibility mode.

[POWERPLAY27]

Thanks for the suggestion dsonesuk, thats sorted it out for me. I've done some reading and I have learn't about what effects the browsers, thank you all, until next time, (which is likely to be pretty soon, lol)

Edited February 7, 2013 by POWERPLAY27