www.webdeveloper.com
Results 1 to 5 of 5

Thread: Cross Browser compatability issues

  1. #1
    Join Date
    Sep 2010
    Location
    Bangalore
    Posts
    51

    Cross Browser compatability issues

    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
    Attached Files Attached Files

  2. #2
    Join Date
    Nov 2010
    Posts
    15
    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.

  3. #3
    Join Date
    Dec 2004
    Location
    Kansas City, Missouri
    Posts
    31
    Hello,
    I use the following to match heights on 3 different divs and it has worked on multiple browsers/versions.

    Code:
    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>
    Code:
    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

  4. #4
    Join Date
    Sep 2010
    Location
    Bangalore
    Posts
    51
    Quote Originally Posted by drymsza View Post
    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

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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.
    Last edited by WebJoel; 12-24-2010 at 06:49 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles