Geek Answers Handbook

Different text positions in chrome. IE and FF

I am making a website with css and jquery. One of my script is to show the text in a specific place with a mouse click. The text displays well in google chrome in its intended position. but in IE9 and FF17 they are offset from the intended position. My background image is such that it matches the size of the browser window.

I am attaching a screenshot that will give a better idea. I also write code. perhaps only a little tweaking is required, but I don't understand. Please help me with this.

This is the comparison between chrome and IE. the right one is chrome which is the right one. FF and IE display at same positions. This is a comparison between chrome and IE. right is chrome which is right. FF and IE are displayed in the same positions.

thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(document).ready(function(){ *Here will my script which is just simple .show and .hide functions* }); </script> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Train of Thought</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin-top: 0px; padding-top: 0px; top: 0px; margin-left: 0px; padding-left: 0px; left: 0px; } body { overflow: hidden; } #background {width: 100%; height: 100%; display: block; position: absolute; z-index:1;} .content { visibility:hidden; border-style: none; display: block; position: fixed; text-align: centre; z-index: 1; margin-top: 40%; background-color: transparent; font-size:1.5em; opacity: 0.697; } #thought_text{ margin-left: 25%; margin-right: 25%; } <div><img id="background" alt="background" src="tot1.png"></div> <div class="content" id="thought_text">Here goes the text<br></div>
+7
source share
6 answers

There is a simple hack that will work in IE9 for vertically centering elements. It uses the transform: translateY property to customize an element inside another element. We can apply the class to our inner element like this:

 .element { position: relative; top: 50%; transform: translateY(-50%); }

You will need to add the appropriate prefixes for the providers. Here is a great article: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

+1
source

First, for fixed positioning, use the top , bottom , left , right attributes instead of margin-top , margin-right ..

Secondly, you applied the same z-index 's to siblings.

Thirdly, using the img element for the background this way is not the best solution. You have to go for CSS background-image for body or text-div wrapper stretched to 100%.

Complete solution:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(document).ready(function(){ // Here will my script which is just simple .show and .hide functions* }); </script> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Train of Thought</title> <style type="text/css"> body { width: 100%; height: 100%; margin: 0; padding: 0; background-image:url(http://25.media.tumblr.com/6d28260f10f17c0d2eab47398fd855f6/tumblr_mj9ha54DuW1rub5xuo1_1280.jpg); background-position: top center; background-repeat:no-repeat; } .content { top: 40%; display: block; position: fixed; text-align: centre; z-index: 1; background-color: transparent; font-size:1.5em; opacity: 0.697; border-style: none; } #thought_text{ left: 25%; right: 25%; color:#000; } </style> <body> <div class="content" id="thought_text">Here goes the text<br></div> </body> </head>
+1
source

Consider removing the #thought_text{} block in the css file and combining it into a .content {} block to avoid overriding attribute values

or

adding an important directive to attributes

and also change

margin-top: 40%; to some fixed value, such as margin-top: 250px; , which ensures that the top positions are the same in all browsers.

0
source

As I understand it, you stretch the image to the entire page and want to focus your block on the text. You have a 50% width (100% -25% margin on both sides) and a 40% upper bound.

With position:fixed , you have top and left properties to set the position relative to the page.

 .content { position:fixed; /* taking it over the page */ z-index:2; /* and over the image */ left:25%; /* move to 25% from left */ width:50%; /* and setting width */ top:40%; /* move to 40% from top */ font-size:1.5em; opacity: 0.697; }

And you can delete

 #thought_text{ margin-left: 25%; margin-right: 25%; }

You get the original error, because the top / bottom margin and percent fill are calculated from a width not in height according to spec .

0
source

This is just an idea, hope this is helpful.

 <style> #background { background:url('tot1.png') no-repeat; width: 100%; height: 100%; position: absolute; z-index:1; } </style> <div id="background"> <div class="content" id="thought_text">Here goes the text<br></div> </div>
0
source

You can use a little javascript to detect the presence of IE or Firefox, and then change the margin / position of the text accordingly.

     function detectBroser () {
         if (navigator.userAgent.indexOf ("Firefox")! = - 1)
             return "Firefox";
         else if (navigator.userAgent.indexOf ("MSIE")! = - 1)
             return "Internet Explorer";
     }
-one
source

More articles:


All Articles