Cross Browser compatability issues

[Manasipradeep]

I have a webpage where it displays differently in different browsers.. But I am not aware of how to solve the cross browser compatability issues since I am a newbie.. (My issues is the the 3 boxes(of content area: green orange and green) are not in same level at the bottom, in different browsers.. I want to make it in same level in all the browsers in windows... Also it looks different in Linux OS and MAC Os... )Please help me...

Rename the Style.txt file to style.css

[drymsza]

Being at work and not being able to go through all your code and look at it in different browsers the first thing that comes to mind is using resets. Resetting margins inherited from other elements usually helps.

[compbrat75]

Hello,
I use the following to match heights on 3 different divs and it has worked on multiple browsers/versions.

function winSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
	var sizeArray = new Array(myWidth,myHeight);
	return(sizeArray);
}

function matchHeight(div1, div2, div3, toScreen, sub){
	var sizeArray = new Array();
	sizeArray = winSize();

	var d1 = document.getElementById(div1);
	var d2 = document.getElementById(div2);
	var d3 = document.getElementById(div3);
	
	//check scrollHeight to see if extends beyond initial window
	var d1SH = d1.scrollHeight;
	var d2SH = d2.scrollHeight;
	var d3SH = d3.scrollHeight;
	var maxSH = sizeArray[1];
	if(maxSH < d1SH)
	{
		maxSH = d1SH;
	}
	if(maxSH < d2SH)
	{
		maxSH = d2SH;
	}
	if(maxSH < d3SH)
	{
		maxSH = d3SH;
	}

	if (toScreen == "y") {
		d1.style.height = (maxSH - sub) + "px";
		d2.style.height = (maxSH - sub) + "px";
		if (d2.offsetHeight > d1.offsetHeight) {
			d2.style.height = (maxSH -sub) + "px";
			d1.style.height = d2.offsetHeight + "px";
			d3.style.height = d2.offsetHeight + "px";
		}
		else {
			d1.style.height = (maxSH - sub) + "px";
			d2.style.height = d1.offsetHeight + "px";
			d3.style.height = d1.offsetHeight + "px";
		}
	} else {
			if (d2.offsetHeight > d1.offsetHeight) {
			d1.style.height = d2.offsetHeight + "px";
			d3.style.height = d2.offsetHeight + "px";
		}
		else {
			d2.style.height = d1.offsetHeight + "px";
			d3.style.height = d1.offsetHeight + "px";
		}
	}
}

Then place the next bit either as part of the body onload or place it at the end of the html just before the </body>

matchHeight('content','sideNavFooter','main','y',0);

Replace content, sideNavFooter, and main with the names of your three column div tags.
The y says that you not only want to match the size of the three div tags to each other, but you also want them to run the full height of the window.
The final number is a number that I use if the three divs need to span the length of the window, but there is a horizontal div at the top like a header. I take the height of that header div and subtract it from the window height.

You may want to issue a command to maximize the browser window first before launching this code. It will match the window height and if the window is small, then the height remains small when you make the window bigger.

Hope that helps!
~Maria

[Manasipradeep]

Being at work and not being able to go through all your code and look at it in different browsers the first thing that comes to mind is using resets. Resetting margins inherited from other elements usually helps.

Hello,

I tried to reset the margin and padding of css by adding the code...

* { margin:0; padding:0; }

But it did not help much.. It looks differently in Chrome(Windows)... In Chrome only it has problems .. Also it looks different in other OS like Ubuntu, MAC (for firefox, chrome etc)... Atleast I wish If I could see it correctly in all browsers in Windows OS... Please help... It would be great if I could solve it with CSS and HTML rather than using other javascript

[WebJoel]

You are aware that your CSS is LARGER than your HTML? That is a bit defeatist.

I was looking at the CSS and you've got some "position:absolute" and negative positions going on... this can be a recipe for trouble if you are inexperienced. :-)

I'll try to paste this together in an html-editor and see of I can spot anything. For example (re: the size of your CSS code), -if you start your CSS like this:

* {margin:0; padding:0;}

you can safely remove stuff like this:

p,h1,h2,h3,h4, li, ul{ margin:0px; padding:0px}

and the BOLD here: #header{height:125px; padding-top:0px;}

Because the "universal selector method" * {margin:0; padding:0;} removes margin & padding from ALL elements (removed from body, html, p, h1-6, table, -everything)

Something else I am seeing is (for the lack of a gentler term) sloppy use of the semi-colon in your CSS:

example:

....text-decoration:none ; text-shadow:#000 1px 1px 1px...

the " ; " delimiter probably should not be white-space separated from the attribute, lest it be read as something different. I've already found several instances of this.

I'm still trying to understand this:

<br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br style="font-family: verdana;"><br><div><br style="font-family: verdana;"><br><br><br><br><br><br><br><br><br><br><br>


A "<br />" should only be used as a 'line-break' and not as an element to possess style. It CAN, there is not rule against it, but the point of CSS is to separate content from style. A 'line-break' is really an element of content used only to separate recursive lines of text without invoking the end of the "<p>" paragraph. You are attempting to use "<br />" to style the content. There are better & ore accurate ways to do this (using margin, etc.) because the 'line-break' height can vary depending upon what font and line-height you are using. A margin can be defined in px, and that is pretty solid across all browsers.