CSS/HTML Rendering

Get Started
1

This displays well in IE 8 and poorly in Chrome. . .

www.propertieswithstyle.com

CSS is as follows:

@charset "utf-8";
/* CSS Document */
/* 10/16/2011 */


html, body {
			margin:0;
    		padding:0

}

body {
			color:#000;
    		background: url(images/blinds1.png) fixed;			
    		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    		font-size:100%;
    		line-height:1.3;
			padding:0 10px;
			margin-top:30px;
}


#outer 		{
			max-width:1200px;
			min-width:400px;
			width:100%;
			/*margin-right:20px;
			margin-left:10px;*/
			position:relative;

} 

h1,2,3,4,5,6{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

p 			{
			font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 
			float:right;
			width:66.67%; 
			font-size:90%;
			font-style:normal;
			line-height: 120%; 
			text-align: justified;
			color:#6CF; 
			padding: 1% 0.5 1% 0.5;
					
			
}

.plate  
			{
			float:right;
			display:block;
			position: relative;/* IE bug fix*/
}

/* container for the navigation */
#nav {
    margin:0;
    padding:0;
    list-style:none;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#fff;
	font-size:90%;
    position: fixed;
	top:30px;
    width:26.67%;  /*width of navigation list 320px*/
	overflow:hidden;
	
}

	* html #nav{position:absolute;}
	#nav li{font-size:80%;margin:0 0 5px;
	list-style:none;}
	#nav a,#nav a:link,#nav a:visited {
	color: #6CF;
    list-style: none;
	text-decoration: none;
	
}

#nav li a:hover{color:#fff}
			
/*************************************************NAVIGATION ENDS HERE***************/

#footer		{
			font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			float:right;
			width:66.67%;
			font-size:50%;
			font-style:normal;
			line-height: 110%; 
			color:#6CF; 
			text-align:justify;
			padding-top:2%;
			
}

/* eND css*/

What I would like is to clean up my css and html before I go any further.

I’s also like to place some text next to the small SFR logo but haven’t mastered that.

I’ve been away for awhile and have forgotten much of what I’d learned.

Thanks.

Rick

2

Sorry if I’m stating the obvious, but have you run the html and css through the validators? http://validator.w3.org/ for html and http://jigsaw.w3.org/css-validator/ for css.

A quick look at your css above shows

h1,2,3,4,5,6{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

which should be

h1,h2,h3,h4,h5,h6{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

}
3

The CSS rule for headings is redundant, because the font-family has been previously declared on body and will be inherited.

The p rule has two errors:

  1. text-align:justified; - justified is not a valid value, so should be text-align:justify; (text justification in web browsers can produce ugly results, so is usually avoided).

  2. padding:1% 0.5 1% 0.5; - Percentages are rarely suitable for top and bottom padding (or margin) values, and the side values 0.5 require a unit e.g. 0.5em. If you’re happy with the currently rendered vertical separation of paragraphs then just remove the padding declaration altogether, as it’s failing to parse and therefore having no effect.

IE & Chrome look the same to me. Differences may be due to viewing in browser windows of different width. In both, reducing width causes the image to ride underneath the fixed position #nav div on the left.

In other news, the repeated gradient background image makes the text hard to read, and is visually disturbing when the page is scrolled.

4

Victorinox - I just came across your reply.

I incorporated your suggestions with total success.

I removed all of the font-family calls from the css and everything still works and looks the same. Kewl!

I removed the justify from the footer and likewise it still looks good and flows where it should.

I never really understood the inherited thing well but I’m slowly catching on.

I do know that less is better when it comes to HTML and CSS, for that matter, any language, so I’m always trying to reduce my code.

You stated . . . “In both, reducing width causes the image to ride underneath the fixed position #nav div on the left.”

I certainly have a problem with this. When I zoom out everythinhg is fine, but if I zoom in all in the float right container crashes into the menu items.

Is there a way to prevent this?

Thanks much. www.propertieswithstyle.com