By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,261 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

Need a Little CSS Help

P: 1
hello. I'm experiencing problems with my css code (once again) working with Firefox and not working with IE 6 or 7

I have a problem with my head_logo_inner not too sure what's going on . Here is my css for this particular template.
Expand|Select|Wrap|Line Numbers
  1. body{
  2.     background-color: #333333;
  3.     color: #333333;
  4.     margin: 0px;
  5.     padding: 0px;
  6.     font-size: 0.8em;
  7.     font-family: Verdana, sans-serif;
  8. }
  9.  
  10. #body_outer { 
  11.     width: 850px; 
  12.     margin-left: auto;
  13.     margin-right: auto;
  14.     margin-top: 10px; 
  15.     background-image: url('../images/head_bg.gif');
  16.     background-repeat: repeat-x;
  17. }
  18.  
  19. #head{ width: 841px; height: 149px;}
  20. #head_img{ 
  21.     background-image: url('../images/head_img.gif');
  22.     background-repeat: no-repeat;
  23.     margin-right: 30px;
  24.     float: left;
  25.     width: 222px; 
  26.     height: 149px;
  27. }
  28. #head_logo{ width: 630px; text-align: left; }
  29. #head_logo_inner { width: 500px; padding-top: 30px;color: #ffffff;}
  30. .logo{
  31.     font-size: 1.7em;
  32.     font-weight: bold;
  33. }
  34. .slogan{
  35.     font-size: 1.3em;
  36. }
  37. #head_navi { width: 75%; height: 40px; text-align: right; margin-top: 35px;}
  38. #head_navi_inner{ width: 99%;}
  39.  
  40. #content_outer { 
  41.     width: 99%; 
  42.     margin: 0px !important;
  43.     margin: -7px;                 /* Fur IE */
  44.     text-align: left;
  45. }
  46. #navi_outer { width: 222px; float: left; margin-right: 20px;}
  47. #navi_topimg {
  48.     height: 51px;
  49.     background-image: url('../images/nav_top.gif');
  50.     background-repeat: no-repeat; 
  51. }
  52. #navi_inner {
  53.     padding-left: 20px;
  54.         padding-right: 10px;
  55.     padding-top: 6px; 
  56.     padding-bottom: 10px; 
  57.     text-align: left;
  58.     background-image: url('../images/nav_bg.gif');
  59.     background-repeat: repeat-y;
  60. }
  61. #navi_bottomimg {
  62.     height: 33px;
  63.         padding-top: -5px;
  64.     background-image: url('../images/nav_bottom.gif');
  65.     background-repeat: no-repeat;
  66. }
  67.  
  68. #mainbody_outer { width: 552px; float: left; text-align: left;     color: #ffffff;}
  69. #pathway { visibility: hidden;}
  70. #user1, #user2 {width: 35% !important; width: 47%; float: left; text-align: left; padding: 5px; margin: 10px; }
  71. #mainbody_inner { width: 100%; padding-top: 0px; }
  72.  
  73.  
  74. #footer { 
  75.     width: 850px; 
  76.     margin-left: auto;
  77.     margin-right: auto;
  78.     clear: both;
  79.         text-align: center;
  80.     border-top: 1px solid #DCDCDC; 
  81.     font-size: 0.7em; 
  82.                 color: #cccccc;
  83. }
  84.  
  85. /* --------------------- Joomla CSS ---------------------- */
  86.  
  87. a:link, a:visited { color: #c64934; text-decoration: underline; }
  88. a:hover { color: #900000; text-decoration: underline; }
  89.  
  90. table.contentpaneopen {
  91.   width: 100%;
  92.     padding: 0px;
  93.     border-collapse: collapse;
  94.     border-spacing: 0px;
  95.     margin: 0px;
  96. }
  97.  
  98. table.contentpaneopen td {
  99.    padding-right: 5px;
  100. }
  101.  
  102. table.contentpaneopen td.componentheading {
  103.     padding-left: 4px;
  104. }
  105.  
  106.  
  107.  
  108. table.contentpane {
  109.   width: 100%;
  110.     padding: 0px;
  111.     border-collapse: collapse;
  112.     border-spacing: 0px;
  113.     margin: 0px;
  114. }
  115.  
  116. table.contentpane td {
  117.     margin: 0px;
  118.     padding: 0px;
  119. }
  120.  
  121. table.contentpane td.componentheading {
  122.     padding-left: 4px;
  123. }
  124.  
  125. table.contentpaneopen fieldset {
  126.     border: 0px;
  127.     border-bottom: 1px solid #eee;
  128. }
  129.  
  130. .button {
  131.   color: #c64934;
  132.   text-align: center;
  133.   font-size: 11px;
  134.   font-weight: bold;
  135.   border: 1px solid #666666;
  136.   background-color: #ffffff;
  137.   width: auto;
  138.   padding: 0px 5px;
  139.   line-height: 18px !important;
  140.   line-height: 16px;
  141.   height: 26px !important;
  142.   height: 24px;
  143.   margin: 1px;
  144. }
  145.  
  146. .inputbox {
  147.     padding: 2px;
  148.     border:solid 1px #666666;
  149.     background-color: #ffffff;
  150. }
  151.  
  152. .componentheading {
  153.     color: #666666;
  154.     text-align: left;
  155.     padding-top: 4px;
  156.     padding-left: 4px;
  157.     height: 21px;
  158.     font-weight: bold;
  159.     font-size: 1.1em;
  160.     text-transform: uppercase;
  161.  
  162. }
  163.  
  164. .contentcolumn {
  165.     padding-right: 5px;
  166. }
  167.  
  168. .contentheading {
  169.     height: 30px;
  170.     color: #c64934;
  171.     font-weight: bold;
  172.     font-size: 0.9em;
  173.     white-space: nowrap;
  174. }
  175.  
  176.  
  177.  
  178. .contentpagetitle {
  179.     font-size: 0.9em;
  180.     font-weight: bold;
  181.     color: #cccccc;
  182.     text-align:left;
  183. }
  184.  
  185. table.searchinto {
  186.     width: 100%;
  187. }
  188.  
  189. table.searchintro td {
  190.     font-weight: bold;
  191. }
  192.  
  193. table.moduletable {
  194.     width: 100%;
  195.     margin-bottom: 5px;
  196.     padding: 0px;
  197.     border-spacing: 0px;
  198.     border-collapse: collapse;
  199. }
  200.  
  201. div.moduletable {
  202.     padding: 0;
  203.     margin-bottom: 2px;
  204. }
  205.  
  206. table.moduletable th, div.moduletable h3 {
  207.     color: #c64934;
  208.     text-align: left;
  209.     padding-left: 4px;
  210.     height: 21px;
  211.     line-height: 21px;
  212.     font-weight: bold;
  213.     font-size: 1.0em;
  214.     text-transform: uppercase;
  215.         margin-top: 20px;
  216.         margin-bottom: 3px;
  217. }
  218.  
  219. table.moduletable td {
  220.     font-size: 0.8em;
  221.     padding: 0px;
  222.     margin: 0px;
  223.     font-weight: normal;
  224. }
  225.  
  226. table.pollstableborder td {
  227.   padding: 2px;
  228. }
  229.  
  230. .sectiontableheader {
  231.   font-weight: bold;
  232.   background: #666666;
  233.   padding: 4px;
  234. }
  235.  
  236. .sectiontablefooter {
  237.  
  238. }
  239.  
  240. .sectiontableentry1 {
  241.     background-color : #333333;
  242. }
  243.  
  244. .sectiontableentry2 {
  245.     background-color : #666666;
  246. }
  247.  
  248. .small {
  249.     color: #999999;
  250.     font-size: 0.7em;
  251. }
  252.  
  253. .createdate {
  254.     height: 15px;
  255.     padding-bottom: 10px;
  256.     color: #999999;
  257.     font-size: 0.7em;
  258. }
  259.  
  260. .modifydate {
  261.     height: 15px;
  262.     padding-top: 10px;
  263.     color: #999999;
  264.     font-size: 0.7em;
  265. }
  266.  
  267. table.contenttoc {
  268.   border: 1px solid #cccccc;
  269.   padding: 2px;
  270.   margin-left: 2px;
  271.   margin-bottom: 2px;
  272. }
  273.  
  274. table.contenttoc td {
  275.   padding: 2px;
  276. }
  277.  
  278. table.contenttoc th {
  279.   color: #666666;
  280.     text-align: left;
  281.     padding-top: 2px;
  282.     padding-left: 4px;
  283.     height: 21px;
  284.     font-weight: bold;
  285.     font-size: 0.8em;
  286.     text-transform: uppercase;
  287. }
  288.  
  289. ul#mainlevel-nav
  290. {
  291.     list-style: none;
  292.     padding: 0;
  293.     margin: 0;
  294.     font-size: 0.8em;
  295. }
  296.  
  297. ul#mainlevel-nav li{
  298.     background-image: none;
  299.     padding-left: 0px;
  300.     padding-right: 0px;
  301.     float: left;
  302.     margin-right: 3px;
  303.     font-size: 11px;
  304.     line-height: 21px;
  305.     white-space: nowrap;
  306.         background-color: #cccccc;
  307.         color: #333333;
  308. }
  309.  
  310. ul#mainlevel-nav li a{
  311.     display: block;
  312.     padding-left: 15px;
  313.     padding-right: 15px;
  314.     text-decoration: none;
  315.     color: #333333;
  316.     background: transparent;
  317. }
  318.  
  319. #buttons>ul#mainlevel-nav li a { width: auto; }
  320.  
  321. ul#mainlevel-nav li a:hover{
  322.     color: #c64934;
  323.     background: transparent;
  324. }
  325.  
  326.  
  327. a.mainlevel:link, a.mainlevel:visited {
  328.     display: block;
  329.     vertical-align: middle;
  330.     font-size: 11px;
  331.     color: #ffffff;
  332.         background-color: #666666;
  333.     text-align: left;
  334.     padding-top: 5px;
  335.     padding-left: 18px;
  336.         margin-bottom: 3px;
  337.     height: 20px !important;
  338.     height: 25px;
  339.     width: 160px;
  340.     text-decoration: none;
  341. }
  342.  
  343. a.mainlevel:hover {
  344.     text-decoration: none;
  345.         border-left: 5px solid #c64934;
  346.     color: #ffffff;
  347. }
  348.  
  349. a.mainlevel#active_menu {
  350.         border-left: 5px solid #c64934;
  351.         color: #ffffff;
  352. }
  353.  
  354. a.mainlevel#active_menu:hover {
  355.         border: 0px;
  356.     color: #ffffff;
  357. }
  358.  
  359. a.sublevel:link, a.sublevel:visited {
  360.     padding-left: 1px;
  361.     vertical-align: middle;
  362.     font-size: 11px;
  363.     color: #ffffff;
  364.     text-align: left;
  365. }
  366.  
  367. a.sublevel:hover {
  368.     border-left: 5px solid #c64934;
  369.         color: #ffffff;
  370.     text-decoration: none;
  371. }
  372.  
  373. a.sublevel#active_menu {
  374.     border-left: 5px solid #c64934;
  375.         color: #ffffff;
  376. }
  377.  
  378. .highlight {
  379.     background-color: #ffffff;
  380.     color: #c64934;
  381.     padding: 0px;
  382. }
  383.  
  384. form {
  385. /* removes space below form elements */
  386.     margin: 0px;
  387.      padding: 0px;
  388. }
  389.  
  390. ul.latestnews, ul.mostread { border: 1px solid #cccccc; padding: 7px; list-style: none; margin-left: 0px;}
  391. table.pollstableborder td { color: #ffffff; font-size: 0.9em; text-align: left;}
  392. div.mosimage {
  393.   border: 1px solid #cccccc;
  394. }
  395.  
  396. .mosimage {
  397.   border: 1px solid #cccccc;
  398.   margin: 5px;
  399. }
  400.  
  401. .mosimage_caption {
  402.   margin-top: 2px;
  403.   background: #cccccc;
  404.   padding: 1px 2px;
  405.   color: #666666;
  406.   font-size: 10px;
  407.   border-top: 1px solid #cccccc;
  408. }
  409.  
  410. span.article_seperator {
  411.     display: block;
  412.     height: 1.5em;
  413. }
  414.  
The website is www.littlejohnart.com if ANYONE can help it would be greatly appreciated. Thanks!!
Feb 6 '07 #1
Share this Question
Share on Google+
3 Replies


P: 4
Hi, I feel a bit like I'm asking a stupid question but what actually is your problem?
Feb 7 '07 #2

P: 6
I tested the link you gave on the following browsers:
  1. Google Chrome 5.0.375.127
  2. Internet Explorer 8
  3. Mozilla Firefox 3.6.8

and it seems to work just fine! Did you fix the issue? If so, please let us know.

Here's something else you might want to think about: being a web developer for over 10 years now, I've given up trying to make all but the most basic sites look the same in all browsers. My rule of thumb is to develop for Firefox/Chrome/Safari first, and IE LAST, if at all, just because it is just so terrible.

Let me know if this helps
Aug 27 '10 #3

JKing
Expert 100+
P: 1,206
I don't see that ID anywhere in the markup of any of your pages.
Aug 27 '10 #4

Post your reply

Sign in to post your reply or Sign up for a free account.