homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Site shrinks/grows even with fixed width
Window Expands and compress
samu12




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

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

 

jelle76




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

Hi Samu12,

Could you please post some relevant code?

MarkFilipak




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

Do you mean: how to size a browser window to fit the page? - bigger for bigger page - smaller for smaller page?

samu12




msg:3605184
 12:26 pm on Mar 19, 2008 (gmt 0)

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.

jelle76




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

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

samu12




msg:3611892
 4:17 am on Mar 27, 2008 (gmt 0)

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

MarkFilipak




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

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]

SuzyUK




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

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

samu12




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

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

samu12




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

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.

samu12




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

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>

MarkFilipak




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

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.

MarkFilipak




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

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>

MarkFilipak




msg:3612356
 4:12 pm on Mar 27, 2008 (gmt 0)

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>

SuzyUK




msg:3612449
 5:16 pm on Mar 27, 2008 (gmt 0)

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

MarkFilipak




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

> ...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]

SuzyUK




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

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]

MarkFilipak




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

> I did, and it is centering just fine in IE6 without the expression?
Uh-oh! What's different between my IE6 and your IE6?

SuzyUK




msg:3612661
 8:16 pm on Mar 27, 2008 (gmt 0)

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

MarkFilipak




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

> 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.

samu12




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

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

samu12




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

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..

MarkFilipak




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

> Behaviour patter ...

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

samu12




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved