conceptenvy Posted August 10, 2013 Share Posted August 10, 2013 In a smaller browser window the css moves in Safari It appears to look fine in other browsers except Safari Take a look at http://tinyurl.com/mvkkcfg? In Chrome the Firefox - Then compare in Safari I just need the OR image to say in the same spot to matter what browser or window size is used here is the code that Im currently using <div style="z-index:10; position:absolute; margin-top:400px; margin-left:335px"><img src="http://173.83.251.7/~iworeitb/wp-content/uploads/2013/06/or.png" alt="" /></div> Please help thanks Quote Link to comment https://forums.phpfreaks.com/topic/281024-css-issue-in-safari/ Share on other sites More sharing options...
Muddy_Funster Posted August 10, 2013 Share Posted August 10, 2013 you can't use fixed values in an adaptive design. You need to rethink your CSS, either put a container around the whole lot that has a min-width where the images still line up correctly, use % values for your margins and widths, or look into a completly adaptive layout that chooses the css to use on the fly depending on the window size. Quote Link to comment https://forums.phpfreaks.com/topic/281024-css-issue-in-safari/#findComment-1444325 Share on other sites More sharing options...
conceptenvy Posted August 10, 2013 Author Share Posted August 10, 2013 I changed the code to as follows still no luck on a good position any other suggestions? <div id = 'O' style="z-index:10; position:absolute; margin-top:20%; margin-left:18%"><img name="" src="http://shopiworeitbest.com/wp-content/uploads/2013/08/or.png" alt="" /></div> #O{ height: 100%; max-height: 100%; overflow: auto; width: 100%; http://tinyurl.com/mvkkcfg Quote Link to comment https://forums.phpfreaks.com/topic/281024-css-issue-in-safari/#findComment-1444331 Share on other sites More sharing options...
conceptenvy Posted August 10, 2013 Author Share Posted August 10, 2013 you can't use fixed values in an adaptive design. You need to rethink your CSS, either put a container around the whole lot that has a min-width where the images still line up correctly, use % values for your margins and widths, or look into a completly adaptive layout that chooses the css to use on the fly depending on the window size. I changed the code to as follows still no luck on a good position any other suggestions? <div id = 'O' style="z-index:10; position:absolute; margin-top:20%; margin-left:18%"><img name="" src="http://shopiworeitbe.../2013/08/or.png" alt="" /></div> #O{ height: 100%; max-height: 100%; overflow: auto; width: 100%; http://tinyurl.com/mvkkcfg Quote Link to comment https://forums.phpfreaks.com/topic/281024-css-issue-in-safari/#findComment-1444332 Share on other sites More sharing options...
Muddy_Funster Posted August 11, 2013 Share Posted August 11, 2013 try google - search for responsive web design and/ or adaptive css Quote Link to comment https://forums.phpfreaks.com/topic/281024-css-issue-in-safari/#findComment-1444351 Share on other sites More sharing options...
darkfreaks Posted August 12, 2013 Share Posted August 12, 2013 http://lmgtfy.com/?q=Adaptive+Div+CSS+design Quote Link to comment https://forums.phpfreaks.com/topic/281024-css-issue-in-safari/#findComment-1444450 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.