The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Position Not Showing Correctly in Chrome

View previous topic View next topic 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

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
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>

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
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

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
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>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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