Jump to content

layout problems


lugos
 Share

Recommended Posts

Hello,I'm having a problem with layout in IE. If you look at the website here, you'll see that at the bottom of the page I have four images going across the bottom of the webpage. In IE, the last image is placed on a newline, but firefox and safari display it as it should be displayed (why does IE have to be so difficult!). Does anyone know why that could be? Any help would be greatly appreciated.Here is are the styles:

body {	border-collapse: collapse;	font-family: verdana, arial, sans-serif;	font-size: 11px;	font-variant: small-caps;}img {	border: 0;	margin: 0;}#container {	width: 100%;	height: 700px;	text-align: center;}#centered {	width: 700px;	text-align: left;	margin: 10px auto 0 auto;}.banner {	height: 140px;	background-color: black;	margin: 0;}.navigation {	height: 20px;	width: 500px;	margin: 0;	background-color: green;	float: left;}.pageBody {	height: 360px;	width: 500px;	margin: 0;	background-color: white;	float: left;}.newsDevDiv {	width: 200px;	height: 380px;	margin: 0;	background-color: yellow;	float: right;}.footer {	width: 700px;	height: 125px;	margin: 0;	padding: 0;	background-color: black;	border-top: 1px solid white;	float: right;	text-align: center;}.footer p {	width: 100%;	margin: 0;	border-bottom: 1px solid red;}.footer img {	vertical-align: middle;}.footer a {	margin: 0;}.newsDiv {	width: 95%;	background-color: white;	margin: 1% auto 0 auto;	height: 175px;	overflow: auto;}.devDiv {	width: 95%;	background-color: white;	margin: 1% auto 0 auto;	height: 175px;	overflow: auto;}.divTitle {	margin: 0;	padding: 5px 0 5px 0;	width: 100%;	text-align: center;	vertical-align: middle;	background-color: rgb(81, 139, 168);	color: white;}/* Navigation */.navContainer {	width: 480px;	margin: 0 auto 0 auto;	background-color: transparent;	padding: 0;}.menulist li {	float: left;	position: relative;	width: 120px;	height: 18px;	font-size: 11px;	background-color: transparent;}.menulist {	margin: 0;	padding: 0;	list-style: none;}.menulist ul {	border-collapse: collapse;	display: none;	position: absolute;	top: 18px;	left: 0px;	width: 150px;	background-color: rgb(33, 69, 99);	padding: 0;	list-style: none;	margin: 0;	z-index: 1;}.menulist ul li {	float: none;	margin-right: 0;	position: relative;	text-align: left;}.menulist a {	display: block;	padding: 2px 0 2px 0;	background-color: rgb(33, 69, 99);	width: 118px;	color: white;	text-align: center;	text-decoration: none;	font-variant: small-caps;}a.submenuLink {	text-decoration: none;	background-color: transparent;	width: 142px;	padding: 0;	border: 1px solid rgb(81, 139, 168);	color: white;	font-variant: small-caps;	margin: 2px 2px 2px 2px;	padding-left: 2px;	text-align: left;}a.submenuLink:hover {	background-color: rgb(81, 139, 168);}

Thanks,lugos

Link to comment
Share on other sites

Hello,I'm having a problem with layout in IE.  If you look at the website here, you'll see that at the bottom of the page I have four images going across the bottom of the webpage.  In IE, the last image is placed on a newline, but firefox and safari display it as it should be displayed (why does IE have to be so difficult!).  Does anyone know why that could be?  Any help would be greatly appreciated.Here is are the styles:
body {	border-collapse: collapse;	font-family: verdana, arial, sans-serif;	font-size: 11px;	font-variant: small-caps;}img {	border: 0;	margin: 0;}#container {	width: 100%;	height: 700px;	text-align: center;}#centered {	width: 700px;	text-align: left;	margin: 10px auto 0 auto;}.banner {	height: 140px;	background-color: black;	margin: 0;}.navigation {	height: 20px;	width: 500px;	margin: 0;	background-color: green;	float: left;}.pageBody {	height: 360px;	width: 500px;	margin: 0;	background-color: white;	float: left;}.newsDevDiv {	width: 200px;	height: 380px;	margin: 0;	background-color: yellow;	float: right;}.footer {	width: 700px;	height: 125px;	margin: 0;	padding: 0;	background-color: black;	border-top: 1px solid white;	float: right;	text-align: center;}.footer p {	width: 100%;	margin: 0;	border-bottom: 1px solid red;}.footer img {	vertical-align: middle;}.footer a {	margin: 0;}.newsDiv {	width: 95%;	background-color: white;	margin: 1% auto 0 auto;	height: 175px;	overflow: auto;}.devDiv {	width: 95%;	background-color: white;	margin: 1% auto 0 auto;	height: 175px;	overflow: auto;}.divTitle {	margin: 0;	padding: 5px 0 5px 0;	width: 100%;	text-align: center;	vertical-align: middle;	background-color: rgb(81, 139, 168);	color: white;}/* Navigation */.navContainer {	width: 480px;	margin: 0 auto 0 auto;	background-color: transparent;	padding: 0;}.menulist li {	float: left;	position: relative;	width: 120px;	height: 18px;	font-size: 11px;	background-color: transparent;}.menulist {	margin: 0;	padding: 0;	list-style: none;}.menulist ul {	border-collapse: collapse;	display: none;	position: absolute;	top: 18px;	left: 0px;	width: 150px;	background-color: rgb(33, 69, 99);	padding: 0;	list-style: none;	margin: 0;	z-index: 1;}.menulist ul li {	float: none;	margin-right: 0;	position: relative;	text-align: left;}.menulist a {	display: block;	padding: 2px 0 2px 0;	background-color: rgb(33, 69, 99);	width: 118px;	color: white;	text-align: center;	text-decoration: none;	font-variant: small-caps;}a.submenuLink {	text-decoration: none;	background-color: transparent;	width: 142px;	padding: 0;	border: 1px solid rgb(81, 139, 168);	color: white;	font-variant: small-caps;	margin: 2px 2px 2px 2px;	padding-left: 2px;	text-align: left;}a.submenuLink:hover {	background-color: rgb(81, 139, 168);}

Thanks,lugos

this is the HTML/XHTML Forum anyways not the css.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...