943,708 Members | Top Members by Rank

Ad:
Feb 21st, 2009
0

CSS Emergency - HELP!!

Expand Post »
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.

HTML and CSS Syntax (Toggle Plain Text)
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. body {
  5. margin-top:20px;
  6. margin: 0 auto;
  7. background-color:#132025
  8. }
  9.  
  10. h1 {
  11. font-family: Arial, Helvetica, sans-serif;
  12. font-size: 15px;
  13. color: #283B4A;
  14. font-style: normal;
  15. font-weight: normal;
  16. margin: 0px;
  17. padding: 0px;
  18. line-height: 19px;
  19. }
  20.  
  21. h2 {
  22. font-family: Arial, Helvetica, sans-serif;
  23. font-size: 15px;
  24. color: #4C708C;
  25. font-style: normal;
  26. font-weight: normal;
  27. margin: 0px;
  28. padding: 0px;
  29. line-height: 19px;
  30. }
  31.  
  32. h3 {
  33. font-family: Arial, Helvetica, sans-serif;
  34. font-size: 17px;
  35. color: #283B4A;
  36. font-style: normal;
  37. font-weight: bold;
  38. margin: 0px;
  39. padding: 0px;
  40. line-height: 21px;
  41. }
  42.  
  43. h5 {
  44. font-family: Arial, Helvetica, sans-serif;
  45. font-size: 12px;
  46. color: #4C708C;
  47. font-style: normal;
  48. font-weight: bold;
  49. margin: 0px;
  50. padding: 0px;
  51. line-height: 14px;
  52. }
  53. h6 {
  54. font-family: Arial, Helvetica, sans-serif;
  55. font-size: 10px;
  56. color: #283B4A;
  57. font-style: normal;
  58. font-weight: bold;
  59. margin: 0px;
  60. padding: 0px;
  61. line-height: 11px;
  62. }
  63.  
  64. p {
  65. font-family: Arial, Helvetica, sans-serif;
  66. font-size: 13px;
  67. line-height: 17px;
  68. color: #132025;
  69. margin: 10px 0px;
  70. }
  71.  
  72. a:link {
  73. color: #4C708C;
  74. text-decoration: none;
  75. }
  76. a:visited {
  77. color: #4C708C;
  78. text-decoration: none;
  79. }
  80. a:hover {
  81. color: #283B4A;
  82. text-decoration: none;
  83. }
  84. div#container {
  85. width: 825px;
  86. padding: 1px;
  87. margin:0 auto;
  88. background-color:#FFFFFF;
  89. text-align: left;
  90. }
  91.  
  92. div#nav {
  93. width: 825px;
  94. background-color:#FFF;
  95. }
  96.  
  97. div#nav-left {
  98. float: left;
  99. width: 600px;
  100. text-align: left;
  101. background-color:#FFF;
  102. }
  103.  
  104. div#nav-right {
  105. float: left;
  106. width: 225px;
  107. text-align:right;
  108. background-color:#FFF;
  109. }
  110.  
  111. div#title_bar {
  112. width: 821px;
  113. float: left;
  114. margin:0 auto;
  115. text-align: left;
  116. background-color: #283B4A;
  117. font-family: Arial, Helvetica, sans-serif;
  118. font-size: 11px;
  119. color: #C5D4DF;
  120. height: 13px;
  121. padding: 2px;
  122. border-bottom: 2px solid #FFFFFF;
  123. }
  124.  
  125. div#body_main {
  126. width: 825px;
  127. margin:0 auto;
  128. background-color:#FFF;
  129. text-align: left;
  130. }
  131.  
  132. div#body_2 {
  133. width: 825px;
  134. margin:0 auto;
  135. background-color:#FFF;
  136. text-align: left;
  137. }
  138.  
  139. div#left {
  140. float: left;
  141. margin:0 auto;
  142. text-align:left;
  143. background-color:#FFF;
  144. }
  145.  
  146. div#left_nav {
  147. float: left;
  148. margin:0 auto;
  149. text-align:left;
  150. background-color:#FFF;
  151. }
  152.  
  153. div#left2{
  154. float: right;
  155. margin:0 auto;
  156. text-align:left;
  157. width: 665px;
  158. background-color:#FFF;
  159. }
  160.  
  161. div#right {
  162. float: right;
  163. margin:0 auto;
  164. text-align:right;
  165. background-color:#FFF;
  166. }
  167.  
  168. div#right2 {
  169. float: right;
  170. margin:0 auto;
  171. text-align: right;
  172. background-color:#FFF;
  173. }
  174.  
  175. div#right_left {
  176. float: right;
  177. margin:0 auto;
  178. text-align:left;
  179. width: 665px;
  180. background-color:#FFF;
  181. }
  182.  
  183. div#left_left {
  184. float: left;
  185. margin:0 auto;
  186. text-align:left;
  187. width: 665px;
  188. background-color:#FFF;
  189. }
  190.  
  191. div#right_left_1 {
  192. float: left;
  193. margin:0 auto;
  194. text-align:left;
  195. width: 440px;
  196. background-color:#FFF;
  197. }
  198.  
  199. div#right_left_2 {
  200. float: right;
  201. margin:0 auto;
  202. text-align:right;
  203. width: 220px;
  204. background-color:#FFF;
  205. padding:2px;
  206. }
  207.  
  208. div#center505 {
  209. float: left;
  210. margin:0 auto;
  211. text-align:left;
  212. width: 505px;
  213. background-color:#FFF;
  214. }
  215.  
  216. div#right160 {
  217. float: left;
  218. margin:0 auto;
  219. text-align:left;
  220. width: 160px;
  221. background-color:#FFF;
  222. }
  223.  
  224. div#state {
  225. font-family: Arial, Helvetica, sans-serif;
  226. font-size: 13px;
  227. line-height: 20px;
  228. color: #132025;
  229. margin: 10px 0px;
  230. background-color:#FFF;
  231. }
  232.  
  233. #state a {
  234. color: #4C708C;
  235. text-decoration: none;
  236. }
  237.  
  238. #state a:hover {
  239. color: #283B4A;
  240. text-decoration: none;
  241. }
  242.  
  243. .subNav {
  244. font-family: Arial, Helvetica, sans-serif;
  245. font-size: 10px;
  246. padding-right: 5px;
  247. border-bottom-width: 1px;
  248. border-bottom-style: solid;
  249. border-bottom-color: #C5D4DF;
  250. background-color:#FFF;
  251. }
  252.  
  253. a.nav:link {
  254. color: #4C708C;
  255. text-decoration: none;
  256. }
  257. a.nav:visited {
  258. color: #4C708C;
  259. text-decoration: none;
  260. }
  261. a.nav:hover {
  262. color: #283B4A;
  263. text-decoration: none;
  264. }
  265. a.nav:active {
  266. color: #4C708C;
  267. text-decoration: none;
  268. }
  269.  
  270. .bodyText {
  271. font-family: Arial, Helvetica, sans-serif;
  272. font-size: 11px;
  273. line-height: 19px;
  274. color: #101010;
  275. padding-left: 20px;
  276. padding-right: 15px;
  277. background-color:#fff;
  278. }
  279.  
  280. .subHeadText {
  281. font-family: Arial, Helvetica, sans-serif;
  282. font-size: 16px;
  283. line-height: 19px;
  284. color: #83A3BC;
  285. padding-right: 10px;
  286. padding-left: 20px;
  287. background-color:#FFF;
  288. }
  289. .subHeadTextLeft{
  290. font-family: Arial, Helvetica, sans-serif;
  291. font-size: 16px;
  292. line-height: 19px;
  293. color: #83A3BC;
  294. background-color:#FFF;
  295. }
  296.  
  297. .subNavLine {
  298. border-right: 1px solid #C5D4DF;
  299. background-color:#FFF;
  300. }
  301.  
  302. div#navcontainer {
  303. margin-left: 0px;
  304. margin-top: 15px;
  305. background-color:#fff;
  306. }
  307.  
  308. #navcontainer ul
  309. {
  310. margin: 0;
  311. padding: 0;
  312. list-style-type: none;
  313. font-family: Arial, Helvetica, sans-serif;
  314. line-height: 18px;
  315. font-weight: bold;
  316. text-align: right;
  317. background-color:#fff;
  318. }
  319.  
  320. #navcontainer li {
  321. text-decoration: none;
  322. background-color:#FFF;
  323. }
  324.  
  325. #navcontainer a {
  326. padding: 0px 4px;
  327. font-size: 10px;
  328. color: #4C708C;
  329. text-decoration: none;
  330. background-color:#FFF;
  331. }
  332.  
  333. #navcontainer a:hover {
  334. color: #283B4A;
  335. text-decoration: none;
  336. }
  337.  
  338. #subnavcontainer { margin-left: 0px;
  339. }
  340.  
  341. #subnavcontainer ul
  342. {
  343. margin: 0;
  344. padding: 0;
  345. text-align: right;
  346. list-style-type: none;
  347. }
  348.  
  349. #subnavcontainer li {
  350. margin: 0;
  351. text-decoration: none;
  352. font-family: Arial, Helvetica, sans-serif;
  353. font-size: 9px;
  354. font-weight: bold;
  355. color: #4C708C;
  356. line-height: 18px;
  357. padding-right: 5px;
  358. border: 0px;
  359. }
  360.  
  361. #subnavcontainer a
  362. {
  363. font-size: 9px;
  364. color: #283B4A;
  365. text-decoration: none;
  366. }
  367.  
  368. #subnavcontainer a:hover
  369. {
  370. color: #283B4A;
  371. text-decoration: none;
  372. }
  373.  
  374. #subnavcontainer a.brand {
  375. font-size: 9px;
  376. color: #4C708C;
  377. text-decoration: none;
  378. background-color:#FFF;
  379. }
  380.  
  381. #subnavcontainer a.brand:hover {
  382. color: #101010;
  383. text-decoration: none;
  384. }
  385.  
  386. div#contentCell {
  387. padding-right: 10px;
  388. padding-left: 25px;
  389. padding-top: 15px;
  390. padding-bottom: 20px;
  391. background-color: #FFF;
  392. }
  393.  
  394. div#awards {
  395. float: left;
  396. margin:0 auto;
  397. text-align:left;
  398. width: 615px;
  399. font-size: 9px;
  400. padding-right: 10px;
  401. padding-left: 25px;
  402. padding-top: 15px;
  403. padding-bottom: 20px;
  404. background-color:#FFF;
  405.  
  406. }
  407.  
  408. div#footer {
  409. width: 825px;
  410. float: left;
  411. margin:0 auto;
  412. border-top-width: 1px;
  413. border-top-style: solid;
  414. border-top-color: #4C708C;
  415. background-color: #ccc
  416. }
  417.  
  418. div#foot_left{
  419. float: left;
  420. margin:0 auto;
  421. text-align:left;
  422. background-color: #ccc
  423. }
  424.  
  425. div#foot_right{
  426. float: right;
  427. margin:0 auto;
  428. text-align:right;
  429. background-color: #ccc
  430. }
  431.  
  432. .footerText {
  433. background: #9F9F9F;
  434. font-family: Arial, Helvetica, sans-serif;
  435. font-size: 10px;
  436. }
  437.  
  438. div#footer2 {
  439. width: 825px;
  440. background-color: #ccc
  441. }
  442.  
  443. ul {
  444. margin: 0;
  445. list-style: none;
  446. width: 160px;
  447. font-weight: bold;
  448. padding-top: 10px;
  449. }
  450.  
  451. li {
  452. position: relative;
  453. font-family: Arial, Helvetica, sans-serif;
  454. text-align: right;
  455. font-size: 10px;
  456. border-bottom-width: 1px;
  457. border-bottom-style: solid;
  458. border-bottom-color: #C5D4DF;
  459. }
  460.  
  461. /* Styles for Menu Items */
  462. ul li a {
  463. display: block;
  464. text-decoration: none;
  465. color: #C5D4DF;
  466. background: #fff; /* IE6 Bug */
  467. padding: 5px;
  468. }
  469.  
  470. /* Fix IE. Hide from IE Mac \*/
  471. * html ul li { float: left; height: 1%; }
  472. * html ul li a { height: 1%; }
  473. /* End */
  474.  
  475. ul li a:hover { color: #83a3bc; } /* Hover Styles */
  476.  
  477. li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
  478.  
  479. li:hover ul, li.over ul { display: block; } /* The magic */
  480. li ul a {
  481.  
  482. display: block;
  483. text-decoration: none;
  484. color: #4C708C;
  485. background: #fff; /* IE6 Bug */
  486. padding: 5px;
  487. }
  488.  
  489. .title_bar_page {
  490. color: #83A3BC;
  491. font-weight: bold;
  492. }
  493.  
  494. .right{
  495. float: right;
  496. text-align: right;
  497. }
  498.  
  499. .space{
  500. margin: 3px;
  501. }
  502.  
  503. #newsCell {
  504. background-image: url("../images/hotels/grayBack.jpg");
  505. background-repeat: repeat-x;
  506. background-position: left top;
  507. padding: 5px;
  508. margin-top: 10px;
  509. margin-bottom: 10px;
  510. width: 605px;
  511. background-color:#FFF;
  512. }
  513. #newsCell li {
  514. list-style-type: none;
  515. margin-left: 0px;
  516. line-height: 13px;
  517. list-style-image: none;
  518. padding-top: 5px;
  519. border-top-width: 0.03em;
  520. border-top-style: solid;
  521. border-top-color: #9f9f9f;
  522. }
  523. #newsCell h1 {
  524. font-family: Arial, Helvetica, sans-serif;
  525. font-size: 15px;
  526. font-weight: normal;
  527. color: #4C708C;
  528. padding-left: 15px;
  529. margin: 0px;
  530. padding-top: 0px;
  531. padding-bottom: 0px;
  532. }
  533. #newsCell ul {
  534. margin: 0px;
  535. padding: 5px 0px 0px 15px;
  536. list-style-type: none;
  537. list-style-position: inside;
  538. list-style-image: none;
  539. }
  540. #newsCell a:link {
  541. font-weight: bold;
  542. color: #101010;
  543. text-decoration: none;
  544. }
  545. #newsCell a:visited {
  546. font-weight: bold;
  547. color: #101010;
  548. text-decoration: none;
  549. }
  550. #newsCell a:hover {
  551. font-weight: bold;
  552. color: #666666;
  553. text-decoration: none;
  554. }
  555. #newsCell h2 {
  556.  
  557. font-family: Arial, Helvetica, sans-serif;
  558. font-size: 15px;
  559. font-weight: normal;
  560. color: #283B4A;
  561. padding-left: 15px;
  562. margin: 0px;
  563. padding-top: 0px;
  564. padding-bottom: 0px;
  565. }
  566. #newsCellGreen {
  567. background-image: url("../images/hotels/greenBack.jpg");
  568. background-repeat: repeat-x;
  569. background-position: left top;
  570. padding: 20px;
  571. margin:0 auto;
  572. width: 625px;
  573. background-color:#FFF;
  574. }
  575. #newsCellGreen li {
  576. list-style-type: none;
  577. margin-left: 0px;
  578. line-height: 13px;
  579. list-style-image: none;
  580. padding-top: 5px;
  581. border-top-width: 0.03em;
  582. border-top-style: solid;
  583. border-top-color: #9f9f9f;
  584. background-color:#FFF;
  585. }
  586. #newsCellGreen h1 {
  587. font-family: Arial, Helvetica, sans-serif;
  588. font-size: 15px;
  589. font-weight: normal;
  590. color: #4C708C;
  591. padding-left: 15px;
  592. margin: 0px;
  593. padding-top: 0px;
  594. padding-bottom: 0px;
  595. }
  596. #newsCellGreen ul {
  597. margin: 0px;
  598. padding: 5px 0px 0px 15px;
  599. list-style-type: none;
  600. list-style-position: inside;
  601. list-style-image: none;
  602. background-color:#FFF;
  603. }
  604. #newsCellGreen a:link {
  605. font-weight: bold;
  606. color: #101010;
  607. text-decoration: none;
  608. }
  609. #newsCellGreen a:visited {
  610. font-weight: bold;
  611. color: #101010;
  612. text-decoration: none;
  613. }
  614. #newsCellGreen a:hover {
  615. font-weight: bold;
  616. color: #666666;
  617. text-decoration: none;
  618. }
  619. #newsCellGreen h2 {
  620. font-family: Arial, Helvetica, sans-serif;
  621. font-size: 15px;
  622. font-weight: normal;
  623. color: #283B4A;
  624. padding-left: 15px;
  625. margin: 0px;
  626. padding-top: 0px;
  627. padding-bottom: 0px;
  628. }
  629. #formText table,tr,td{
  630. font-size: 11px;
  631. background-color:#FFF;
  632. }
  633. .tan {
  634. font-size: .8em;
  635. color: #4C708C;
  636. }
Last edited by jproducer; Feb 21st, 2009 at 12:02 pm.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jproducer is offline Offline
18 posts
since Sep 2008
Feb 21st, 2009
0

Re: CSS Emergency - HELP!!

You could change:
css Syntax (Toggle Plain Text)
  1. div#body_2 {
  2. width: 825px;
  3. margin:0 auto;
  4. background-color:#FFF;
  5. text-align: left;
  6. }
To:
css Syntax (Toggle Plain Text)
  1. div#body_2 {
  2. width: 825px;
  3. margin:0 auto;
  4. background-color:#FFF;
  5. text-align: left;
  6. min-height:600px;
  7. }

You will need to add:
html Syntax (Toggle Plain Text)
  1. <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.
ktd
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ktd is offline Offline
6 posts
since Feb 2009
Feb 21st, 2009
0

Re: CSS Emergency - HELP!!

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jproducer is offline Offline
18 posts
since Sep 2008
Feb 21st, 2009
0

Re: CSS Emergency - HELP!!

Click to Expand / Collapse  Quote originally posted by jproducer ...
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
Last edited by jedi_ralf; Feb 21st, 2009 at 6:10 pm.
Reputation Points: 10
Solved Threads: 3
Newbie Poster
jedi_ralf is offline Offline
20 posts
since Apr 2008
Feb 21st, 2009
0

Re: CSS Emergency - HELP!!

Click to Expand / Collapse  Quote originally posted by jproducer ...
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:
html Syntax (Toggle Plain Text)
  1. <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)
  1. body {
  2. margin-top:20px;
  3. margin: 0 auto;
  4. background:#132025 url(bg.jpg) center repeat-y;
  5. }
I attached the bg.jpg image so you can try it. You could use it along with the min-height for now.
Attached Thumbnails
Click image for larger version

Name:	bg.jpg
Views:	14
Size:	10.7 KB
ID:	9306  
ktd
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ktd is offline Offline
6 posts
since Feb 2009
Feb 21st, 2009
0

Re: CSS Emergency - HELP!!

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jproducer is offline Offline
18 posts
since Sep 2008
Feb 22nd, 2009
0

Re: CSS Emergency - HELP!!

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Text overlay on image using css???
Next Thread in HTML and CSS Forum Timeline: Can Someone Assist Me?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC