CSS - browser detection?

grudas · 20 Dec 2012 at 16:06

Hey

i'm having a little problem with my .css file

in opera with

Code:

#slider { width: 638px; height: 241px; position: relative; }

set i have the content box in the correct position, but in chrome/firefox/ie it moves up(shrinks) and in css the value needs to be increased ~20px to match the look opera has?

obviously opera is the problem here since chrome/ff/ie show it properly(bar ff being ~1px of for some other reason?!)

is there a way to maybe add an extra line to css that only opera would read and it would ignore the current one?

obviously a css newbie here but i've been googling for an hour now and nothing seems to do the trick :/

thanks.

grudas · 20 Dec 2012 at 18:30

agent - thanks but that would be WAAAY to much work to rewrite the whole css !

that is the problem! i can't find a way to get it working.. even then it wouldn't be a perfect solution! but if you know a way please share

i googled around but there's a lot of different info and none of it seems to work.

grudas · 21 Dec 2012 at 00:45

well got it working with a javascript..

http://www.digiways.com/articles/php/dyncss/

<script language="JavaScript">
document.write('<link rel="stylesheet" href="http://www.yourdomain.com/');
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf('opera') != -1) document.write('opera.css');
else if (agt.indexOf('gecko') != -1) document.write('mozilla.css');
else if (agt.indexOf('msie') != -1) document.write('iexplorer.css');
else document.write('default.css');
document.write('" type="text/css">');
</script>

just in case someone runs into the problem..

grudas · 21 Dec 2012 at 14:45

its a very odd problem after all!

i can use a single style sheet but opera uses it in a different way compared to others! i'm sure it might be something in the code!

what happens;

chrome/ff/ie

once you login

now opera looks correct without doing anything(logged in or not), now i would say hey maybe the login box at the side expands when it loads up the avatars/info/etc but it stays exactly the same(and it shouldn't really effect the content box)

really confused!

here's all of the code - mind you this is a heavily modified cms template that uses css/tpl/php to run

Code:

/* ============== Various ============== */
p {margin: 5px;} 
.disp { padding:.8em; margin:0; }
.block { background-color:#191919; border:1px solid #292929; padding:8px; margin:12px; /*width:90%*/ }
.block h4 { margin-top:0; }
blockquote { background-color:#191919; border: thin dotted #5e5e5e; padding:10px; }


.error { padding:24px 8px 24px 8px; margin:0; color:#CC1212; font-weight:bold; font-size:110%; text-align:center; }
.codetitle { font-size:.90em; text-transform:uppercase; font-weight:bold; padding:2px; margin-top:5px; }
.code { background-color:#191919; border:1px solid #292929; width:90%; padding:2px; margin-bottom:5px; font-family:monospace; }


.valid  { height:48px; text-align:center; vertical-align:middle; }
.download { font-size:110%; text-align:center; background-color: #E8E8E8; padding:16px; margin-top:16px; }
.paging { padding:6px; text-align:right; font-size:.90em; }
.coltop { text-align:center; background: url(images/sort-nav-bg.gif) /*background-color:#303030!important*/; color:#707070; padding:5px 0; font-weight:bold; }
.centerall { text-align:center; vertical-align:middle; }
.desc { font-size:95%; padding:3px; color:#646464; }
.spoiler { padding:8px; margin:8px; border:1px dashed #CCCCCC; background-color:#DBE5E9; }

.odd { background-color:#292929!important; }
.even { background-color:#252525!important; }

form { margin:0; }
.colleft { float:left; margin:0px 4px 0px 4px; }
.colright { float:right; margin:0px 4px 0px 4px; }
.bar_front { background-color:#999; border-right:0px solid #333333; padding:0; height:8px; }
.bar_back { background-color:#151515; border:1px solid #333333; margin:0 7px 0 7px; height:8px; }
.bbcodes a img { border:0; background-color:transparent; }
.smilies a img { border:0; background-color:transparent; }
.today { border:1px dashed #DDAA00; }
.signature  { color:#777; font-size:.9em; max-height:500px; overflow:auto; }
.signature a	{ color:#888; }

/* ============== Tables ============== */

table td  { vertical-align:top; }
table.flat { width:100%; margin:0; padding:0; border-collapse:collapse; }
table.flat td  { padding:0; margin:0}
table.main { width:100%; margin:0; padding:4px; }
table.main td  { padding:4px; }
table.cells { width:100%; border-spacing: 1px; margin:0; padding:0;}
table.cells td { background-color:#252525; padding:3px; }
table.list { width:100%; margin:0; padding:5px; }
table.list td  { padding:12px; }

/* ============== Plugins ============== */

/* ============== Indexpolls ============== */

.loading { position:relative; left:45%; top:-50px; z-index:99; }

.rss-icon-title{
	margin: 6px 10px 0 5px;
	float: right;
}
.rss-icon{
	margin: 0px 5px 0px 5px;
}

/* ============== Tag Cloud Fixes ============== */
ul.tag_cloud li {
	display: inline;
}

/* ============== Ratings CSS ============== */
/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
div.rating-cancel,div.rating-cancel a{background:url(img/system/delete.gif) no-repeat 0 -16px}
div.star-rating,div.star-rating a{background:url(img/system/star.gif) no-repeat 0 0px}
div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0;font-size:0}
div.star-rating-on a{background-position:0 -16px!important}
div.star-rating-hover a{background-position:0 -32px}
/* Read Only CSS */
div.star-rating-readonly a{cursor:default !important}
/* Partial Star CSS */
div.star-rating{background:transparent!important;overflow:hidden!important}
/* END jQuery.Rating Plugin CSS */

.minieditor {width:100%}
.editor{width:95%}

/* ============== markItUp CSS ============== */

.markItUpContainer  {
	/*border:1px solid #3C769D;*/
	background:#111!important;
	padding:5px 5px 2px 5px;
	font:11px Verdana, Arial, Helvetica, sans-serif;
	}
	
.markItUpEditor {
	font-size: 12px;
	font-family: Arial, "Trebuchet MS", sans-serif;
	padding:5px 5px 5px 5px;
	border:1px solid #3C769D;
	width:98%;
	/*height:320px;*/
	background-image:none!important;
	background:#111!important;
	background-repeat:no-repeat;
	clear:both; display:block;
	line-height:18px;
	overflow:auto;
	color: #a0a0a0!important;
}



/*----- Start "Main definitions" -----*/
* { padding: 0; margin: 0; outline: 0; }

body {
    font-size: 12px;
    line-height: 1.2;
    font-family: Arial, "Trebuchet MS", sans-serif;
    color: #a0a0a0;
    background: url(images/bg.gif) repeat 0 0;
    text-align: left;
}

a img { border: 0; }
a { color: #a0a0a0; text-decoration: none; }
a:hover { text-decoration: underline; }

.left { float: left; display: inline; }
.right { float: right; display: inline; }

.cl, .clear { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.field { font-size: 12px; color: #484848; font-family: Arial, "Trebuchet MS", sans-serif; color: #000; border: solid 1px #a0a0a0; width: 140px; padding: 2px 5px; }
/*----- End "Main definitions" -----*/

.shell { width: 914px; margin: 0 auto; }

#page { padding-bottom: 30px; }

#header { width: 100%; position: relative; }

#logo { text-transform: uppercase; line-height: 1; }
#logo h1 { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; font-size: 30px; color: #fff; }
#logo h1 a { color: #fff; text-decoration: none; }
#logo h1 a span { color: #7ab7e2; }
#logo .description { font-size: 10px; color: #cfd2d9; }

#top-nav ul {
	text-transform: uppercase;
	display: inline;
	font-size: 12px; font-weight: bold;
	line-height: 31px;
	color: #f90;
}

#main-nav { float: right; display: inline; line-height: 32px; background: url(images/main-nav-bg.gif) repeat-x 0 0; }
#main-nav .bg-right { background: url(images/main-nav-bg-right.png) no-repeat right 0; }
#main-nav .bg-left { background: url(images/main-nav-bg-left.png) no-repeat 0 0; padding-left: 35px; width: 880px; }
#main-nav ul { height: 32px; font-size: 10px; color: #a8a8a8; text-transform: uppercase; }
#main-nav ul li { float: left; display: inline; list-style-type: none; background: url(images/main-nav-sep.gif) no-repeat right 0; }
#main-nav ul li a { float: center; display: inline; text-decoration: none; color: #a8a8a8; padding: 0 11px 0 9px; }
#main-nav ul li a:hover { text-decoration: underline; }

#sort-nav { color:#ffffff; line-height: 46px; background: url(images/sort-nav-bg.gif) repeat-x 0 0; } 
#sort-nav .bg-left { background: url(images/sort-nav-bg-left.png) no-repeat 0 0; position: relative; height: 46px; }
#sort-nav .bg-right { background: url(images/sort-nav-bg-right.png) no-repeat right 0; position: relative; height: 46px; }
#sort-nav ul li { float: left; display: inline; list-style-type: none; height: 46px; }
#sort-nav ul li a { float: left; display: inline; font-size: 13px; font-weight: bold; color: #282828; text-decoration: none; padding: 0 19px; }
#sort-nav ul li span.sep { float: left; display: inline; width: 2px; height: 46px; font-size: 0; line-height: 0; text-indent: -4000px; background: url(images/sort-nav-sep.gif); }
#sort-nav ul li a:hover { text-decoration: underline; }
#sort-nav ul li.active a { color: #fff; text-decoration: none; }
#sort-nav ul li.active a:hover { text-decoration: none; }
#sort-nav ul li.first-active a { background: url(images/nav-active-first.gif) no-repeat 0 0; }
#sort-nav ul li.active span.sep { background-image: url(images/nav-active-sep.gif); }
#sort-nav ul li.active { background: url(images/nav-active-bg.gif) repeat-x 0 0; }

#main { background: #050505 url(images/main-bg.gif) no-repeat 0 0; padding-top: 10px; }
#main-bot { background: url(images/main-bot-bgzzz) no-repeat 0 bottom; padding: 0 10px 2px 10px; height: 100%; position: relative; }
#sidebar { float: left; display: inline; width: 226px; }
#content { float: right; display: inline; width: 657px; }

.block- { margin-bottom: 10px; background-repeat: no-repeat; background-position: 0 0; }
.block- .block-bot { height: 100%; position: relative; background-repeat: no-repeat; background-position: 0 bottom; }
.block- .block-cnt { padding: 10px 10px 10px 9px; }

.block- .head { background: url(images/block-head.gif) no-repeat 0 0; padding-left: 15px; }
.block- .head .head-cnt { background: url(images/block-head.gif) no-repeat right 0; line-height: 38px; height: 38px; padding-right: 13px; }
.block- .head h3 { font-size: 12px; font-weight: bold; color: #a0a0a0; text-transform: uppercase; }
.block- .head h3 a { font-size: 12px; font-weight: bold; color: #a0a0a0;text-decoration:none }
.block- .head .view-all { float: right; display: inline; width: 61px; height: 18px; line-height: 18px; background: url(images/block-head-view-all.gif); margin-top: 12px; }
.block- .head .view-all { color: #000000; font-size: 10px; text-decoration: none; text-align: center; }
.block- .head .view-all:hover { text-decoration: underline; }

#content .block- { background-image: url(images/content-block-top.gif); background-color: #313131; width: 657px; }
#content .block- .block-bot { background-image: url(images/content-block-bot.gif); }

#sidebar .block- { background-image: url(images/sidebar-block-top.gifaa); background-color: #3e3e3e; width: 226px; }
#sidebar .block- .block-bot { background-image: url(images/sidebar-block-bot.gifoff); }



#search .block-cnt { padding: 4px 4px 4px 4px; }
#search .fieldplace { float: left; display: inline; width: 162px; height: 22px; background: url(images/search-field.gif) no-repeat 0 0; padding-left: 26px; }
#search .fieldplace .field { padding: 3px 6px 4px; width: 158px; border: none; background: none; }
#search .button { float: left; display: inline; width: 29px; height: 22px; font-size: 0; line-height: 0; text-indent: -4000px; cursor: pointer; border: 0; }
#search .button { background: url(images/search-button.gif) no-repeat 0 0; }

#sign .block-cnt { padding: 6px 5px 5px 5px; }
#sign .button { display: block; font-size: 11px; font-weight: bold; text-align: center; color: #fff; text-decoration: none; text-transform: uppercase; line-height: 29px; }
#sign .button { width: 105px; height: 29px; background: url(images/sign-button.gif) no-repeat 0 0; }
#sign .button:hover { background-position: 0 bottom; }
#sign .button-left { float: left; display: inline; }
#sign .button-right { float: right; display: inline; }
#sign .center { text-align: center; font-size: 11px; line-height: 16px; margin-top: 4px; }
#sign .center a { color: #35cfd9; }

#sidebar .articles .article { width:90% ; padding: 8px 7px; background: url(images/sidebar-article-sep.gif) repeat-x 0 bottom; font-size: 11px; color: #a0a0a0; }
#sidebar .articles h4 { color: #fff; font-weight: bold; font-size: 12px; }
#sidebar .articles h4 a { color: #fff; text-decoration: none; }
#sidebar .articles h4 a:hover { color: #ccc; }
#sidebar .articles .view-all { font-size: 10px; letter-spacing: 0.5px; line-height: 24px; float: right; display: inline; margin-right: 6px; }

#sidebar .image-articles .image { float: left; display: inline; width: 55px; }
#sidebar .image-articles .image img { padding: 1px; border: solid 1px #1e1e1e; width: 51px; height: 51px; }
#sidebar .image-articles .cnt { float: right; display: inline; width: 150px; }

#sidebar .text-articles .article { padding: 8px 10px; font-size: 12px; }
#sidebar .text-articles h4 { font-size: 13px; }

#content .articles h4 { font-size: 15px; font-weight: none; color: #ccc; margin: 4px 0 2px; }
#content .articles h4 a { text-decoration: none; color: #ccc; }
#content .articles h4 a:hover { color: #fff; }

#content .col-articles .image img { padding: 1px; border: solid 1px #050505; width: 194px; height: 194px; }
#content .col-articles .article { float: left; display: inline; margin: 17px 0 10px 15px; width: 95%; }

#content .row-articles .article { padding: 10px 15px 12px 15px; background: url(images/content-article-sep.gif) repeat-x 0 bottom; }
#content .row-articles .last-article { background: none; }
#content .row-articles .image { float: left; display: inline; width: 194px; }
#content .row-articles .image img { width: 194px; }
#content .row-articles .cnt { float: right; display: inline; width: 420px; }
#content .row-articles h4 { margin-top: 0; line-height: 20px; }
#content .row-articles h4 a { color: #e4e4e4; }

#slider { width: 638px; height: 224px; position: relative; }
  
#footer .copy { font-size: 10px; color: #363636; text-transform: uppercase; text-align: right; padding: 20px 0; }
#footer .copy a{ color: #363636; }
#footer .navs { background: #222 url(images/footer-navs-top.gif) no-repeat 0 0; text-align: center; font-size: 10px; text-transform: uppercase; color: #656565; height: 100%; position: relative; }
#footer .navs .navs-bot { background: url(images/footer-navs-bot.gif) no-repeat 0 bottom; height: 100%; position: relative; }
#footer .navs ul { margin: 10px 0; }
#footer .navs ul li { list-style-type: none; display: inline; padding: 0 6px; }
#footer .navs ul li a { color: #656565; text-decoration: none; }
#footer .navs ul li a:hover { text-decoration: underline; }

/* for understanding browsers */
.resizeimage   { max-width:600px;}

/* for Internet Explorer */
/*\*/
* html .resizeimage{
border:0;
width:expression(((this.width>600)?this.width=600:null)?"normal":"normal");
}
/**/

slider is the "problematic" bit in my eyes! and changing the top line can fix it so it looks right without loggin in

but once you login it gets to big and stretches the template again?! which is weird :/

if i keep the same 224px in css once logged in the site looks good in all the browsers, but once you log out from chrome/ie/ff it will "shrink" again?!

i know i might be missing something really obvious but hey you gotta start somewhere!

grudas · 21 Dec 2012 at 15:54

hmm good idea! ill see if i can find something! thanks

i've tried that a lot ;D first thing i did actually

grudas · 21 Dec 2012 at 17:54

yeah the script is off now..

so now the site runs on a single css.

the problem was in the "login" box when you logged off it would shrink because there would be less info on it(no admin panel/pm's etc) and once you logged back in it would expand stretching the whole template

what i did is set a fixed height of it so it doesn't change the size like others do and moved around the contents of it so they fill it in properly!

now it works like it should

thanks for the help.