6 replies [Last post]
cheekydollar
Offline
Regular
Last seen: 11 years 24 weeks ago
Joined: 2006-04-10
Posts: 19
Points: 0

Hi,

Im not sure if this has been covered in the stickys but i dont really understand alot about CSS!

The problem is that when the browser window is made smaller my middle div jumps out and puts itself below my navigation div! i noticed this on other site such as www.ebuyer.co.uk but they seem to have sorted it out!

Is there anyway to stop this happening?

here is the site www.boyakasha.co.uk - its a borat + ali g website if you were wondering!

Have a go at minimizing the your browser window!

your help is muh appreciated!
thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

content div jumps out if window minimized

So how have ebuyer dealt with the problem?

You have a fluid width columns but they contain fixed width elements the narrower the window gets the less room for those columns the fixed widths are forcing IE to expand the parent width thus forcing down a line to clear space that will accommodate the width, FF correctly overflows the fixed content.

You need to control space if your mixing fluid and fixed width, think about some minimum widths on elements, look to see how ebuyer have dealt with it it will all be in their stylesheet.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cheekydollar
Offline
Regular
Last seen: 11 years 24 weeks ago
Joined: 2006-04-10
Posts: 19
Points: 0

content div jumps out if window minimized

Thanks for the reply, although im not too sure what these fixed and fluid elements are! Is my div tag the fluid part - and the table i have inside the fixed bit? How can i make the main div fixed? So that the browser window just moves over the text and doesnt squish it?

I just remember ebuyer had the same problem as me once upon a tim - not sure how they fixed it - how can you get access to their style sheet?

thanks!!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

content div jumps out if window minimized

Access their stylesheet :?

View source of the page look for the style link in the head copy the path and add it to the site url that should get the style sheet displaying.

It sounds though as if you're not using Firefox as this has specific tools to enable editing and viewing of styles, also it has a useful outliner tool that would show you your elements with outlines then reducing the window would show which divs are holding widths and pushing out of the fluid columns.

You need to do something such as a min-width on the body or main container but you will need a different method for IE as it's useless and doesn't support min-width so scripting is often used (MS expressions)

You could also just set the widths and not have fluid widths or set fixed width on the left sidebar and keep the fluid width on the centre column but go through that and change any fixed widths to percentage or no width.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cheekydollar
Offline
Regular
Last seen: 11 years 24 weeks ago
Joined: 2006-04-10
Posts: 19
Points: 0

content div jumps out if window minimized

Ok I understand what your saying, but im not really experienced enough to actually make those changes. Ive put my style sheet below - if someone is feeling bored enough could they point out what i need to change and where! thanks for the help! \:D/

/***********************************************/
/* 3col_leftNav.css                             */
/* Use with template 3col_leftNav.html          */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body{
	font-family: verdana;
	line-height: 1.166;
	margin: 0px;
	padding: 0px;
	background-color: #000000;
	border-right-color: #FFFF00;
}

a{
	color: #006699;
	text-decoration: none;
}

a:link{
	color: #999999;
	text-decoration: none;
}

a:visited{
	color: #999999;
	text-decoration: none;
}

a:hover{
	color: #E2B62E;
	text-decoration: none;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h2{
 font-family: Arial,sans-serif;
 font-size: 114%;
 color: #006699;
 margin: 0px;
 padding: 0px;
}

h3{
 font-family: verdana;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 font-family: verdana;
 font-size: 100%;
 font-weight: normal;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font-family: Verdana,Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

ul{
	list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font-family: verdana;
 font-size: 100%;
 font-weight: ;
 color: #334d55;
}

a.link { 
color:red; 
} 

a.link:hover { 
color:#E2B62E; 
} 


/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
	padding: 10px 0px 0px 0px;
	border-bottom: none #333333;
	width: 100%;
}

#navBar{
	float: left;
	width: 15%;
	background-color: #000000;
	border-right: #cccccc;
	border-bottom: #99CC00;
}

#headlines{
  float:right;
	width: 25%;
	border-left: 1px #333333;
	border-bottom: 1px #333333;
	padding-right: 10px;
}

#content{
	float: left;
	width: 60%;
	border-top: none #333333;
	border-right: none #333333;
	border-bottom: none #333333;
	border-left: none #E2B62E;
	padding-right: 0px;
}

/***********************************************/
/* Components                                  */
/***********************************************/

#siteName{
	margin: 0;
	padding: 0 0 0 10px;
}


/************* #globalNav styles **************/

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: none #333333;
color: #cccccc;
}

#globalNav img{
 display: block;
}

#globalNav a {
	font-size: 90%;
	padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

#pageName{
	margin: 0px;
	padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
	font-size: 80%;
	padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 80%;
}

.feature h3{
	padding: 30px 0px 5px 0px;
	text-align: center;
}

.feature img{
	float: left;
	padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 80%;
}

.story p{
	padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
	clear: both;
	border: 1px solid #333333;
	font-size: 75%;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
}

#siteInfo img{
	padding: 4px 4px 4px 10px;
	vertical-align: middle;
}


/************* #search styles ***************/

#search{
	border-bottom: #cccccc;
	font-size: 90%;
	padding-right: 0px;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
	display: block;
	margin: 0px;
	padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
	position: relative;
	border-bottom: #333333;
	font-size: 90%;
	border-right-color: #E2B62E;
	padding-left: 10px;
}

#sectionLinks h3{
	padding: 0px;
}

#sectionLinks a {
	display: block;
	border-top: #cccccc;
	padding-top: 2px;
	padding-bottom: 2px;
}

#sectionLinks a:hover{
	padding-left: 0px;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
	position: relative;
	margin: 0px;
	padding: 0px 0px 10px 10px;
	font-size: 90%;
}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
	display: block; 
}

/************** #advert styles **************/

#advert{
	padding: 30px 0px 10px;
}

#advert img{
	display: block;
}


/************** #headlines styles **************/

#headlines{
	margin: 0px;
	padding: 0px;
	font-size: 80%;
	border-left-color: #333333;
}

#headlines p{
	padding: 5px 0px 5px 0px;
}
[/list]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

content div jumps out if window minimized

Hmm, I doubt really that most of us are bored , in fact most of us will be working at the same time as popping in to the forum.

The idea is to provide help that people may develop and learn , we hope that people will make the effort to try changes and see what happens while using us for guidance.

To some extent the changes required are something you need to decide on, we can do it for you but it will be our idea of how the layout best works.

I haven't time to go through your style sheet making changes for you I'm afraid, but I'm sure someone will read the thread and maybe have a little more time to make adjustments.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mylamebrain
mylamebrain's picture
Offline
Regular
Massachusetts, USA
Last seen: 9 years 14 weeks ago
Massachusetts, USA
Joined: 2006-06-25
Posts: 31
Points: 0

please upload this so we can

please upload this so we can view your problem