Jump to content

Identical IE9 versions show same page different way


javajoemorgan

Recommended Posts

I have a very strange situation where two identical versions of IE9 are displaying the exact same page differently (or, at least one element of it). The only difference is that one is running on a desktop, the other on a laptop. See the images. The first is the image where the "START NOW" button is way over to the right. The other is the image from the other machine where the button is in the correct position.All other browsers display the button in the correct location. Can anyone even remotely explain this and give me any idea whatsoever into what I need to look for??? I mean, I can't even reliably implement an IE hack, because it might screw up the one displaying it correctly!DesktopIE9.pngLaptopIE9.pngHere is the code on the page for the start button:

<div id="startButton">	<input type="submit" value="START NOW >"/></div>

Here is the CSS:

#startButton {	position: relative;	left: 418px;	top: 250px;	width: 85px;	height: 25px;}#startButton input {	position: relative;	top: -105px;	left: 0px;	font-size: 80%;	font-weight: bold;	text-align: center;	color: rgb(29,75,137);}

Link to comment
Share on other sites

I suspect the positioning rules are the sole culprit. Java Joe, you did not say whether your laptop has a different screen resolution than your desktop (I suspect it does) or if you had tried to resize your desktop display. I have a feeling that if you drag the resize thumb around your window, that button is going to be all over the place.

Link to comment
Share on other sites

I think a little more context might help.On a side note, you really shouldn't be using positioning. You can achieve the same results using margins.
OK.. I'll see if I can rethink the layout of the page. I had designed the page originally with the button on the bottom, then they wanted it moved, so I just hacked it into place. I'll play a bit more with it.
Link to comment
Share on other sites

...you did not say whether your laptop has a different screen resolution than your desktop (I suspect it does) or if you had tried to resize your desktop display. I have a feeling that if you drag the resize thumb around your window, that button is going to be all over the place.
It does have a much higher resolution. Are you talking about changing the screen resolution, in general?? That is, from 1920 x 1080 to 1280 x 720???Even though I'm going to try to redesign the page so I don't have to position it, I would like to see what you're describing.
Link to comment
Share on other sites

You can't change your client's screen resolution. What you want to do is optimize for all resolutions, with 1024 being the lowest common denominator. Just resizing your window several times will give you a sense how clients with a lower resolution might see your page.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...