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 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. 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 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 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 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 Link to comment https://forums.phpfreaks.com/topic/281024-css-issue-in-safari/#findComment-1444450 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.