| | |
CSS Emergency - HELP!!
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
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.
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.
HTML and CSS Syntax (Toggle Plain Text)
@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; }
Last edited by jproducer; Feb 21st, 2009 at 12:02 pm.
•
•
Join Date: Feb 2009
Posts: 6
Reputation:
Solved Threads: 0
You could change:
To:
You will need to add:
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.
css Syntax (Toggle Plain Text)
div#body_2 { width: 825px; margin:0 auto; background-color:#FFF; text-align: left; }
css Syntax (Toggle Plain Text)
div#body_2 { width: 825px; margin:0 auto; background-color:#FFF; text-align: left; min-height:600px; }
You will need to add:
html Syntax (Toggle Plain Text)
<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.
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.
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.
•
•
Join Date: Apr 2008
Posts: 20
Reputation:
Solved Threads: 2
•
•
•
•
Anyway, the Min-height:600 worked for most of the pages, but there are others that are much longer. So those didn't take.
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
Last edited by jedi_ralf; Feb 21st, 2009 at 6:10 pm.
•
•
Join Date: Feb 2009
Posts: 6
Reputation:
Solved Threads: 0
•
•
•
•
Also, the code you wanted me to put in for IE8, is that in the css file or in every page?
Add it after:
html Syntax (Toggle Plain Text)
<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.
css Syntax (Toggle Plain Text)
body { margin-top:20px; margin: 0 auto; background:#132025 url(bg.jpg) center repeat-y; }
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.
Thank you for all the help and if you think of anything else, great, otherwise, it's back to white.
![]() |
Similar Threads
- Web Programmer in Malaysia (Web Development Job Offers)
- Web Developer Required Immediately (Web Development Job Offers)
- What changed? (HTML and CSS)
- PHP Developer | 60-90k (Web Development Job Offers)
- PHP Programmer Needed (Web Development Job Offers)
- EMERGENCY! Web App required for total novice! (ASP.NET)
- REWARD! Help me find a PHP/mySQL DEVELOPER needed (Web Development Job Offers)
- rootmap help??urgent plz.. (PHP)
- what is the standard daily rate for freelance work? (IT Professionals' Lounge)
Other Threads in the HTML and CSS Forum
- Previous Thread: Text overlay on image using css???
- Next Thread: Can Someone Assist Me?
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7






