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.

agent_paul · 20 Dec 2012 at 16:38

You can have a look at this:

http://meyerweb.com/eric/tools/css/reset/

Its supposed to reset the default's each browser has so that they behave consistently.

add that css before your css and see if it looks the same in all browsers

AHarvey · 20 Dec 2012 at 17:13

this might help, requires seperate CSS sheets for each browser you want to define.

Personally, it's opera, I wouldn't bother

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..

agent_paul · 21 Dec 2012 at 08:42

In the long run. it would be best to have just a single stylesheet for your site. Having multiple stylesheets per browser is a maintenance nightmare (thats what the reset css thing was trying to avoid too).

if your using a div for your content block, then it should automatically be using display: block but if your using a span, you would have to give a a display: block | inline-block.

if you could show us some example code, we could prob help some more

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!

agent_paul · 21 Dec 2012 at 15:51

are you sure that there isn't anything else in that container after logging in thats taking up some space. something that might be visibility: hidden

i would inspect the html with something like firebug to check that nothing new is being inserted

agent_paul · 21 Dec 2012 at 15:53

i would also clear your cache incase your loading some old css

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

fez · 21 Dec 2012 at 16:18

Just use the css reset buddy. You will have to tweak a few things but in the long run you will save loads of time. There is a reason that we all use them to build sites. You will probably find that you are cutting out more css than you are modifying anyway.

agent_paul · 21 Dec 2012 at 16:51

I would normally say to use it but as he's using a heavily modified cms template, he's gonna have to fix all the things that reset.css breaks. So if he goes down the route, he'd might as well start from scratch.

GravyMonster · 21 Dec 2012 at 17:22

Honestly, if you're having to use browser sniffing to get CSS working, you're probably best starting from scratch

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.

agent_paul · 22 Dec 2012 at 19:15

Glad to be of help

Morningwalker · 2 Jan 2013 at 07:56

i too solve the same problem with this post. thanks all