Template Help!

jcb33

jcb33

jcb33

Soldato
Joined
11 Apr 2003
Posts
4,158
Location
Notts
Hi All, Got a bit of a problem with my site, if I resize it to much it breaks... My logo will come off the main content, my nav bar will go in and links onto the next line etc... And if my content is to large the content area expands....

http://jcb33.co.uk/index.php

1.JPG


2.JPG


Adding an additional container, which has "float: left" in fixes it on IE, but on FF, it has grey space between the content and the footer, and a gap at the top next to the logo, and a weird step so far down...
 
Last edited:
Mammalian said:
pretty sure it will be because of the width: 100%, try adding either a min-wdith: 200px; or something like that, or changing the width from a percentage to a fix width.
Click to expand...
Is there a way to do that so it works with IE6 etc?
 
Well the nav bar is going onto a new line because it can't fit on the page.

Look at the margins and padding you have on the main container and body, at a complete guess from looking at the site, I think that is your problem.

EDIT:

Again a guess, but I believe that the fact you have the wrap DIV (container DIV) set to 80% that is causing it to break when resized, because the things that are breaking just cannot fit into that size.
 
Dont see the problem, body padding + margin = 0, wrap = auto, and main = padding-bottom 10, removing them just breaks the page (As i expected)
 
Conrad11 said:
Again a guess, but I believe that the fact you have the wrap DIV (container DIV) set to 80% that is causing it to break when resized, because the things that are breaking just cannot fit into that size.
Click to expand...
 
Set a minimum and a maximum width?

Code: 
<style type="text/css">
div#wrap {
min-width:650px;
max-width:1200px;
}
</style>

<!--[if IE]>
<style type="text/css">
div#wrap {
width:expression(document.body.clientWidth > 1200? "1200px": "auto" );
width:expression(document.body.clientWidth < 650? "650px": "auto" );
}
</style>
<![endif]-->

... it's hardly a perfect solution, but it should work if that's what you want it to do...
 
robswan said:
Code: 
<style type="text/css">
div#wrap {
min-width:650px;
max-width:1200px;
}
</style>

<!--[if IE]>
<style type="text/css">
div#wrap {
width:expression(document.body.clientWidth > 1200? "1200px": "auto" );
width:expression(document.body.clientWidth < 650? "650px": "auto" );
}
</style>
<![endif]-->

... it's hardly a perfect solution, but it should work if that's what you want it to do...
Click to expand...
Thanks, had a go at this, but couple of problems:

1) If your on a PC below the resolution of 1152 x 864 the site fills the window.
2) If your on a resolutiojn less than 1024x768 you have to scroll left and right
3) In IE The site fills the whole window

Are the first 2 acceptable problems?
 
Hmmm...

Are the first two acceptable problems? That's entirely up to you to decide ;)

There already seems to be a lot of variation on your site between browsers - so it's kind of tricky to pick out any one specific problem.

I'm not sure I'm clear on what you want your site layout to be: could you perhaps post a link to another site that does what you want your layout to do? (And also tell me what browser you're using - just in case).
 
I want my layout, to do what it does, nav bar top and bottom, and a left hand nav bar down the side, as there is, and I want it to resize correctly when The browser window is resized.

Im using firefox and IE6, and Opera
 
I should note that it is now set to this:

Code: 
	<style type="text/css">
		div#wrap {
		min-width:980px;
		max-width:80%;
	}
	</style>

	<!--[if IE]>
	<style type="text/css">
		div#wrap {
		width:expression(document.body.clientWidth > 80%? "80%": "0" );
		width:expression(document.body.clientWidth < 980? "980px": "0" );
	}
	</style>
	<![endif]-->

Which works fine in FF and Opera, but in IE6, the guestbook still breaks!
 
You must log in or register to reply here.
Back
Top Bottom