Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    iframe, Background-size & CSS3 problem

    I have a page that displays a mobile site within an iframe (both on the same domain). The logo at the top and the contact icons above the keyboard of the iPad image are not resizing properly. The problem only occurs with Internet Explorer 8 and 9. I know that both sets of images use special css code to display better image quality on a HD/Retina displays. Everything views fine in the latest versions of Firefox and Chrome, its just MSIE 8 & 9 with the problem. I inherited this site, and my knowledge of CSS, CSS3 etc is very limited. Any suggestions would be greatly appreciated. Link below.

    http://www.mobilewebez.com/ipad.html

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    Finland
    Posts
    59
    Thanks
    3
    Thanked 9 Times in 9 Posts
    Instead of putting the logo on BG with CSS try this;

    <div class="logo">
    <img src="../images/logo.png" width="231px" height="40px" />
    </div>

    -Riku

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: iFrame, Background-size & CSS3 problem

    Thank you for your reply. It's my understanding that within the css there is code for "background-size" that provides the option to display the logo and icon images with the larger size images when the website is viewed with a mobile device with retina display. If I do as you suggest I believe I would lose that option.

  • #4
    New Coder
    Join Date
    Feb 2012
    Location
    Finland
    Posts
    59
    Thanks
    3
    Thanked 9 Times in 9 Posts
    Wll the background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

    And how you want the image to resize anyways you have given specific height and width in pixels for you background-size and the logo div? This will make them X height and X width always. You can use % though if you want the div be always lets say 20% width of the display.
    Last edited by Riku; 06-12-2012 at 06:34 PM.

  • #5
    New Coder
    Join Date
    Jun 2012
    Location
    MI
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You can use :
    Code:
    background.image {
    	width: 350px; height: 75px;
    	background: url("logo.jpg") no-repeat;
    	}
    	logo {
    		display: block;
    		width: 0;
    		height: 0;
    		overflow: hidden;
    	}
    I checked it out. Are you going to use JavaScript to go back/home in the frame page. ?


  •  

    Tags for this Thread

    Posting Permissions

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