12 replies [Last post]
Tom Potts
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2004-11-17
Posts: 16
Points: 0

We have a tree menu area on our site that uses a tree of UL/OL and it looks as expected in IE but FireFox puts scroll bars around it and overlays things - this seems to be a continuation of a mozilla error but I was wondering if anyone knows how to stop it?

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

Unwanted scrollbars in firefox

Code please Tom.

What do you mean by "this seems to be a continuation of a mozilla error" ?

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

Tom Potts
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2004-11-17
Posts: 16
Points: 0

Unwanted scrollbars in firefox

I found a similar error (where scroll bars appear for no reason) in some mozilla bug listings

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 8 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Unwanted scrollbars in firefox

There are a number of possibilities but scrollers usually show up when you you create an inner box that is larger than the bounding box in some way. Quite often it is a combination of margin and/or border and/or padding added to the width or height. In some cases IE will expand the container div (contrary to the specifications) and allow such a mistake to render without an apparent flaw. Other browsers may render it strictly as written.

Once again, code or a link would be good before we go chancing possible Mozilla bugs.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tom Potts
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2004-11-17
Posts: 16
Points: 0

Unwanted scrollbars in firefox

http://81.171.158.135/Internet - please not that this is a development site and not 'public' as yet

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 8 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Unwanted scrollbars in firefox

h1, h2, h3, h4, h5, h6, p {
  position: relative; /* avoids blanking in ie */
} 
body {
	color: black;
	background:#c3ccff;
	margin: 0px;
	font-size:100%;
	padding: 0px;
	font-family:arial,verdana,sans-serif;
	width:100%;
}
img{
	border:0;
}
#theHeader 
{
	position:relative;
	height: 100px;
}
#theHeader a:link, 
#theHeader a:visited
{
	text-decoration: none;
	font-weight:bolder;
	font-size:0.9em;
	color:navy;
	margin:0px 0px 0px 0px;
	padding:0px;
}
#theHeader input 
{
	font-size:0.7em;
}
#theHeader td
{
	height:85px;
	font-size:x-small;
	padding:0px;
}
#theHeader form{
	font-size:larger;
	padding-bottom:0px;
	margin-bottom:0px;
}
#title
{
	/*background: url("images/banner3.gif") no-repeat;*/
	position:absolute;
	margin:0px;
	left:155px;
	top:0px;
	xwidth:100%;
	height:54px;
	font-size:2.4em;
	color:white;
	/*font-family:arial,verdana,sans-serif;*/
	font-weight:bold;
	font-variant:small-caps;
	text-shadow: 0.5em 0.5em 0.5em black;
}
#leftcolumn {
	margin-left:2px; 
	margin-top:2px; 
	padding:0px;	
}
#bobImage
{
	position:absolute;
	margin:0px;
	left:165px;
	top:0px;
/*	width:100%;*/
}
#linktable
{
	font-size:0.5em;
	position:absolute;
	left:165px;
	top:10px;
}
#linkTable img 
{
	border: none;
	height: 29px;
}
td {
	text-align: center;
	/*valign:top;*/
}
#forms
{
	margin:0px;
	padding:0px;
}
#thePage 
{
	margin-right: 0px;
	margin-left: 0px;
	/*border-top:dotted 1px red;
	border-bottom:dotted 1px blue;*/
}
#theMenu 
{
	float:left;
	width: 163px;
	font-size: 0.8em;
	font-weight:bold;	
	color:navy;
}
#theMenu a:link, 
#theMenu a:visited
{
	color:Navy;
	text-decoration:none;
}
#theMenu ul
{
	padding: 0;
	margin: 0;
	list-style-type:none;	
	font-weight:normal;
	line-height:1;
	
}
#theMenu li
{	
	margin-left:0.2em;	
	padding-bottom: 5px;	
	list-style-type:none;	
	font-weight:normal;			
}

#theMenu ul li{
	margin-left:0;
	margin-top:5px;
	margin-bottom:5px;	
	font-weight:normal;
}

#theMenu ul li ul li{
	margin-left:0.2em;
	font-size:0.8em;	
}

#theMenu li.firstLevel{	
	font-size: 1.0em;
	margin-left: 0.4em;
	border-bottom: 1px solid silver;
}

#theMenu li.firstLevelSelected {
	font-weight:bold;	
	font-size: 1.0em;	
	margin-left: 0.4em;
	border-bottom: thin solid silver;
}

#theMenu li.secondLevel{ 	
	font-weight:bold;	
	font-size: 0.9em;
	margin-left: 2.0em;
	list-style-image : url("../img/bullet1.gif"); 	
	list-style-position: outside;
	border-bottom: thin solid silver;
	
}
/*
#theMenu li.secondLevel{ 	
	font-weight:bold;	
	font-size: 0.9em;
	margin-left: 0.9em;
	border-bottom: thin solid silver;
}*/


#theMenu li.higherLevel{ 	
	font-weight:bold;	
	font-size: 0.9em;
	border-bottom: thin solid silver;
}

#theMenu ul li.clearbackground{
	border:solid #c3ccff 1px;
}

/* end of the menu items----------------------------------------------------------------*/

#thePanel {
	text-align: left;
	margin-left: 169px; /* Space for the left menu */
	padding: 1px 1px 0.4em 0.5em;	
	background-color:#ffffff;
	border: 1px solid #999999;
	font-size:smaller;
}	

I've removed a lot of redundant stuff from the CSS and changed a couple of absolute positionings to relative and or float since they were unnecessary.

A couple of general rules - where it is not necessary, don't use widths if you are adding margin/border/padding. Widths will sort themselves out automatically if you leave them alone. You had a couple of places where your width exceeded 100% so you popped a scroller. You need to be careful with heights as well. I removed the fixed height from the menu <li> style since there is a good chance of menu <a>s wrapping and you don't want overlapping text. Be aware that vertical-align only applies to alignment in table cells.

Please take the time to compare the code I have offered above alongside what you had previously. I hope you will be able to work through the logic but am happy to explain parts you have difficulty with. Like many people learning CSS, you have overcoded - added code that is already the default for an element, or failed to combind selectors together when you have essentially the same style applied to them. Learn how to do CSS shorthand as well - it will save time and helps consolidate your code.

Good luck.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

gmn17
Offline
newbie
Los Angeles
Last seen: 16 years 48 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2005-08-06
Posts: 1
Points: 0

Unwanted scrollbars in firefox

0px or just 0, sorry if this is a worn topic here, but just wondering.
ok, seen your other posts and no 0px anywhere, never mind.

Tom Potts
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2004-11-17
Posts: 16
Points: 0

Thanks DE

Thanks very much for that
I've ignored the xwidth....
As a matter of interest what tools do you use to help?
I use the Dom inspector for firefox and the inline css editor but (as someone who comes for an object oriented background) its a bit of a black art!
Thanks again!

Tom Potts
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2004-11-17
Posts: 16
Points: 0

Unwanted scrollbars in firefox

Ahh - a small problem - a lot of #the page contents is now pushed down by the #menu area!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 8 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Unwanted scrollbars in firefox

I don't believe you have updated the page on the web?

I'm not sure exactly what is happening - could you post a screenie?

Something for later - I notice you are scaling down larger images to create your menu - ideally you want to do that in an image editor with anti-aliasing turned on and using the light blue background - the images get jaggy when scaled by the browser.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tom Potts
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2004-11-17
Posts: 16
Points: 0

Unwanted scrollbars in firefox

I updated the web page but due to large portions of the #panel content appearing below the bottom item on the menu I had to revert to the old css.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 8 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Unwanted scrollbars in firefox

What this sounds like is a miscalculation of the total widths. Try making the left column narrower or increasing the amount of left-margin on #panel.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tom Potts
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2004-11-17
Posts: 16
Points: 0

Unwanted scrollbars in firefox

I got rid of the scroll bars by removing scroll:auto - and banged my head on the wall for good measure!
Just some strange overlapping things to get rid of now!