Welcome to WebmasterWorld Guest from 54.166.46.226

Forum Moderators: not2easy

Message Too Old, No Replies

Site shrinks/grows even with fixed width

Window Expands and compress

   
7:42 am on Mar 19, 2008 (gmt 0)

5+ Year Member



Greetings All,
Window expands where is image present(looks same width for image containg page but startes shrinking as soon as it does not find image) and compresses where image is not found.

I have used fixed width and I want to make all pages constant looks, no compressing and no expanding but could not figure out the cause on this.

Could anyone help me for this?

Thank you all for your kind help

Sheru

8:59 am on Mar 19, 2008 (gmt 0)

5+ Year Member



Hi Samu12,

Could you please post some relevant code?

10:24 am on Mar 19, 2008 (gmt 0)

5+ Year Member



Do you mean: how to size a browser window to fit the page? - bigger for bigger page - smaller for smaller page?
12:26 pm on Mar 19, 2008 (gmt 0)

5+ Year Member



No, In my case, total width is:1000px, and some of menu like projects, News and contacts, When projects menu is clicked, whole width seems to go left little a bit but when clicked on News menu comes to orginal postions. Now if click on contacts menu, width remains same, no movement of width to any direction.

case is: News and contacts pages contains no images... so behaviour is of same type but projects page contains images.

1:18 pm on Mar 19, 2008 (gmt 0)

5+ Year Member



soundas like you have a :hover defined for the projects menu, e.g., a border is created, or padding/margins are altered? but again.. hard to say without the relevant code snippet
4:17 am on Mar 27, 2008 (gmt 0)

5+ Year Member



Greetings All!

Thank you all for your great response.. one more time to bother you all.

Yes, I have hover defined menu but then if I removed hover part, behavior is still same. No success..

I have container as shown below

#maincontainer {
position:relative;
width: 1000px;
\width: 1000px;
w\idth: 1000px;
min-height: 300px;

margin-left:auto;
margin-right:auto;
margin-top:-17px;
padding:0px;
padding-top:1px;
padding-bottom:1px;
background-color: #fff;
border: 1px solid #369;
/* overflow:auto; */
}

WHAT I FOUND THAT IS, IN BODY CSS SHOWN BELOW IF I ADD position:relative; width: 1000px; THESE TWO LINES entire website becomes left align BUT THERE IS NO COMPRESS AND EXPAND. That means success a bit.

PROBLEM NOW IS: I Can't make enter website centered. Is there any way that i can make whole site centered?

body {
background-image: url();
margin:0px;
font-family: Arial, Helvetica, Verdana, "Lucida Grande", Tahoma;
font-size: 12px;
text-align: justify;
line-height: 16px;
color: #4F5155;
border:2px solid green;

}

Any Suggestions..
It's urgent.
Thank you all for your kind help

5:09 am on Mar 27, 2008 (gmt 0)

5+ Year Member



From CSS 2.1 specification, section 10.3.3 "Block-level, non-replaced elements in normal flow"
If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.
Since from your code, #maincontainer already has left and right margins set to 'auto', I'd guess that #maincontainer is not a block element. If #maincontainer is a block element and the browser is IE, then body{text-align:justify} may be interfering. If #maincontainer is not a block element (?), you can do this and see if it helps: #maincontainer{display:block}.

I question the width hacks.
I question negative margin. I don't know what you are trying to achieve but negative margin doesn't make sense.
#maincontainer padding could more simply be {padding:1px 0}

Edit: fixed error in padding property.

[edited by: MarkFilipak at 5:11 am (utc) on Mar. 27, 2008]

8:50 am on Mar 27, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



what's your Doctype?

and can you post the html for the body/#maincontainer/nav outline please

the width hacks do indeed look unnecessary seeing as they're all setting the same width anyway but that shouldn't affect the centering

sounds like your images are acting like a 'prop' which might indeed suggest an inline container, or a table without width set?

HTML should help thanks

9:02 am on Mar 27, 2008 (gmt 0)

5+ Year Member



Hi MarkFilipak,
Thank you so much for your prompt response and great help. It's great and amazing forum where get prompt response.

I will explain my senario..
<body>
<div id="header"></div>// banner & width:1000px
<div id="headtext"></div>//just below banner eg.logged as Samu & width:1000px
<div id="maincontainer"></div>
</body>

AND I HAVE REPLACED THOSE LINES BELOW FROM #maincontainer, #header and #headertext and #footer.
margin-left:auto;
margin-right:auto;

WITH THE margin-left:180px;

Status: Now it seems in middle and SHOWS NO COMPRESSION AND NO EXPANDS IN WIDTH.

NOW MY QUESTION: Is this the right way to fix this kind of problem? Please need your suggestion. Does it have any problem with windows resolution size while viewing pages with different resolution, like
800x600 px or may be 1280x960 so on..

Thank you for your help

9:28 am on Mar 27, 2008 (gmt 0)

5+ Year Member



Just now found a problem, setting with margin-left:180px;

As I test by compressing whole window from right to left, winow just stops at margin 180px from left with background only. That means my whole container stops at 180px from left.

10:18 am on Mar 27, 2008 (gmt 0)

5+ Year Member



Hi SuzyUK,
Thanks for your great help.

Here is my html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div id="header"></div>

<div id="headertext">

<div style="float:right;margin-right:1px">
current language: english&nbsp;&nbsp;<img src="http://localhost:8888/images/flags/english_current.gif" style="border:0" />
<img src="http://localhost:8888/images/flags/dutch.gif" style="border:0" /></a></div>

<div style="float:center;margin-left:415px;padding-bottom:2px">
current theme: default <a href="http://localhost:8888/theme/default" title="default">default</a> <a href="http://localhost:8888/theme/clean" title="clean">clean</a> <a href="http://localhost:8888/theme/black" title="black">black</a></div><!--- theme -->

<div style="float:left; padding-left:20px;margin:-18px">

Logged in as,&nbsp;test&nbsp;<a href="http://localhost:8888/logout" title="Logout">Logout</a><br>

</div><!--- logged as -->

</div><br><!--- headertext -->

<div id="maincontainer">

<div style="clear:both"></div>

<div id="navcontainer">

<div id="sidebarmenu">

<ul>

<li><a>Areas on Menu</a>
<ul>
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">Donate</a></li>
<li><a href="">test3</a></li>
</ul>
</li>

</ul>
</li>
</ul>

</div><br><!--- sidebarmenu -->



</div><!--- navcontainer -->
<div class="contentbox"><div>



</div> </div><!--- maincontainer -->

</div>
<div id="footer">Rendered in 0.0179 seconds ;&nbsp;</div>


</body>
</html>

2:52 pm on Mar 27, 2008 (gmt 0)

5+ Year Member



samu12,

You have too many

</li>
and
</ul>
and your
div
opening and closing tags don't match -- either not enough
<div>
or too many
</div>
.

Please be careful. Please, take the time to create a TEST PAGE just for us. Then TEST IT. Then copy it here.

3:26 pm on Mar 27, 2008 (gmt 0)

5+ Year Member



Try this. It works for the HTML you supplied.
<style>
#header{width:1000px;margin:0 auto;background-color:red}
#headertext{width:1000px;margin:0 auto;background-color:red}
#maincontainer{width:1000px;margin:0 auto;background-color:red}
#footer{width:1000px;margin:0 auto;background-color:red}
</style>
4:12 pm on Mar 27, 2008 (gmt 0)

5+ Year Member



Here you go (works in IE too)
<style>
#centerMe{
width:1000px;
left:0;
margin:0 auto;
position:expression('absolute'); /* IE */
left:expression(String((document.body.offsetWidth-1000)/2) +'px') /* IE */
}
#header,#headertext,#maincontainer,#footer{width:100%}
</style>
<body>
<div id='centerMe'>
...your-content-here...
</div>
</body>
5:16 pm on Mar 27, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I would suggest a wrapper (a fake body) element too, as yes every block element (div) inside it will the be 100% of it's parent by default.. which means you don't have to worry about centering each element separately - but why complicate it with an IE expression and absolute positioning?

the margin: 0 auto; method of centering will work with the provided doctype in IE6 and 7, if you want centering/support in IE5.5 too then use the text-align workaround.

body {
text-align: center; /* IE5.5 center */
}

#wrapper {
width: 1000px;
margin: 0 auto;
text-align: left; /* override IE center, put your justify here if that's your pref */
border: 2px solid green;
}

-Suzy

6:18 pm on Mar 27, 2008 (gmt 0)

5+ Year Member



> ...why complicate it with an IE expression...
Because without the expressions, the content is not centered in IE6. Try it yourself:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style>
#maincontainer {
position:relative;
width: 1000px;
\width: 1000px;
w\idth: 1000px;
min-height: 300px;
margin-left:auto;
margin-right:auto;
margin-top:-17px;
padding:0px;
padding-top:1px;
padding-bottom:1px;
background-color: #fff;
border: 1px solid #369;
/* overflow:auto; */
}
body {
background-image: url();
margin:0px;
font-family: Arial, Helvetica, Verdana, "Lucida Grande", Tahoma;
font-size: 12px;
text-align: justify;
line-height: 16px;
color: #4F5155;
border:2px solid green;
}
#centerMe{
width:1000px;
left:0;
margin:0 auto;
/* --- COMMENTED OUT
position:expression('absolute');
left:expression(String((document.body.offsetWidth-1000)/2) +'px')
COMMENTED OUT -- */
}
#header,#headertext,#maincontainer,#footer{width:100%}
</style>
<body>

<div id="centerMe">
<div id="header">
</div>
<div id="headertext">
<div style="float:right;margin-right:1px">
current language: english&nbsp;&nbsp;
<img src="english_current.gif" style="border:0" />
<img src="dutch.gif" style="border:0" /></a>
</div>
<div style="float:center;margin-left:415px;padding-bottom:2px">
current theme: default
<a href="#" title="default">default</a>
<a href="#" title="clean">clean</a>
<a href="#" title="black">black</a>
</div><!--- theme -->
<div style="float:left; padding-left:20px;margin:-18px">
Logged in as,&nbsp;test&nbsp;<a href="#" title="Logout">Logout</a><br>
</div><!--- logged as -->
</div><br><!--- headertext -->
<div id="maincontainer">
<div style="clear:both">
</div>
<div id="navcontainer">
<div id="sidebarmenu">
<ul>
<li><a>Areas on Menu</a>
<ul>
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">Donate</a></li>
<li><a href="">test3</a></li>
</ul>
</li>
</ul>
</div><br><!--- sidebarmenu -->
</div><!--- navcontainer -->
<div class="contentbox">
<div>
</div>
</div><!--- maincontainer -->
<div id="footer">Rendered in 0.0179 seconds ;&nbsp;
</div>
</div>

</body>
</html>

[edited by: SuzyUK at 6:49 pm (utc) on Mar. 27, 2008]
[edit reason] minimised sidescroll [/edit]

6:46 pm on Mar 27, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Because without the expressions, the content is not centered in IE6. Try it yourself:

I did, and it is centering just fine in IE6 without the expression?

and there is still a lot of unnecessary widths in the CSS..

edit because the closing maincontainer tag was confusing me, it's not the one it says it is.. and I think it should be inside the footer? although that makes no difference to the centering..

[edited by: SuzyUK at 6:54 pm (utc) on Mar. 27, 2008]

7:03 pm on Mar 27, 2008 (gmt 0)

5+ Year Member



> I did, and it is centering just fine in IE6 without the expression?
Uh-oh! What's different between my IE6 and your IE6?
8:16 pm on Mar 27, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



dunno Mark, but logic tells me that IE6 would always do fine with
margin: 0 auto;
as that was one of it's "enhancements"

no matter, talk has already turned to not supporting IE5.x so I'd rather use the text-align: center; which is only for IE5.x (back hack/workaround) and then rely on what I know about 6 instead?

will post some compare code in a bit if you or samu12 want but either way will work and it's still about choice

11:28 pm on Mar 27, 2008 (gmt 0)

5+ Year Member



> no matter, talk has already turned to not supporting IE5.x so I'd rather use the text-align: center; which is only for IE5.x (back hack/workaround) and then rely on what I know about 6 instead?

I don't understand your reply, Suzy. (I _am_ talking about IE6. The code I posted needs the expressions to display centered in IE6... at least, my copy of IE6.)

Re, IE5/5.5: Gee, how many web pages these days will even show up in them? I'd have thought that IE5.x users would have been forced to upgrade long ago.

4:14 am on Mar 28, 2008 (gmt 0)

5+ Year Member



Hi Both,
Thank You Both for All your suggestions.. and GREAT TIME for me.

As per the suggestion, I am trying to work out.. IF success or Even Failure, I will come to this forum.

Once My heartfelt thanks to Both

5:55 am on Mar 28, 2008 (gmt 0)

5+ Year Member



Hi,
Could not figure out exact cause.

I tested by removing things like #header,#headertext, #footer and #maincontainer

NOW, I HAVE

<body>

<?php echo $content?>// WITH THIS ALSO SAME PROBLEM WHERE NO DIV,NAV EXITS.

</body>

and noticed that in my page that

Behaviour patter are same for less content in a page(menu for front end and back) where there is not horizontal scroll bar produced.(width of entire web remains same)

Behaviour patter becomes different for large content in a page where there is horizontal scroll bar produced.(Some menu has less content and others large)

Of all Large content menu --- Same width
Of all Small content menu --- Same width

Now pattern differs here
While moving from Large content to Small content menu OR VICE-VERSA, there appears
width compressing and expands

NO JOY,
ANY SUGGESTIONS..

6:02 am on Mar 28, 2008 (gmt 0)

5+ Year Member



> Behaviour patter ...

Can you restate your problem? I don't understand what you wrote.

6:13 am on Mar 28, 2008 (gmt 0)

5+ Year Member



Hi Both,
Thank you for your precious time for me.. I will remember this forum and come to drop stuff.. It's an amazing forum that i rarely find.

For me Seems problem fixed. Just now did this way in my body part..

body {

position:relative;
width:1000px;
margin-left:auto;
margin-right:auto;
font-family: Arial, Helvetica, Verdana, "Lucida Grande", Tahoma;
font-size: 12px;
text-align: justify;
line-height: 16px;
color: #4F5155;
border:none;
overflow:scroll; // Actually this property Fixed my problem.
}

I have tested in Camino browser(MacOs) and will try in IE and others

NOW WITH JOYOUS HEART
Thank you Both
Hope to keep in touch in this forum
Samu