Can't understand IE behavior

[lcollong]

Hi,

My site is working correctly using Firefox 26.0 (see screenshot "FF"). Under IE (11), the fields are going on the next line. They don't stay "in line". See screenshot "IE"). I've verified : I'm not in compatibility mode. Using F12, it seems that a css "float:left" is added inline. Can't understand where neither what is wrong. here is the relevant custom.css.php. The template is the default one :


#form_24 .leftCol {
width: 250px;
}

#form_24 .fabrikLabel {
float:right;
}

 

[troester]

Can't understand IE behavior

Who can?

Do you have a link?

 

[lcollong]

lol ! It's a private application under production (sic !). I'll try to setup a testdrive on a reachable server.Thanks

 

[troester]

You can try

#form_24 .leftCol .fabrikLabel {
float:right;
}

or
#form_24 .leftCol label.fabrikLabel {
float:right;
}

 

[lcollong]

I tried both syntax. The first one does not work at all. the second one is better. The best I can achieve is with this one (see screenshots) :

#form_24 .leftCol {
width:250px;
}

#form_24 label.fabrikLabel {
float:right;
}

Not correct with ie and strange behavior of FF with the last fields (radio buttons).

 

[rob]

We'd need to see the site, let us know when you have it set up
CSS is just impossible to debug without seeing the page.

 

[lcollong]

I've setup a testdrive in "mysites". You'll have to go to the front, connect using "rob/fabrik" and hit the menu item "nouveau b?n?ficiaire". This form is showing as I expect in ff but in IE the values are before the labels (the best I can achieve :-( )

 

[rob]

well if you float the labels to the right they are going to appear to the right of the inputs.
I think what you want is to right-align the text inside the labels?

Something like this:

#form_24 .leftCol {
    width: 250px;
    float: left;
    text-align: right;
}

 

[lcollong]

well... it seems, I'll definitively have to drill down the css rules to improve my skills ! It works for everything except the radio buttons at the bottom (see screenshot). Using dev tools, I see a clear:left instruction that has to be set to "none" to recover the right setup. I've tried several syntax from the wiki examples and variations but I can't find the right one for the custom.css. May I ?

 

[rob]

.radiobutton li {
clear: none;
}

or if that doesn't work:

.radiobutton li {
clear: none !important;
}

 

[lcollong]

!important was important... I've also missed the .radiobutton swith as I can't see it using the IE developer tools. Still some progress to do.. :-(

Thanks.

 

[cheesegrits]

Yup, CSS can be frustrating, especially when you start seeing different results on different browsers ... and of course IE is usually the main culprit for doing things differently.

But if you persevere, and frequently ask that nice Mr Google the right questions, you can usually achieve what you need.

-- hugh

 

[lcollong]

Merci pour les encouragements Hugh !

 

[lcollong]

Hi,

I've to reopen this thread as I can't make it working for both IE and Chrome !
With the following custom.css, it works in FF and IE. But in Chrome the label (leftcol) are hidden ! If I remove the "float: left" line, the labels appears back in Chrome, it's still ok with Firefox but the display is messed up in IE as per the my first post....

css drive me crazy !

#form_24 .leftCol {
    width: 250px;
    float: left;
    text-align: right;
}
 
.radiobutton li {
    clear: none !important;
}

 

[rob]

seems the menu "nouveau b?n?ficiaire" is no longer visible when i log in - has the form name changed?

 

[lcollong]

Hi Rob,

You have to connect as "Referent" to see the menu : rob/fabrik

 

[rob]

seems you would need to make the float:left apply to only IE.

 

[lcollong]

I'll have to make a custom template with a conditional comment ?

Meanwhile, I found this setup which seems to be ok for IE / FF and acceptable for Chrome (DisplayBox) :

#form_24 .leftCol {
width: 250px;
float: left;
text-align: right;
}

.radiobutton li {
clear: none !important;
}

.displayBox {
display: block;
}

 

[cheesegrits]

I think you could do this in the custom CSS file, assuming you are using the usual custom_css.php. Those files are run through PHP, and generated on the fly (so we can create the various form and list specific selectors from the form / list ID's being rendered).

So you should be able to use something like PHP's built in get_browser() function to determine the browser name and major version (if necessary), and output browser specific CSS as required. Like ...

<?php
$browser = get_browser();
if ($browser->browser == 'IE') {
  echo "
// your IE specific CSS here
  ";
}
?>

If you google around for variations on "php get_browser ie", you should be able to find plenty of code snippets which will show you how to work out browser names, major versions, and output different 'stuff' accordingly. Just remember you'll have to wrap any PHP code you insert into the custom CSS files with PHP tags (usual PHP / HTML mixing). So if you have a lot of CSS to output rather than just a one line attribute, you can close the tag and then have another PHP tag to close the 'if' out ...

<?php
$browser = get_browser();
if ($browser->browser == 'IE') {
?>
.foo {
   big_long_class_here: "bar";
   with_lots_of_attrs: 123;
}
<?php
}
?>

-- hugh

 

[lcollong]

I'll test that today. Thanks for explanation.