Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts

    CSS Conditional inline

    Hey,

    I would like to do this:

    <div style="<![if !IE]>width: 100%;<![endif]>">
    Is this possible? The above code doesn't work. What I want is that the width is 100% if the browser is NOT IE.

    Thanks

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Have you tried something like this?

    <div style="width: 100%;
    ^width: 95%;
    _width: 95%;">

    The first rule, all browser will read.
    The second rule targets all IR browsers (i believe up to IE7).
    The last rule targets IE6.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hey,

    None of them does what I want. I just want to do something in all browser with the exeption of IE.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Bv202,

    by default the div element has 100% width.

    If you require a different width value for IE, then you should consider giving the div an id="somename"
    and then setting it's width value in the head section of your document like this...
    Code:
    
    <!--[if IE]>
    <style type="text/css">
    #somename {
        width:50%;
     }
    </style>
    <![endif]-->
    
    coothead

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hey,

    I have considered that, but my code gets overwritten for some reason if I do it that way. So I'm trying it inline

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Bv202,
    ...but my code gets overwritten for some reason if I do it that way. So I'm trying it inline
    In that case do it like this...
    Code:
    
    <!--[if !IE]><!-->
    <div style="width:100%">  
    <!--<![endif]-->
    
    <!--[if IE]>
    <div style="width:50%">
    <![endif]-->  
    
    coothead

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Bv202,

    when you say that...
    ..my code gets overwritten...
    ...are you making sure that the conditional commented CSS for IE comes after the main CSS?

    coothead

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hey,

    I'll explain what I'm trying to do.

    I have a PhpBB forum and I'm trying to modify some code which gives issues in IE.

    The full CSS file:
    Code:
    /*  phpBB 3.0 Style Sheet
        --------------------------------------------------------------
    	Style name:		subsilver2
    	Based on style:	subSilver (the default phpBB 2 style)
    	Original author:	subBlue ( http://www.subBlue.com/ )
    	Modified by:		psoTFX and the phpBB team ( http://www.phpbb.com )
    	
    	This is an alternative style for phpBB3 for those wishing to stay with
    	the familiar subSilver style of phpBB version 2.x
    	
    	Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
        --------------------------------------------------------------
    */
    
    /* Layout
     ------------ */
    * {
    	/* Reset browsers default margin, padding and font sizes */
    	margin: 0;
    	padding: 0;
    }
    
    html {
    	font-size: 100%;
    }
    
    body {
    	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    	color: #323D4F;
    	background-color: #FFFFFF;
    	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
    	margin: 0;
    }
    
    #wrapheader {
    	min-height: 120px;
    	height: auto !important;
    	height: 120px;
    /*	background-image: url('./images/background.gif');
    	background-repeat: repeat-x;*/
    /*	padding: 0 25px 15px 25px;*/
    	padding: 0;
    }
    
    #wrapcentre {
    	margin: 15px 25px 0 25px;
    }
    
    #wrapfooter {
    	text-align: center;
    	clear: both;
    }
    
    #wrapnav {
    	width: 100%;
    	margin: 0;
    	background-color: #ECECEC;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #A9B8C2;
    }
    
    #logodesc {
    	margin-bottom: 5px;
    	padding: 5px 25px;
    	background: #D9DFE4;
    	border-bottom: 1px solid #4787A7;
    }
    
    #menubar {
    	margin: 0 25px;
    }
    
    #datebar {
    	margin: 10px 25px 0 25px;
    }
    
    #findbar {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    
    .forumrules {
    	background-color: #F9CC79;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #BB9860;
    	padding: 4px;
    	font-weight: normal;
    	font-size: 1.1em;
    	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    }
    
    .forumrules h3 {
    	color: red;
    }
    
    #pageheader { }
    #pagecontent { }
    #pagefooter { }
    
    #poll { }
    #postrow { }
    #postdata { }
    
    
    /*  Text
     --------------------- */
    h1 {
    	color: black;
    	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
    	font-weight: bold;
    	font-size: 1.8em;
    	text-decoration: none;
    }
    
    h2 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 1.5em;
    	text-decoration: none;
    	line-height: 120%;
    }
    
    h3 {
    	font-size: 1.3em;
    	font-weight: bold;
    	font-family: Arial, Helvetica, sans-serif;
    	line-height: 120%;
    }
    
    h4 {
    	margin: 0;
    	font-size: 1.1em;
    	font-weight: bold;
    }
    
    p {
    	font-size: 1.1em;
    }
    
    p.moderators {
    	margin: 0;
    	float: left;
    	color: black;
    	font-weight: bold;
    }
    
    .rtl p.moderators {
    	float: right;
    }
    
    p.linkmcp {
    	margin: 0;
    	float: right;
    	white-space: nowrap;
    }
    
    .rtl p.linkmcp {
    	float: left;
    }
    
    p.breadcrumbs {
    	margin: 0;
    	float: left;
    	color: black;
    	font-weight: bold;
    	white-space: normal;
    	font-size: 1em;
    }
    
    .rtl p.breadcrumbs {
    	float: right;
    }
    
    p.datetime {
    	margin: 0;
    	float: right;
    	white-space: nowrap;
    	font-size: 1em;
    }
    
    .rtl p.datetime {
    	float: left;
    }
    
    p.searchbar {
    	padding: 2px 0;
    	white-space: nowrap;
    } 
    
    p.searchbarreg {
    	margin: 0;
    	float: right;
    	white-space: nowrap;
    }
    
    .rtl p.searchbarreg {
    	float: left;
    }
    
    p.forumdesc {
    	padding-bottom: 4px;
    }
    
    p.topicauthor {
    	margin: 1px 0;
    }
    
    p.topicdetails {
    	margin: 1px 0;
    }
    
    .postreported, .postreported a:visited, .postreported a:hover, .postreported a:link, .postreported a:active {
    	margin: 1px 0;
    	color: red;
    	font-weight:bold;
    }
    
    .postapprove, .postapprove a:visited, .postapprove a:hover, .postapprove a:link, .postapprove a:active {
    	color: green;
    	font-weight:bold;
    }
    
    .postapprove img, .postreported img {
    	vertical-align: bottom;
    }
    
    .postauthor {
    	color: #000000;
    }
    
    .postdetails {
    	color: #000000;
    }
    
    .postbody {
    	font-size: 1.3em;
    	line-height: 1.4em;
    	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
    }
    
    .postbody li, ol, ul {
    	margin: 0 0 0 1.5em;
    }
    
    .rtl .postbody li, .rtl ol, .rtl ul {
    	margin: 0 1.5em 0 0;
    }
    
    .posthilit {
    	background-color: yellow;
    }
    
    .nav {
    	margin: 0;
    	color: black;
    	font-weight: bold;
    }
    
    .pagination {
    	padding: 4px;
    	color: black;
    	font-size: 1em;
    	font-weight: bold;
    }
    
    .cattitle {
    
    }
    
    .gen {
    	margin: 1px 1px;
    	font-size: 1.2em;
    }
    
    .genmed {
    	margin: 1px 1px;
    	font-size: 1.1em;
    }
    
    .gensmall {
    	margin: 1px 1px;
    	font-size: 1em;
    }
    
    .copyright {
    	color: #444;
    	font-weight: normal;
    	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    }
    
    .titles {
    	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    	font-weight: bold;
    	font-size: 1.3em;
    	text-decoration: none;
    }
    
    .error {
    	color: red;
    }
    
    
    /* Tables
     ------------ */
    th {
    	color: #FFA34F;
    	font-size: 1.1em;
    	font-weight: bold;
    	background-color: #006699;
    	background-image: url('./images/cellpic3.gif');
    	white-space: nowrap;
    	padding: 7px 5px;
    }
    
    td {
    	padding: 2px;
    }
    td.profile {
    	padding: 4px;
    }
    
    .tablebg {
    	background-color: #A9B8C2;
    }
    
    .catdiv {
    	height: 28px;
    	margin: 0;
    	padding: 0;
    	border: 0;
    	background: white url('./images/cellpic2.jpg') repeat-y scroll top left;
    }
    .rtl .catdiv {
    	background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;
    }
    
    .cat {
    	height: 28px;
    	margin: 0;
    	padding: 0;
    	border: 0;
    	background-color: #C7D0D7;
    	background-image: url('./images/cellpic1.gif');
    	text-indent: 4px;
    }
    
    .row1 {
    	background-color: #ECECEC;
    	padding: 4px;
    }
    
    .row2 {
    	background-color: #DCE1E5;
    	padding: 4px;
    }
    
    .row3 {
    	background-color: #C0C8D0;
    	padding: 4px;
    }
    
    .spacer {
    	background-color: #D1D7DC;
    }
    
    hr {
    	height: 1px;
    	border-width: 0;
    	background-color: #D1D7DC;
    	color: #D1D7DC;
    }
    
    .legend {
    	text-align:center;
    	margin: 0 auto;
    }
    
    /* Links
     ------------ */
    a:link {
    	color: #006597;
    	text-decoration: none;
    }
    
    a:active,
    a:visited {
    	color: #005784;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #D46400;
    	text-decoration: underline;
    }
    
    a.forumlink {
    	color: #069;
    	font-weight: bold;
    	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    	font-size: 1.2em;
    }
    
    a.topictitle {
    	margin: 1px 0;
    	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    	font-weight: bold;
    	font-size: 1.2em;
    }
    
    a.topictitle:visited {
    	color: #5493B4;
    	text-decoration: none;
    }
    
    th a,
    th a:visited {
    	color: #FFA34F !important;
    	text-decoration: none;
    }
    
    th a:hover {
    	text-decoration: underline;
    }
    
    
    /* Form Elements
     ------------ */
    form {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    
    input {
    	color: #333333;
    	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    	font-size: 1.1em;
    	font-weight: normal;
    	padding: 1px;
    	border: 1px solid #A9B8C2;
    	background-color: #FAFAFA;
    }
    
    textarea {
    	background-color: #FAFAFA;
    	color: #333333;
    	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    	font-size: 1.3em; 
    	line-height: 1.4em;
    	font-weight: normal;
    	border: 1px solid #A9B8C2;
    	padding: 2px;
    }
    
    select {
    	color: #333333;
    	background-color: #FAFAFA;
    	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    	font-size: 1.1em;
    	font-weight: normal;
    	border: 1px solid #A9B8C2;
    	padding: 1px;
    }
    
    option {
    	padding: 0 1em 0 0;
    }
    
    option.disabled-option {
    	color: graytext;
    }
    
    .rtl option {
    	padding: 0 0 0 1em;
    }
    
    input.radio {
    	border: none;
    	background-color: transparent;
    }
    
    .post {
    	background-color: white;
    	border-style: solid;
    	border-width: 1px;
    }
    
    .btnbbcode {
    	color: #000000;
    	font-weight: normal;
    	font-size: 1.1em;
    	font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    	background-color: #EFEFEF;
    	border: 1px solid #666666;
    }
    
    .btnmain {
    	font-weight: bold;
    	background-color: #ECECEC;
    	border: 1px solid #A9B8C2;
    	cursor: pointer;
    	padding: 1px 5px;
    	font-size: 1.1em;
    }
    
    .btnlite {
    	font-weight: normal;
    	background-color: #ECECEC;
    	border: 1px solid #A9B8C2;
    	cursor: pointer;
    	padding: 1px 5px;
    	font-size: 1.1em;
    }
    
    .btnfile {
    	font-weight: normal;
    	background-color: #ECECEC;
    	border: 1px solid #A9B8C2;
    	padding: 1px 5px;
    	font-size: 1.1em;
    }
    
    .helpline {
    	background-color: #DEE3E7;
    	border-style: none;
    }
    
    
    /* BBCode
     ------------ */
    .quotetitle, .attachtitle {
    	margin: 10px 5px 0 5px;
    	padding: 4px;
    	border-width: 1px 1px 0 1px;
    	border-style: solid;
    	border-color: #A9B8C2;
    	color: #333333;
    	background-color: #A9B8C2;
    	font-size: 0.85em;
    	font-weight: bold;
    }
    
    .quotetitle .quotetitle {
    	font-size: 1em;
    }
    
    .quotecontent, .attachcontent {
    	margin: 0 5px 10px 5px;
    	padding: 5px;
    	border-color: #A9B8C2;
    	border-width: 0 1px 1px 1px;
    	border-style: solid;
    	font-weight: normal;
    	font-size: 1em;
    	line-height: 1.4em;
    	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
    	background-color: #FAFAFA;
    	color: #4B5C77;
    }
    
    .attachcontent {
    	font-size: 0.85em;
    }
    
    .codetitle {
    	margin: 10px 5px 0 5px;
    	padding: 2px 4px;
    	border-width: 1px 1px 0 1px;
    	border-style: solid;
    	border-color: #A9B8C2;
    	color: #333333;
    	background-color: #A9B8C2;
    	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    	font-size: 0.8em;
    }
    
    .codecontent {
    	direction: ltr;
    	margin: 0 5px 10px 5px;
    	padding: 5px;
    	border-color: #A9B8C2;
    	border-width: 0 1px 1px 1px;
    	border-style: solid;
    	font-weight: normal;
    	color: #006600;
    	font-size: 0.85em;
    	font-family: Monaco, 'Courier New', monospace;
    	background-color: #FAFAFA;
    }
    
    .syntaxbg {
    	color: #FFFFFF;
    }
    
    .syntaxcomment {
    	color: #FF8000;
    }
    
    .syntaxdefault {
    	color: #0000BB;
    }
    
    .syntaxhtml {
    	color: #000000;
    }
    
    .syntaxkeyword {
    	color: #007700;
    }
    
    .syntaxstring {
    	color: #DD0000;
    }
    
    
    /* Private messages
     ------------------ */
    .pm_marked_colour {
    	background-color: #000000;
    }
    
    .pm_replied_colour {
    	background-color: #A9B8C2;
    }
    
    .pm_friend_colour {
    	background-color: #007700;
    }
    
    .pm_foe_colour {
    	background-color: #DD0000;
    }
    
    
    /* Misc
     ------------ */
    img {
    	border: none;
    }
    
    .sep {
    	color: black;
    	background-color: #FFA34F;
    }
    
    table.colortable td {
    	padding: 0;
    }
    
    pre {
    	font-size: 1.1em;
    	font-family: Monaco, 'Courier New', monospace;
    }
    
    .nowrap {
    	white-space: nowrap;
    }
    
    .username-coloured {
    	font-weight: bold;
    }
    In a file, I have this code:
    Code:
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
    		<!-- INCLUDE posting_buttons.html -->
    		<tr>
    			<td valign="top" style="width: 100%;"><textarea name="message" style="width: 98%;" rows="15" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();">{MESSAGE}</textarea></td>
    			<!-- IF S_BBCODE_ALLOWED -->
    			<td width="80" align="center" valign="top">
    				<script type="text/javascript">
    				// <![CDATA[
    					colorPalette('v', 7, 6)
    				// ]]>
    				</script>
    			</td>
    			<!-- ENDIF -->
    	 	</tr>
    		</table>
    This line gives the problems:
    Code:
    <td valign="top" style="width: 100%;"><textarea name="message" style="width: 98%;" rows="15" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();">{MESSAGE}</textarea></td>
    If I remove the style="width: 98%;" from this line, the problem is solved, but there occurs another problem. This other problem isn't that annoying as the main issue, so it doesn't matter that much.

    What I'm trying is to use the style="width: 98%;" in all browsers except IE. By doing this, the issue is solved in Internet Explorer and other browsers are not affected by this fix.

    I've first tried to give the textarea an ID and put it in the CSS file, but that doesn't work for some reason. Something is likely overwriting it, but I can't find the problem.

    Thank you

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Inline CSS almost always overrides external CSS, so if you kept the inline rule and gave IE a conditional rule attached to an ID, it wouldn't work, no.

  • #10
    New Coder
    Join Date
    Feb 2009
    Posts
    40
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hey,

    So how will it work?

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
    <!--[if !IE]><!-->
        <style type="text/css">
    #troublesome /* replace with semantic class */ {
      width: 98%;
    }
        </style>
    <!--<![endif]-->
      </head>
      <body>
        <form action="http://example.com/" method="get">
          <table>
            <tr>
              <td>
                <textarea id="troublesome"></textarea>
              </td>
            </tr>
          </table>
        </form>
      </body>
    </html>
    This should do the trick. If you must set 100% in IE, add this code:
    Code:
    <!--[if IE]>
    <style type="text/css">
    #troublesome {
      width: 100%;
    }
    </style>
    <![endif]-->
    But I don't think you will.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •