Forums

mattjfox

Hi everyone. I have a sample of the issue instead of the whole web page. Here is the code, any help would be greatly appreciated. I think you will be able to see the problem. When I minimize the browser window and then scroll to the right the navigation bar and the background is cut off. This seems to happen with IE7 and latest version of Firefox. Any suggestions I am stumped. Thank you.

@charset \"utf-8\";
/* CSS Document */
/* =CALL LIBRARY */
	@import url(\"reset-min.css\"); /* ------- Reset all CSS Styles */

/* =GENERAL - the general styles */
#header{
		height: 253px;
		background:url(../images/top_bg.jpg)  top repeat-x;
		position: relative;
		/*overflow:hidden;*/
	}
	.container{
		width:900px;
		margin: 0 auto;
		position: relative;
		overflow:hidden;
	}
	
#navigation li{
		float: left;
		padding-right: 5px;
		margin-right: 5;
		text-transform: uppercase;
		font-size: 1.3em;
		font-weight: normal;
	}
	#navigation li a{color: #fff;}
	#navigation li a:hover,#navigation li.active a{color: #2c2c2c;}
#navigation{
		position: absolute;
		right: 0;
		top: 20px;
	}
	body{
		font: 62.5%/2.2em \"Lucida Grande\", Tahoma, Verdana, Arial, Helvetica, sans-serif;
		color: #4b4942;
		background: #fff;
	}
	
a{text-decoration: none;color: #5599a7;}
	a:hover{color: #bb800f;}
	hr{display: none;}
	strong{font-weight: bold;}
	ul.borderedlist li{
		border-bottom: 1px dashed #d1cfcd;
	}
	ul.borderedlist li a{
		display: block;
		padding:3px 0 0 2px;
		height: 26px;
		color: #42423b;
	}
	ul.borderedlist li a:hover{background: #E5E5E4;color: #42423b;}

#header .container{height: 253px;}
	/* logo */
	h1{
		position: absolute;
		height: 15px;
		top: 15px;
	}
	h1 a{
		font: 24px/24px Arial, Helvetica, sans-serif;
		font-weight: bold;
		letter-spacing: -2px;
		padding: 22px 9px 25px 20px;
		display: block;
		color: #fff;
		background: url(../images/logo_bg.gif) left top no-repeat;
	}
	h1 a:hover{color: #fff;}
	h1 a span{
		height:71px;
		width: 13px;
		position: absolute;
		top:0;
		right: -13px;
		cursor: pointer;
		background: url(../images/logo_right.gif) right top no-repeat;
	}

here is the import at the top

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.2
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}

and here is the html

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Untitled Document</title>
<link href=\"stylesheets/common2.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>

<body>
<div id=\"header\">
		<div class=\"container\">
        <h1><a href=\"http://www.webpage.com\" title=\"web\">webpage<br /><br /><span></span></a></h1> 
			<hr />
        <!-- top navigation -->
			<ul id=\"navigation\" class=\"topnav\">
				<li class=home><a href=\"http://www.webpage.com\" title=\"Home\">Home</a></li>
				<li class=about ><a href=\"http://www.webpage.com\" title=\"About\">About</a></li>
				<li class=services><a href=\"http://www.webpage.com\" title=\"Services\">Services</a></li>
				<li class=portfolio><a href=\"http://www.webpage.com\" title=\"Portofolio\">Portofolio</a></li>
				<li class=contact><a href=\"http://www.webpage.com\" title=\"Contact\">Contact</a></li>
			</ul>
        </div>
	</div>
</body>
</html>

Matt

cssfreak

there are few errors in ur markup and css

validate them

class names in ur li's are not enclosed with quotes...correct them........

mattjfox

I know for a fact what you reccomended there has nothing to do with it.

cssfreak

i am sorry but i can't help u without a live link in this case since u have some images involved ....i copied ur entire page and its css files ...i dont see anything on ma browser ..as if its hidden....so if u could gimme a live link ...it will help

cssfreak

"mattjfox" said:
the nav bar to extend when the page is minimized.

okie i am not able to understand this statement.....how can u see anything when the browser is minimized ?????

or do u mean that when the browser is resized ????

If this is what ur looking for then check this
http://css-tricks.com/how-to-resizeable-background-image/ tutorial from Chris

it will help u ...also u have applied the background on the div ..is that background meant only for the header ??

just in case u can't figure out
add width:1280px; to #header in ur css

TheDoc

"mattjfox" said:
I know for a fact what you reccomended there has nothing to do with it. Im not looking for a lesson in mark up I just want the background to extend beyond and the nav bar to extend when the page is minimized. Its a pretty basic thing I would think.

If it's so basic, you shouldn't have a problem figuring it out yourself.

Bring a new attitude to the table.

mattjfox

I meant to say when there is content off the page and you need to scroll

Take a look at the example below

http://www.folkartvillage.com/nav/tester.htm

See if you minimize the browser window so it needs a scroll bar you'll notice that the smaller with the window more of the navigation and background gets cut off. I just want to know why. I would like to have it so users who minimize the window would still be able to scroll over to the navigation without having to maximize the window again.

I thought maybe this was an overflow:hidden issue, but I have tweaked those and am not finding any luck.

Thanks for your help on this.

Best Regards,

Matt

mattjfox

Sorry Doc didn't mean to have a bad attitude, just had been working on this all day...

mattjfox

You know what putting the 1280 px in the header seemed to work pretty well. Only problem with it is in IE I need to actually put 1260px in the header or there is an ugly horizontal scroll bar at the bottom of the page. Then the result is in Firefox there is about a 3 to 4 pixel gap of white space.

Any ideas about how to use a conditional statement depending on the users browser for different display? Or would your recommend against that.

Thanks,

Matt

apostrophe

Is there any reason why you can't put the background on the body? You could then put the header inside the container without any problems.

mattjfox

This works even bette apostrophe. The weird thing is I tried that yesterday before posting, and it didn't work, but I reset the CSS in case I made any buggy changes this morning, tried your fix and it worked.

Thanks for all your help guys.

Best,

Matt

mattjfox

I found the ultimate fix for this without setting widths for headers and so on. Background in the body and put this in the body as well. Just thought I would let you know if anyone was wondering.

body {
min-width: 1280px; /*–or whatever size you want it to be–*/
}

apostrophe

Won't that force a horizontal scrollbar on anything but the largest monitors?

TheDoc

"apostrophe" said:
Won't that force a horizontal scrollbar on anything but the largest monitors?

Yes, certainly not ideal.

cssfreak

Best way out of this is to apply the background to the body rather than the div,,,,,,,that way .....we will get the image won't cut off when resized

AshtonSanders

Or create a div just inside the body with no width or height attributes.

treehouse : what would you like to learn today?

Forums

Background and nav dissapears when browser minimized