CSS Emergency - HELP!!

Reply

Join Date: Sep 2008
Posts: 18
Reputation: jproducer is an unknown quantity at this point 
Solved Threads: 0
jproducer's Avatar
jproducer jproducer is offline Offline
Newbie Poster

CSS Emergency - HELP!!

 
0
  #1
Feb 21st, 2009
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.
Reply With Quote Quick reply to this message  
Join Date: Feb 2009
Posts: 6
Reputation: ktd is an unknown quantity at this point 
Solved Threads: 0
ktd ktd is offline Offline
Newbie Poster

Re: CSS Emergency - HELP!!

 
0
  #2
Feb 21st, 2009
You could change:
  1. div#body_2 {
  2. width: 825px;
  3. margin:0 auto;
  4. background-color:#FFF;
  5. text-align: left;
  6. }
To:
  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:
  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.
Reply With Quote Quick reply to this message  
Join Date: Sep 2008
Posts: 18
Reputation: jproducer is an unknown quantity at this point 
Solved Threads: 0
jproducer's Avatar
jproducer jproducer is offline Offline
Newbie Poster

Re: CSS Emergency - HELP!!

 
0
  #3
Feb 21st, 2009
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.
Reply With Quote Quick reply to this message  
Join Date: Apr 2008
Posts: 20
Reputation: jedi_ralf is an unknown quantity at this point 
Solved Threads: 2
jedi_ralf jedi_ralf is offline Offline
Newbie Poster

Re: CSS Emergency - HELP!!

 
0
  #4
Feb 21st, 2009
Originally Posted by jproducer View Post
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.
Reply With Quote Quick reply to this message  
Join Date: Feb 2009
Posts: 6
Reputation: ktd is an unknown quantity at this point 
Solved Threads: 0
ktd ktd is offline Offline
Newbie Poster

Re: CSS Emergency - HELP!!

 
0
  #5
Feb 21st, 2009
Originally Posted by jproducer View Post
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:
  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.
  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 Images
File Type: jpg bg.jpg (10.7 KB, 1 views)
Reply With Quote Quick reply to this message  
Join Date: Sep 2008
Posts: 18
Reputation: jproducer is an unknown quantity at this point 
Solved Threads: 0
jproducer's Avatar
jproducer jproducer is offline Offline
Newbie Poster

Re: CSS Emergency - HELP!!

 
0
  #6
Feb 21st, 2009
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.
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: CSS Emergency - HELP!!

 
0
  #7
Feb 22nd, 2009
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC