SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making it compatible with at least few browsers ?

    So I ran into another issue with current website I am trying to style. From what I have read there's no way I could make it look the same to all browsers just because there's too many of them. But it seems on 3 of them I have check it all looks different,so how to I apply different css rules to different browsers and so one would not interact with each other ?
    Code:
    http://screencast.com/t/P1Jbk9kB iron browser
    http://screencast.com/t/dx2xOzWq2 firefox 
    http://screencast.com/t/ZmZlgbQE1Nj chrome
    Thanks for you help and time.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You would need to post the code or a link to your site if you want us to take a look.

    It should be possible to position that arrow consistently across browsers, though I've never heard of iron browser before..
    You only need to care about Chrome, Firefox, Safari, Opera and IE.

    And then there's this..
    http://dowebsitesneedtolookexactlyth...rybrowser.com/

  3. #3
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    You would need to post the code or a link to your site if you want us to take a look.

    It should be possible to position that arrow consistently across browsers, though I've never heard of iron browser before..
    You only need to care about Chrome, Firefox, Safari, Opera and IE.

    And then there's this..
    http://dowebsitesneedtolookexactlyth...rybrowser.com/
    LOL, I honestly thought I did posted url
    Code:
    http://www.supersolarpanels.co.uk/
    and that for a link,gives a lot of knowledge

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    So the reason that image moves around is because it's positioned to the bottom of the window - depending on the window size it will move around.
    Remove the bottom value and make it top: 445px; instead.

  5. #5
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    So the reason that image moves around is because it's positioned to the bottom of the window - depending on the window size it will move around.
    Remove the bottom value and make it top: 445px; instead.
    Thank you markbrown4 but still not working out and this is what I see in chrome:
    Code:
    http://screencast.com/t/NirDAi9Gv0Sw
    firefox:
    Code:
    http://screencast.com/t/G1xhXUBx6Y

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The big button is in exactly the same place in those screenshots of yours. Its the window that you are viewing it through that is different. You just have the browser's window open at a different size in each browser.

    The problem is that you have absolutely positioned that button from the viewport so its position will never match the layout unless you just happen to have the window open at the right point. What you need to do is to tie the absolute element to #page by creating a local stacking context by adding position:relative to #page and then the absolute element will take its position from the page and not the viewport.

    e.g.

    Code:
    #page{position:relative}
    
    
    #submit-image {
     left: 700px;
     position: absolute;
     top: 445px;
     z-index: 9;
    }

  7. #7
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The big button is in exactly the same place in those screenshots of yours. Its the window that you are viewing it through that is different. You just have the browser's window open at a different size in each browser.

    The problem is that you have absolutely positioned that button from the viewport so its position will never match the layout unless you just happen to have the window open at the right point. What you need to do is to tie the absolute element to #page by creating a local stacking context by adding position:relative to #page and then the absolute element will take its position from the page and not the viewport.

    e.g.

    Code:
    #page{position:relative}
    
    
    #submit-image {
     left: 700px;
     position: absolute;
     top: 445px;
     z-index: 9;
    }
    Thanks,it solved some of it,but still on smaller screen laptops i get button floating somewhere in the middle of data imput fields maybe there's a way to position that image to certain area like a locker. Or I see some code in css style sheet that is for IE or FireFox. Sorry if the question is dumb

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by stevenukas View Post
    T maybe there's a way to position that image to certain area like a locker.
    That's what the position:relative on the parent does. It creates a local stacking context fro the absolute element and the absolute element is then tied to that starting point

    The problem on smaller screens (which I didn't notice earlier) is that you have a fluid width page and therefore as the page gets smaller the absolute element still stays in exactly the place it was put but will then overlap anything in the way because absolute elements are removed from the flow and in a fluid environment you don;t want absolute elements.

    Instead you should float the button and let it take part in the flow but you will need to adjust the html.

    First you will need to add a class to the form inputs and float the block.

    e.g.
    Code:
    <p class="forminputs"><span class="wpcf7-form-control-wrap your-name"><input  etc......
    Then you will need css like this:
    Code:
    #submit-image {
    position:static;
    clear:none;
    float:left;
    margin-top:-25px;
    }
    .forminputs{float:left;margin-right:-30px}
    Or alternatively move the button before that p element in the html and just float it right (remembering to remove the absolute positioning).

  9. #9
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Or alternatively move the button before that p element in the html and just float it right (remembering to remove the absolute positioning).
    Huge thank you Paul for your time. Gonna try to make it happen.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •