Forum Moderators: not2easy
My code is working fine with 1024 X 768, however any higher resolution and this image moves to the right on the "x" axis. My "y" axis (Vertical) works perfectly. Please take a look at the code below and tell me what I am doing wrong.
<form id="form1" runat="server"></form>
<div>
<body background="test copy.jpg" class="newStyle1">
<style type="text/css">
.newStyle1
{
background-color: #000000;
background-image: url('test copy.jpg');
background-repeat: no-repeat;
background-position: center bottom;
}
.newStyle2
{
position: fixed;
width: auto;
height: auto;
bottom: 4%;
right: 14%;
z-index: auto;
}
</style>
<p><img src="phone.png" alt="Contact Information"; class="newStyle2";/></p>
<script type="text/javascript" src="imgRoll.js"></script>
/I am sure after this are the closing tags </Div> and </body> but I didn't include it because I think I have bad CSS syntax.*/
The image using .newStyle2 moves to the right no matter how I code for it. I have tried not using the .newStyle2 class and going with direct properties in the <img> tag but that had the same result.
One more note! "Position: Fixed" on .newStyle2 didn't matter. I tried absolute, relative, my mom, everything there!
I really appreciate any input and will glady pay u Tuesday for a hamburger today!
The code there, well it got issues. A few obvious ones:
I only create CSS by checking it in a single browser that's not IE (IE will set you on the wrong foot). If you add something that didn't work, take it out again. After major milestone I might check it in the standards compliant browsers (FF, Opera, Safari) to make sure I'm not coding against a bug of one of them.
When it's all done I turn to IE, each version in turn and fix what needs to be fixed using conditional comments (mostly that takes about as much if not more time as the original coding did) but since it's just comments for the other browsers I don't have to go back to see how they react to all the workarounds of the bugs in the different versions of IE.
When coding in IE, you paint yourself in a corner in my experience.
When checking it often in IE you typically waste too much time on fixes instead of making progress with your design.
When coding I try to keep track of a fe needs of IE (like having a wrapper around my code as it's handy to do things on IE refuses to do on body)
As to positioning, there are 4 values:
I only create CSS by checking it in a single browser that's not IE (IE will set you on the wrong foot)
I find if you develop in IE and FF simultaneously the end product works for all browsers. Sometimes you HAVE TO stick IE hacks in there, but I find this method greatly reduces them.
