...

View Full Version : [HTML/CSS] content truncated in a non-maximized window



insignificant
05-13-2011, 03:55 AM
Hi Guys,

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

HTML+CSS


<!--?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

alykins
05-13-2011, 04:13 AM
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

kansel
05-13-2011, 04:13 AM
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.

insignificant
05-13-2011, 05:50 AM
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

insignificant
05-13-2011, 05:57 AM
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

insignificant
05-13-2011, 07:28 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum