12 replies [Last post]
TextileWolf
Offline
newbie
Raleigh, NC
Last seen: 17 years 22 weeks ago
Raleigh, NC
Joined: 2004-06-29
Posts: 10
Points: 0

http://www.textilewolf.com

I am having problems with text in my header bar and menu bar jumping around after clicking on different links. This isn't a major problem, but quite annoying. This happens in Firefox .9. It also happens in IE but not to the same degree. The biggest jump is when cliking from the home page to the photo gallery.

I am using Gallery (http://gallery.menalto.com/modules.php?op=modload&name=News&file=index) as my photo gallery. The css for it is a mirror of the one below, but just in case it can be found at: http://www.textilewolf.com/gallery/css/standalone_style.css

body { 
	margin:0px; 
	padding:0px; 
	font-family:verdana, arial, helvetica, sans-serif; 
	color:white; 
	background-color:white; 
	background-image: url(cloth015.gif); 
	} 
h1 { 
	margin:0px 0px 10px 0px; 
	padding:0px; 
	font-size:22px; 
	line-height:28px; 
	font-weight:900; 
	color:white; 
	} 
	 
h2 { 
	margin:0px 0px 5px 0px; 
	padding:0px; 
	font-size:12px; 
	line-height:12px; 
	olor:white; 
	} 
	 
date { 
	color:white; 
	font:12px/20px verdana, arial, helvetica, sans-serif; 
	margin:10px 0px 15px 0px; 
	padding:0px; 
} 
p { 
	color:white; 
	font:12px/20px verdana, arial, helvetica, sans-serif; 
	margin:0px 0px 10px 0px; 
	padding:0px; 
	text-indent:30px; 
	} 
blog { 
	color:white; 
	font:12px/20px verdana, arial, helvetica, sans-serif; 
	margin:0px 0px px 0px; 
	padding:0px; 
	} 
/*#Content>p {margin:0px;} 
#Content>p+p {text-indent:30px;}*/ 
 
a { 
	color:#09c; 
	font-size:12px; 
	text-decoration:none; 
	font-weight:600; 
	font-family:verdana, arial, helvetica, sans-serif; 
	} 
a:link {color:white;} 
a:visited {color:white} 
/*a:hover {background-color:grey; 
		 background-image: url(cloth015.gif) 
		} 
*/ 
#Header { 
	margin:50px 0px 10px 0px; 
	padding:17px 0px 0px 20px; 
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */ 
	height:33px; /* 14px + 17px + 2px = 33px */ 
	width=100%; 
	border-style:solid; 
	border-color:black; 
	border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */ 
	line-height:11px; 
	background-color:#666666; 
	 
 
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.  
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.  
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style  
declaration. The incorrect IE5/Win value is above, while the correct value is  
below. See http://glish.com/css/hacks.asp for details. */ 
	voice-family: "\"}\""; 
	voice-family:inherit; 
	height:14px; /* the correct height */ 
	} 
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct  
length values to user agents that exhibit the parsing error exploited above yet get  
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include 
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */ 
body>#Header {height:14px;} 
 
#Content { 
	position:absolute; 
	top:100px; 
	left:20px; 
	border-style:solid; 
	border-color:black; 
	border-width:1px 1px; 
	margin:0px 50px 50px 200px; 
	padding:10px; 
	background-color:#666666; 
	} 
 
#Menu { 
	position:absolute; 
	top:100px; 
	left:20px; 
	width:172px; 
	padding:10px; 
	border-style:solid; 
	background-color:#666666; 
	border-color:black; 
	border-width:1px 1px; 
	line-height:17px; 
/* Again, the ugly brilliant hack. */ 
	voice-family: "\"}\""; 
	voice-family:inherit; 
	width:150px; 
	} 
/* Again, "be nice to Opera 5". */ 
body>#Menu {width:150px;} 
 
#Valid { 
	position:absolute; 
	top:350px; 
	left:20px; 
	width:88px; 
	padding:10px; 
	 
/* Again, the ugly brilliant hack. */ 
	voice-family: "\"}\""; 
	voice-family:inherit; 
	width:150px; 
	} 
/* Again, "be nice to Opera 5". */ 
body>#Menu {width:150px;}

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

CSS Help

Hi there,
I'm not sure about the jumping text (couldn't see that effect in firefox 8.0 or IE6) but I recognize the CSS sheet from the 'Blue Robot Layout Reservoir' in your version you have given #content a position:absolute ( original has no position set) but left the margin left at 200px this seems to cause a problem in IE6 as the content box run of the screen to the right adding a horizontal scrollbar; unless I've missed something try taking out any position (or set it to relative) and remove top / left position and it should sort its self.
Sorry can't help with other problem.

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

TextileWolf
Offline
newbie
Raleigh, NC
Last seen: 17 years 22 weeks ago
Raleigh, NC
Joined: 2004-06-29
Posts: 10
Points: 0

CSS Help

Thanks for you help so far.

I have changed #Content to the following:

border-style:solid;
	border-color:black;
	border-width:1px 1px;
	margin:0px 50px 50px 200px;
	padding:10px;
	background-color:#666666;
	}

Now the main area is correct horizontally, but now it is to low vertically. How should I go about fixing it?

Thanks again.

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

CSS Help

Hi there,

That's happening because you have removed the position:absolute from the #menu div; which means that all your block level elements are obeying the normal flow rules i.e block level elements follow on bellow each other. The content div is narrow only because it has a 200px left margin otherwise you would see it run the full width bellow the menu.
Replace the position:absolute on the menu which removes it from the flow and replace it's top/left positions. The #content can now slide up past it because of the margin-left spacing, you will then need to play around with the respective top and margin-top decs to get the two to line up.
That should sort it, good luck.

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

TextileWolf
Offline
newbie
Raleigh, NC
Last seen: 17 years 22 weeks ago
Raleigh, NC
Joined: 2004-06-29
Posts: 10
Points: 0

CSS Help

When I added the content:absolute to the Menu, the Content did not slide up. I tried using the margin negative to fix it. I assume this isn't what i should do.

#Content {
	
	
	border-style:solid;
	border-color:black;
	border-width:1px 1px;
	margin:-85px 25px 0px 180px;
	padding:10px;
	background-color:#666666;
	}

TextileWolf
Offline
newbie
Raleigh, NC
Last seen: 17 years 22 weeks ago
Raleigh, NC
Joined: 2004-06-29
Posts: 10
Points: 0

CSS Help

Also, now in IE, my menu links do not work.

varsenov
varsenov's picture
Offline
newbie
Nicosia, CY
Last seen: 17 years 22 weeks ago
Nicosia, CY
Timezone: GMT+2
Joined: 2004-06-25
Posts: 6
Points: 0

Re: CSS Help

Hi,
I didn't look into your #Content problem, but I did look at your side menu and I noticed that you have a space between your closing </a> tags and the <br/> tags. Since you have the a class set to font-size: 12px and the line-height: 17px for the #Menu id, those spaces outside the <a> tags are taking the line-height: 17px. Try taking them out and you should be fine on the side menu.

a {
color:#09c;
font-size:12px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}


#Menu {
position:absolute;
top:100px;
left:20px;
width:172px;
padding:10px;
border-style:solid;
background-color:#666666;
border-color:black;
border-width:1px 1px;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}

TextileWolf
Offline
newbie
Raleigh, NC
Last seen: 17 years 22 weeks ago
Raleigh, NC
Joined: 2004-06-29
Posts: 10
Points: 0

CSS Help

Still no luck on the menu :?

TextileWolf
Offline
newbie
Raleigh, NC
Last seen: 17 years 22 weeks ago
Raleigh, NC
Joined: 2004-06-29
Posts: 10
Points: 0

CSS Help

Also, for some reason, my <blog> tag doesn't work in IE but in Firefox.

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

CSS Help

Textilewolf, you forgot the ; at the end of the position absolute , you don't need a negative margin top on content but will need a top position on the menu unless you wish it stuck to the header.

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

TextileWolf
Offline
newbie
Raleigh, NC
Last seen: 17 years 22 weeks ago
Raleigh, NC
Joined: 2004-06-29
Posts: 10
Points: 0

CSS Help

Looks Great! Thanks.

But only in FireFox. For some reason the Menu is over top the Content in IE. Any suggestions? Sad

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

CSS Help

You still havn't applied a top and left position to your position absolute menu! as per my previous posts.

Mozilla/ Firefox and IE behave very differently in respect to certain rules of box model layout, this looks to be one of them.

Try to stick as much as possible to the original Blue Robot layout for the boxes, as I guess it's tried and tested. you won't get these problems then.

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

TextileWolf
Offline
newbie
Raleigh, NC
Last seen: 17 years 22 weeks ago
Raleigh, NC
Joined: 2004-06-29
Posts: 10
Points: 0

CSS Help

Thanks for all the help. I greatly appreciate it.