Cont'd from a previous thread.. Website showing terrible in Firefox and IE. But ok in Chrome.

[marmaristasarim 0]

Hello I thought I would start a new thread. My site : satilikteknem.com is showing awful on IE and Firefox and ok in Chrome. What could be the problem? Catrina had asked for my custom css for this site and here it is: #nav_row.main_nav, ul.sf-menu ul li, .fpost {border-bottom: 0px;} #menu-nav li{background:none;} #menu-nav li a{color:#ffffff;} #menu-nav li.current_page_item a{color:#cccccc;background:transparent;} #menu-nav li a:hover{background:none;color:#cccccc;} #menu-nav .children li{background:#eeeeee;} #menu-nav .children li a{color:#07AADB;} .main_nav ul {list-style: none; display: block; margin: 0px 0px 0px 0px; border: 0px; padding: 0px; float: left; background-image: url('http://www.satilikteknem.com/menu_bg.png');} ul#menu-main-nav li#menu-item li.menu-item {background: url(http://www.satilikteknem.com/bg2.jpg) repeat-x top;} #page-main .content {border-right: 0px solid #cccccc; border-left: 0px solid #cccccc;} #page-canvas {border-right: 0px solid #cccccc; border-left: 0px solid #cccccc; background-color: #ffffff !important; filter:alpha(opacity=90); opacity:0.9;} .widget{ margin-bottom: 1em; overflow: hidden; padding:3px 3px 3px 3px; margin-top:10px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; background: none; } .widget-title{ border-bottom: none; text-align:left; padding:3px 3px 3px 3px; margin-bottom: .6em; font-size: .9em;} .clip .clip-thumb img {width: 300px; height: 150px; color: #333333;} .post-nav, .current_posts_info {background-color: #ffffff !important; filter:alpha(opacity=60); opacity:0.6; border-left: 1px solid #999999; border-right: 1px solid #999999;} .widget-title a:hover, h3.widget-title a:hover {color: #333333;} .page-id-2 #sidebar-wrap{margin-top:-470px;} .page-id-2 .fbox{width:190px !important; float:right;} #sidebar1 {width:210px !important; float:left;} .page-id-2 #feature-area {width:800px!important;height:240px!important; margin-left: 220px;} #featurenav{width:800px !important; margin-left: 5px;} #feature-footer{width:800px !important; margin-left: 220px;} I would really be happy for some help on this. Thank you in advance.

[kastelic 6]

There's just too much going on here to answer in a forum post. I would consider hiring someone to finish the job.

[marmaristasarim 0]

Thank you Kastelic, I appreciate your reply. I will erase all of the custom code and apply one by one to see which one of these is causing the problem.

[Kate 3]

Let us know how it goes. I'm not sure which issues in particular you're having. But, generally "floats" and/or "position" styles can render differently in different browsers

[marmaristasarim 0]

I will thank you Kate. ...still working on it

[marmaristasarim 0]

Hello Kate I did it! on my site: satilikteknem.com i used the following css codes, with the help of you, Catrina, and firebug in firefox... This is what i used for the feature slider to get it on the right side of the sidebar. And you might remember i could not access the links in the left sidebar. now i can :) and it was all out of wack on ie and firefox too, but showing normal on chrome. (go figure) Anyway, i used page-id-2 as this is the id of my home page and i only wanted this task specific to this page. for those who want to apply it on every page where the feature slider would be you would just remove the page-id-2. I know it's alot of feature this and feature that, but this is how it worked for me. Others will have to play with their widths and margins to get it right on their website. Also test it in different browsers.... what a learning lesson this was i tell ya :) But thank you guys for your support!! .page-id-2 #feature-area {width:800px!important;height:230px!important; margin-left: 230px; margin-top: 0px;} .page-id-2 #featurenav{width:800px !important; padding-left: 5px;} .page-id-2 #feature-footer{width:800px !important; margin-left: 230px;} .page-id-2 #featurenav a{width:800px !important; margin-left: 230px;} .page-id-2 #featurenav a.activeSlide{width:800px !important; margin-left: 230px;} .page-id-2 .feature-wrap{width:800px!important;height:230px!important;} .page-id-2 #feature_slider .text-bottom .feature-pad{width:800px!important;height:50px!important; margin-top:180px;} .page-id-2 #feature_slider .text-bottom .fmedia .dcol-pad{width:800px!important;height:50px!important; margin-top:180px;} .page-id-2 #feature_slider .fcontent {height:230px!important;} .page-id-2 #feature_slider .text-none .fmedia .dcol-pad{height:230px;} .page-id-2 #feature .container fix {width:800px !important;} .page-id-2 #feature-slider .default-features fix {width:800px !important;} .page-id-2 #feature .fix {position:inherit;} .page-id-2 #sidebar-wrap{margin-top:-600px;} .page-id-2 #sidebar1 {width:230px !important; float:left;} .page-id-2 .fbox{width:250px !important; float:right;}