CSS Emergency - HELP!!

Question

jproducer 0 Newbie Poster

15 Years Ago

Sorry for the drastic opening, but I'm on a time crunch here. I am basically re-branding a site for a hotel company and have gotten the look I want, but as luck would have it, the css is working perfectly in IE but not in Firefox or Safari.

The issue is I have the main background as a dark color and the original designer used a lot of div's. I believe there are open spaces that don't have a name in order to give them a css code of background white.

Here's a screenshot of IE (what I want)

Here's the link to the site so you can see what I mean. Try in both ff and ie. This is a good example page.

Development Site

Also here is the CSS. I would be so greatful for any insight. If you need any more information, please let me know. I would be willing to pay at this point. It is holding up my final stages and the only other option is going back to white background. That would be something I'd rather not do.

@charset "utf-8";
/* CSS Document */

body {
	margin-top:20px;
	margin: 0 auto;
	background-color:#132025
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #283B4A;
	font-style: normal;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	line-height: 19px;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #4C708C;
	font-style: normal;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	line-height: 19px;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #283B4A;
	font-style: normal;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	line-height: 21px;
}

h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #4C708C;
	font-style: normal;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	line-height: 14px;
}
h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #283B4A;
	font-style: normal;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	line-height: 11px;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 17px;
	color: #132025;
	margin: 10px 0px;
}

a:link {
	color: #4C708C;
	text-decoration: none;
}
a:visited {
	color: #4C708C;
	text-decoration: none;
}
a:hover {
	color: #283B4A;
	text-decoration: none;
}
div#container {
	width: 825px;
	padding: 1px;
	margin:0 auto;
	background-color:#FFFFFF;
	text-align: left;
}

div#nav {
	width: 825px;
	background-color:#FFF;
}

div#nav-left {
	float: left;
	width: 600px;
	text-align: left;
	background-color:#FFF;
}

div#nav-right {
	float: left;
	width: 225px;
	text-align:right;
	background-color:#FFF;
}

div#title_bar {
	width: 821px;
	float: left;
	margin:0 auto;
	text-align: left;
	background-color: #283B4A;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #C5D4DF;
	height: 13px;
	padding: 2px;
	border-bottom: 2px solid #FFFFFF;
}

div#body_main {
	width: 825px;
	margin:0 auto;
	background-color:#FFF;
	text-align: left;
}

div#body_2 {
	width: 825px;
	margin:0 auto;
	background-color:#FFF;
	text-align: left;
}

div#left {
	float: left;
	margin:0 auto;
	text-align:left;
	background-color:#FFF;
}

div#left_nav {
	float: left;
	margin:0 auto;
	text-align:left;
	background-color:#FFF;
}

div#left2{
	float: right;
	margin:0 auto;
	text-align:left;
	width: 665px;
	background-color:#FFF;
}

div#right {
	float: right;
	margin:0 auto;
	text-align:right;
	background-color:#FFF;
}

div#right2 {
	float: right;
	margin:0 auto;
	text-align: right;
	background-color:#FFF;
}

div#right_left {
	float: right;
	margin:0 auto;
	text-align:left;
	width: 665px;
	background-color:#FFF;
}

div#left_left {
	float: left;
	margin:0 auto;
	text-align:left;
	width: 665px;
	background-color:#FFF;
}

div#right_left_1 {
	float: left;
	margin:0 auto;
	text-align:left;
	width: 440px;
	background-color:#FFF;
}

div#right_left_2 {
	float: right;
	margin:0 auto;
	text-align:right;
	width: 220px;
	background-color:#FFF;
	padding:2px;
}

div#center505 {
	float: left;
	margin:0 auto;
	text-align:left;
	width: 505px;
	background-color:#FFF;
}

div#right160 {
	float: left;
	margin:0 auto;
	text-align:left;
	width: 160px;
	background-color:#FFF;
}

div#state {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 20px;
	color: #132025;
	margin: 10px 0px;
	background-color:#FFF;
}

#state a {
	color: #4C708C;
	text-decoration: none;
}

#state a:hover {
	color: #283B4A;
	text-decoration: none;
}

.subNav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding-right: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C5D4DF;
	background-color:#FFF;
}

a.nav:link {
	color: #4C708C;
	text-decoration: none;
}
a.nav:visited {
	color: #4C708C;
	text-decoration: none;
}
a.nav:hover {
	color: #283B4A;
	text-decoration: none;
}
a.nav:active {
	color: #4C708C;
	text-decoration: none;
}

.bodyText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 19px;
	color: #101010;
	padding-left: 20px;
	padding-right: 15px;
	background-color:#fff;
}

.subHeadText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 19px;
	color: #83A3BC;
	padding-right: 10px;
	padding-left: 20px;
	background-color:#FFF;
}
.subHeadTextLeft{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 19px;
	color: #83A3BC;
	background-color:#FFF;
}
	
.subNavLine {
	border-right: 1px solid #C5D4DF;
	background-color:#FFF;
}

div#navcontainer {
	margin-left: 0px;
	margin-top: 15px;
	background-color:#fff;
}

#navcontainer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 18px;
	font-weight: bold;
	text-align: right;
	background-color:#fff;
}

#navcontainer li { 
text-decoration: none;
background-color:#FFF;
}
 
#navcontainer a {
	padding: 0px 4px;
	font-size: 10px;
	color: #4C708C;
	text-decoration: none;
	background-color:#FFF;
}

#navcontainer a:hover {
color: #283B4A;
text-decoration: none;
}

#subnavcontainer { margin-left: 0px; 
}

#subnavcontainer ul
{
	margin: 0;
	padding: 0;
	text-align: right;
	list-style-type: none;
}

#subnavcontainer li {
	margin: 0;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #4C708C;
	line-height: 18px;
	padding-right: 5px;
	border: 0px;
 }
 
#subnavcontainer a
{
	font-size: 9px;
	color: #283B4A;
	text-decoration: none;
}

#subnavcontainer a:hover
{
color: #283B4A;
text-decoration: none;
}

#subnavcontainer a.brand {
	font-size: 9px;
	color: #4C708C;
	text-decoration: none;
	background-color:#FFF;
}

#subnavcontainer a.brand:hover {
color: #101010;
text-decoration: none;
}

div#contentCell {
	padding-right: 10px;
	padding-left: 25px;
	padding-top: 15px;
	padding-bottom: 20px;
	background-color: #FFF;
}

div#awards {
	float: left;
	margin:0 auto;
	text-align:left;
	width: 615px;
	font-size: 9px;
	padding-right: 10px;
	padding-left: 25px;
	padding-top: 15px;
	padding-bottom: 20px;
	background-color:#FFF;
	
}

div#footer {
	width: 825px;
	float: left;
	margin:0 auto;	
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #4C708C;
	background-color: #ccc
}

div#foot_left{
	float: left;
	margin:0 auto;
	text-align:left;
	background-color: #ccc
}

div#foot_right{
	float: right;
	margin:0 auto;
	text-align:right;
	background-color: #ccc
}

.footerText {
   background: #9F9F9F;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

div#footer2 {
	width: 825px;
	background-color: #ccc
}

ul {
	margin: 0;
	list-style: none;
	width: 160px;
	font-weight: bold;
	padding-top: 10px;
	}

li {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
	font-size: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C5D4DF;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #C5D4DF;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #83a3bc; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */
li ul a {

	display: block;
	text-decoration: none;
	color: #4C708C;
	background: #fff; /* IE6 Bug */
	padding: 5px;
}

.title_bar_page {
	color: #83A3BC;
	font-weight: bold;
}

.right{
	float: right;
	text-align: right;
}

.space{
margin: 3px;
}

#newsCell {
	background-image:  url("../images/hotels/grayBack.jpg");
	background-repeat: repeat-x;
	background-position: left top;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 605px;
	background-color:#FFF;
}
#newsCell li {
	list-style-type: none;
	margin-left: 0px;
	line-height: 13px;
	list-style-image: none;
	padding-top: 5px;
	border-top-width: 0.03em;
	border-top-style: solid;
	border-top-color: #9f9f9f;
}
#newsCell h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #4C708C;
	padding-left: 15px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
#newsCell ul {
	margin: 0px;
	padding: 5px 0px 0px 15px;
	list-style-type: none;
	list-style-position: inside;
	list-style-image: none;
}
#newsCell a:link {
	font-weight: bold;
	color: #101010;
	text-decoration: none;
}
#newsCell a:visited {
	font-weight: bold;
	color: #101010;
	text-decoration: none;
}
#newsCell a:hover {
	font-weight: bold;
	color: #666666;
	text-decoration: none;
}
#newsCell h2 {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #283B4A;
	padding-left: 15px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
#newsCellGreen {
	background-image: url("../images/hotels/greenBack.jpg");
	background-repeat: repeat-x;
	background-position: left top;
	padding: 20px;
	margin:0 auto;	
	width: 625px;
	background-color:#FFF;
}
#newsCellGreen li {
	list-style-type: none;
	margin-left: 0px;
	line-height: 13px;
	list-style-image: none;
	padding-top: 5px;
	border-top-width: 0.03em;
	border-top-style: solid;
	border-top-color: #9f9f9f;
	background-color:#FFF;
}
#newsCellGreen h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #4C708C;
	padding-left: 15px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
#newsCellGreen ul {
	margin: 0px;
	padding: 5px 0px 0px 15px;
	list-style-type: none;
	list-style-position: inside;
	list-style-image: none;
	background-color:#FFF;
}
#newsCellGreen a:link {
	font-weight: bold;
	color: #101010;
	text-decoration: none;
}
#newsCellGreen a:visited {
	font-weight: bold;
	color: #101010;
	text-decoration: none;
}
#newsCellGreen a:hover {
	font-weight: bold;
	color: #666666;
	text-decoration: none;
}
#newsCellGreen h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #283B4A;
	padding-left: 15px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
#formText table,tr,td{
	font-size: 11px;
	background-color:#FFF;
}
.tan {
	font-size: .8em;
	color: #4C708C;
}

html-css web-design

4 Contributors
6 Replies
131 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by MidiMagic

jedi_ralf 0 Newbie Poster

15 Years Ago

Anyway, the Min-height:600 worked for most of the pages, but there are others that are much longer. So those didn't take.

I think the problem is that you have 3 columns of data; the menu (left_nav), the body (right_left_1) and the contact (right_left_2) section.
Because these sections are using "float: left;", they are therefore not filling the container div "body_2". Therefore as this has no height (unless you've specified it as was suggested), there is no background colour to cover up the gaps.

Use this tutorial to make each "column" the same height. http://www.ejeliot.com/blog/61

You will also need to make the body (right_left_1) or contact (right_left_2) section slightly wider to take up the space that is peeking through between them (about 3px worth).

It will require some tinkering and some use of a standards compliant browser to get it looking good for everyone

MidiMagic 579 Nearly a Senior Poster

15 Years Ago

0px is an invalid style. It causes Firefox to throw away the entire style.

When a value is 0, do not attach a unit of measurement. Just put 0.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ktd 0 Newbie Poster · Answer 1 · 2009-02-22T00:14:57+00:00

You could change:

div#body_2 {
	width: 825px;
	margin:0 auto;
	background-color:#FFF;
	text-align: left;
}

To:

div#body_2 {
	width: 825px;
	margin:0 auto;
	background-color:#FFF;
	text-align: left;
	min-height:600px;
}

You will need to add:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Or will will not render correctly in IE8.

I will also recommend validating that site. There are a lot of errors.
In addition, I would also recommend using FF and the Web Deveoper tool bar. It will help you out greatly.

jproducer 0 Newbie Poster · Answer 2 · 2009-02-22T03:28:47+00:00

Fortunately this is not my design, but bottom line is I have a couple days to at least make it cleaner. After that I'll have all the time in the world to do a full rehash. It's a corporation and they just want to see their new logo and colors.

Anyway, the Min-height:600 worked for most of the pages, but there are others that are much longer. So those didn't take.

Also, the code you wanted me to put in for IE8, is that in the css file or in every page?

Thank you, you have gotten me much further.

ktd 0 Newbie Poster · Answer 3 · 2009-02-22T07:37:26+00:00

Also, the code you wanted me to put in for IE8, is that in the css file or in every page?

You will need that in your head, before anything is included (CSS, JS, etc.) I tested this out in IE8 (Windows 7 Beta) and it wouldn't work unless you click 'compatibility mode'. But its easier to have IE8 render in 7, incase you don't opt-in with Microsoft (that's a whole other story...) with that tag.

Add it after:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Also, as the min-height will not work, you could add a background image to the body as a work around until you get the chance to revamp the site.

body {
	margin-top:20px;
	margin: 0 auto;
	background:#132025 url(bg.jpg) center repeat-y;
	}

I attached the bg.jpg image so you can try it. You could use it along with the min-height for now.

jproducer 0 Newbie Poster · Answer 4 · 2009-02-22T08:22:07+00:00

Yeah, even with bg image and code in at beginning, which was already there, still same result in FF and Safari. Bummer really, it would have made a big difference, but I'm fighting with someone else's layout which initially is just horrid.

Thank you for all the help and if you think of anything else, great, otherwise, it's back to white.