Position Not Showing Correctly in Chrome

Go down

Solved Position Not Showing Correctly in Chrome

Post by bmbmjmdm on October 15th 2014, 9:43 pm

Hi,

I've been working on a sidebar widget for a little while now and noticed something strange. I have several text/button inputs for a calculator separated by br tags. These all display properly in Firefox and in Internet Explorer, however when I looked at it in Chrome and Opera, the bottom-most row of text/buttons were slightly off (to the right). I was wondering if anyone knew what could cause this? Here is a link to my site (to see the calculator I'm speaking of, click "CALC" in the sidebar).

http://shinobievolution.forumotion.com/

Here is also a code snippet for the calculator (took out the onClick/onChange actions because they were lengthy):

Code:

  <form name="calculator" >
<span style='font-size:150%;' id="levelName">Effective Lvl:</span> <input type="textfield" name="ans" value="" style='width:30%; height:20px; font-size: 115%; position: relative; top: -3px;'>
<hr><br>
<span id="type1" style="display:inline"><span style='font-size:150%;'>Current Lvl:</span> <input type="textfield" name="curLvl" value="" onChange="..." style='width:35%; height:20px; font-size: 115%; position: relative; top: -3px;'>
<br>
<input type="textfield" name="plusP" value="" style='width:30%; height:20px; font-size: 125%;'>
<input type="button" value="%+" onClick="..." style='width:40%; height:22px; font-size: 130%;'>
<br>
<input type="textfield" name="minusP" value="" style='width:30%; height:20px; font-size: 125%;'>
<input type="button" value="%-" onClick="..." style='width:40%; height:22px; font-size: 130%;'>
<br>
<input type="textfield" name="clashJ" value="" style='width:30%; height:20px; font-size: 125%;'>
<input type="button" value="CLASH" onClick="..." style='width:40%; height:22px; font-size: 130%;'>
<br>
<input type="textfield" name="mainJ" value="" style='width:30%; height:20px; font-size: 125%;'>
<input type="button" value="Maintain" onClick="..." style='width:40%; height:22px; font-size: 130%;'></span></form>


Last edited by bmbmjmdm on October 16th 2014, 7:53 pm; edited 1 time in total

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Position Not Showing Correctly in Chrome

Post by _Twisted_Mods_ on October 15th 2014, 10:12 pm

i tested your code on my forum on ff and chrome looks the same on both for me so can i get a screen shot of what it should loook like and what it looks like messed up
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Position Not Showing Correctly in Chrome

Post by bmbmjmdm on October 16th 2014, 12:20 am

How it should look (look at the textfield with the button "Maintain" next to it):


How it looks in Opera/Chrome:

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Position Not Showing Correctly in Chrome

Post by _Twisted_Mods_ on October 16th 2014, 1:19 am

try this


Code:
<style>
  .someform{align:right;}
</style>      
<form name="calculator">
 <div class="someform">
        <span style="font-size:150%;" id="levelName">Effective Lvl:</span> <input name="ans" value="" style="width:30%; height:20px; font-size: 115%; position: relative; top: -3px;" type="textfield" />        
 <hr /><br />    <span id="type1" style="display:inline"><span style="font-size:150%;"></span>Current Lvl: <input name="curLvl" value="" onchange="..." style="width:35%; height:20px; font-size: 115%; position: relative; top: -3px;" type="textfield" />    <br /></span>           <input name="plusP" value="" style="width:30%; height:20px; font-size: 125%;" type="textfield" />    <input value="%+" onclick="..." style="width:40%; height:22px; font-size: 130%;" type="button" />    <br />    <input name="minusP" value="" style="width:30%; height:20px; font-size: 125%;" type="textfield" />    <input value="%-" onclick="..." style="width:40%; height:22px; font-size: 130%;" type="button" />    <br />    <input name="clashJ" value="" style="width:30%; height:20px; font-size: 125%;" type="textfield" />    <input value="CLASH" onclick="..." style="width:40%; height:22px; font-size: 130%;" type="button" />    <br />    <input name="mainJ" value="" style="width:30%; height:20px; font-size: 125%;" type="textfield" />    <input value="Maintain" onclick="..." style="width:40%; height:22px; font-size: 130%;" type="button" />  <span id="type1" style="display:inline"></span>  
 </div>
</form>
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Position Not Showing Correctly in Chrome

Post by bmbmjmdm on October 16th 2014, 4:50 am

Tried it out, but it doesn't seem to have any effect

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Position Not Showing Correctly in Chrome

Post by _Twisted_Mods_ on October 16th 2014, 5:03 am

idk then because it looks fine to me maybe has something to do with your theme or css your using
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Position Not Showing Correctly in Chrome

Post by Ange Tuteur on October 16th 2014, 5:06 am

Hello bmbmjmdm,

I'm guessing it could be because of the breaks. I'm just speculating, because I remember IE7 had a similar problem. Anyway try this, I added a break after your last input :
Code:
<form name="calculator" >
<span style='font-size:150%;' id="levelName">Effective Lvl:</span> <input type="textfield" name="ans" value="" style='width:30%; height:20px; font-size: 115%; position: relative; top: -3px;'>
<hr><br>
<span id="type1" style="display:inline"><span style='font-size:150%;'>Current Lvl:</span> <input type="textfield" name="curLvl" value="" onChange="..." style='width:35%; height:20px; font-size: 115%; position: relative; top: -3px;'>
<br>
<input type="textfield" name="plusP" value="" style='width:30%; height:20px; font-size: 125%;'>
<input type="button" value="%+" onClick="..." style='width:40%; height:22px; font-size: 130%;'>
<br>
<input type="textfield" name="minusP" value="" style='width:30%; height:20px; font-size: 125%;'>
<input type="button" value="%-" onClick="..." style='width:40%; height:22px; font-size: 130%;'>
<br>
<input type="textfield" name="clashJ" value="" style='width:30%; height:20px; font-size: 125%;'>
<input type="button" value="CLASH" onClick="..." style='width:40%; height:22px; font-size: 130%;'>
<br>
<input type="textfield" name="mainJ" value="" style='width:30%; height:20px; font-size: 125%;'>
<input type="button" value="Maintain" onClick="..." style='width:40%; height:22px; font-size: 130%;'>
<br></span></form>
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2911
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Position Not Showing Correctly in Chrome

Post by bmbmjmdm on October 16th 2014, 6:48 am

Wow, nice catch! It works in all browsers, thank you Ange!

bmbmjmdm
Forumember

Posts : 52
Reputation : 1
Language : English

Back to top Go down

Solved Re: Position Not Showing Correctly in Chrome

Post by _Twisted_Mods_ on October 16th 2014, 7:01 am

edit first post and mark as solved pls
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Position Not Showing Correctly in Chrome

Post by Ange Tuteur on October 16th 2014, 10:18 pm

You're welcome

Topic archived
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2911
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum