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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy [HTML/CSS] content truncated in a non-maximized window

    Hi Guys,

    Has anyone ever experienced this? It's frustrating as I cannot find an exact answer to solve the issue.

    HTML+CSS
    Code:
    <!--?xml version="1.0" encoding="iso-8859-1"?-->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title></title>
    <style>
    <!--
    
    body{
    	background:grey;
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    
    #parent1
    {
    	background:green;
    	height:500px;
    }
    
    #container1
    {
    	background:yellow;
    	width:794px;
    }
    
    #border1_1
    {
    	background:red;
    	height:4px;
    }
    //-->
    </style>
    </head>
      
    <body>
      <div id="parent1">
    		<div id="container1">
    			<img src="banner1.png" alt="Black Image">
    		</div>
      </div>
         <div id="border1_1"></div>
    </body>
    </html>
    Everything is cool in a MAXIMIZED window.

    However, if I don't maximize the window and shrink the horizontal size of the window - it will show a truncation for some of the content.

    In this case, if I view it in a non-maximized window it will truncate the <div id="border1_1"></div>

    Please see my attached files:
    - source.zip - contains 2 files my HTML source and 1 image file
    - errorScreenshot.jpg - this is the error I'm getting when I shrinked the window

    Anyone can help ?

    Thanks a lot,
    -ins
    Attached Thumbnails Attached Thumbnails [HTML/CSS] content truncated in a non-maximized window-errorscreenshot.jpg  
    Attached Files Attached Files

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    you can get rid of div border_1.... using css you can set border-top border-bottom etc and you can set color width etc

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    The width of #parent1 is not defined and will default to fill its container, i.e. the window viewport. Since window in this case is narrower than your image the #parent1 is not as wide as the image and will not bleed over into the scrollable area. Set width on #parent1 equal to or greater than the image and this problem is gone.

  • #4
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by kansel View Post
    The width of #parent1 is not defined and will default to fill its container, i.e. the window viewport. Since window in this case is narrower than your image the #parent1 is not as wide as the image and will not bleed over into the scrollable area. Set width on #parent1 equal to or greater than the image and this problem is gone.
    Hi Kansel,

    Thanks for that. However I have tried and it didn't work with the <div id="border1_1"></div>

    - I have set the parent1 width to be greater than the image (794px) - I have set to 800px;

    - But still the redline (border1_1) still displayed truncated in a non-maximized window - see the attached file.
    - The redline shows correctly in a maximized window - see the attached file


    The reason I didn't set the width for the parent1 initially because I wanted to strecth it naturally to 100% also with the border1_1 - I want to stretch it naturally based on the window therefore I didn't set the width on it.

    Please let me know if you need more info around this


    Regards,
    ins
    Attached Thumbnails Attached Thumbnails [HTML/CSS] content truncated in a non-maximized window-notmaximized-redlinenot100percent.jpg   [HTML/CSS] content truncated in a non-maximized window-maximized-redline100percent.jpg  
    Last edited by insignificant; 05-13-2011 at 04:51 AM. Reason: Forgot to put attachments

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    you can get rid of div border_1.... using css you can set border-top border-bottom etc and you can set color width etc
    Hi Alykins,

    Thanks for the reply, however the border_1 was just a concept that actually I wanted to put some DIVs over that.... but it failed - therefore I was showing an example using a border to make the code very simple.


    Regards,
    ins

  • #6
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Guys,

    Thanks for all your help, it fixed now...

    I added this code min-width:794px; into border1_1 therefore the minimum width will always follow the longest one (as long as you define the min-width: ???px).

    Thanks,
    ins


  •  

    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
    •