Thread: CSS woes

    #1
  1. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,046
    Rep Power
    423

    CSS woes


    Hi everyone
    I'm sorry to post here but I'm useless with CSS!

    I have a little user dialogue / confirmation box which I've managed to animate down from the top of the viewport to a desired position on the page but I can't seem to get the positioning of the "close" X icon correct ... well, actually, that's not quite right!

    If you view it in IE or Chrome, the icon's in the wrong place, when viewed in Firefox, it's in the right place (see the attached image).

    The HTML for the dialogue box is here :

    Code:
    <div id="usernote" style="top: 50px; opacity: 1; background-color: rgb(255, 255, 255);">
     <img class="img_right" align="absmiddle" src="iconpack/cancel.png" valign="absmiddle" id="cancel_icon">
     <div id="usernote_52d9548e281cc">
      <table width="100%" cellpadding="5px" cellspacing="5px" class="tick">
        <tbody>
          <tr>
            <td width="5%" valign="top"><img src="iconpack/tick.png" border="0" align="middle"></td>
            <td valign="top">Log in successful</td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
    My (relevant) CSS is:
    Code:
    .tick		{color:green; 	font-size:9pt; font-weight:bold; }
    table.tick {
    	background-color: #ACF2AE;
    	color: black;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	border-radius: 5px;
    }
    .img_right {
    	position: relative;
    	float: right;
    	padding: 5px;
    	top: 0;
    	right: 0;
    }
    
    #usernote {
    	position: fixed;
    	left: 30%; 
    	width: 40%;
    	color: black;
    	padding: 5px;
    	overflow: hidden;
    
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    	filter: alpha(opacity=0);
    	-moz-opacity: 0.0;
    	-khtml-opacity: 0.0;
    	opacity: 0.0;
    
    	top: -500px;
    	z-index: 1000;
    	min-height: 30px;
    	display: table-cell; 
    	vertical-align: middle;
    }
    Can anyone help me find where am I going wrong please?
    (ps, The usernote top is set off-screen as there's an animation that drops it down into view)
    Attached Images
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    That's some ugly HTML and CSS friend lol.

    I would suggest removing the inline styling and adding that to your stylesheet. Once you do that you will see you have conflicting properties. But what you should do is remove the float from the "img_right" and change the position to absolute. And in the tag itself, remove both those align attributes. That should be enough to make them act the same within all the browsers and give you a great spot to work from.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Location
    Burb of Detroit, Michigan
    Posts
    81
    Rep Power
    76
    Originally Posted by slime
    That's some ugly HTML and CSS friend lol.

    I would suggest removing the inline styling and adding that to your stylesheet. Once you do that you will see you have conflicting properties. But what you should do is remove the float from the "img_right" and change the position to absolute. And in the tag itself, remove both those align attributes. That should be enough to make them act the same within all the browsers and give you a great spot to work from.
    I'm taking a guess, but I would imagine the inline styling is caused by some kind of JavaScript and thus can't be removed.

    As for the OP question.

    Code:
    .frame {
        position: relative; // The div or what have you that is be targeted for control.
    }
    
    .controls {
       position: absolute; // The Close X button?
       top: 0;
       z-index: 1000; // I always do this to ensure the control isn't hidden
    }
    I know this isn't your code, I am just trying to convey the coding concept.

    Just as long as absolute is directly below of the relative position in the CSS everything should be OK.
    Last edited by Strider64; January 19th, 2014 at 05:37 AM.
    PDO Registration and Login tutorial @ http://www.jrpepp.com/displayPage.php?page=193
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    Strider, you're probably right about the inline being JS generated, but even then that's still bad practice. That should be avoided at all costs.

    z-index won't have much impact on the close button because the parent container has an overflow set to hidden, so you wouldn't see anything anyways had it extended past the parent.

    Also, position:absolute and position:relative placement within the CSS file have no affect on the behavior. The only thing you need to be aware of is you can't absolutely position an element until its parent has its position set.

    So you have your parent at whatever size, with its position set to relative, basically meaning where it normally appears on its own, and then set the close buttons to be positioned absolutely in the top right corner of this parent. And then you can always micro-move the buttons using the directional properties.
  8. #5
  9. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,046
    Rep Power
    423
    Gents
    Firstly, I really appreciate the help; I'm more of a back-end developer and so the CSS is my first real attempt at making my code look nice on-screen!

    The HTML is actually generated via PHP and what I copy/pasted was what Chrome puked out (I only used that because otherwise, the PHP wouldn't have made much sense unless you ran it yourself; sorry if it borked things up, I can provide the source code if that'd help (although I doubt it).

    (The z-index was to ensure that it showed on top of everything else on the page)

    I'm not really sure I understand the suggestions (sorry, like I said, am a CSS newbie) but I shall have another read later on and when I have the code in front of me, it might click.

    So, can anyone answer me the question of why it shows in the right place in one of the three browsers?
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    You should always have your CSS separated from your HTML. I recommend correcting your PHP files so they stop doing that, and put the CSS in the correct place.

    Also, just because it looks correct in one browser doesn't mean your code is correct. In fact, because it only works in 1/3, that should give you a clear indication that your CSS is wrong to begin with.

    Yours needs to read like this:

    Code:
    .img_right {
    	position: absolute;
    	padding: 5px;
    	top: 0;
    	right: 0;}
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Location
    Burb of Detroit, Michigan
    Posts
    81
    Rep Power
    76
    Originally Posted by slime
    Strider, you're probably right about the inline being JS generated, but even then that's still bad practice. That should be avoided at all costs.

    Also, position:absolute and position:relative placement within the CSS file have no affect on the behavior. The only thing you need to be aware of is you can't absolutely position an element until its parent has its position set.
    The z-index on the button will be helpful in seeing it, once you get the position set straight and I know from experience that setting the z-index helps for I spent many of times figure on why it wasn't working when in fact it was only to be hidden.
    Once you get the absolute position set to relative then why hinder yourself?

    As for absolute position.

    What you said is True, but it's easier to keep track of what is being effected by having in order and I have seen a lot of newbies get messed up and frazzled if not keep in order in the CSS. Specially if you have a very long style sheet or multiple style sheets..

    An the absolute position is set to what is relative to the page. Hence the meaning of absolute and relative.
    Last edited by Strider64; January 19th, 2014 at 03:07 PM.
    PDO Registration and Login tutorial @ http://www.jrpepp.com/displayPage.php?page=193
  14. #8
  15. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,046
    Rep Power
    423
    Originally Posted by slime
    You should always have your CSS separated from your HTML. I recommend correcting your PHP files so they stop doing that, and put the CSS in the correct place.

    Also, just because it looks correct in one browser doesn't mean your code is correct. In fact, because it only works in 1/3, that should give you a clear indication that your CSS is wrong to begin with.

    Yours needs to read like this:

    Code:
    .img_right {
    	position: absolute;
    	padding: 5px;
    	top: 0;
    	right: 0;}
    Hi slime
    My CSS _IS_ separate from my HTML; like I said, I did a copy/paste from Chrome > View source which seems to have added a bunch of stuff; for information/reference the actual PHP is:

    PHP Code:
        // Display any messages to the user
        
    if ( $_SESSION['usernote'] ) { 
            echo 
    "<div id='usernote'>";
                
    do_icon "right""cancel" );
                
    usernote $_SESSION['usernote']['type'], $_SESSION['usernote']['content']);
            echo 
    "</div>";
            unset ( 
    $_SESSION['usernote'] );
        } 
    ... so you can see there's no in-line styling!
    I'm sorry if that caused any confusion, I obviously didn't pay attention when I pasted it in here originally.
    Anyway, I will certainly try the suggestions on Monday when I am able to and I'll report back.
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  16. #9
  17. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,046
    Rep Power
    423
    Okay, so I made the change to the CSS for img_right and it now seems to work OK (ish) in 2 out of the three browsers.
    A new screenshot's attached to show the current result.
    Attached Images
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    36
    Rep Power
    1
    You need to change the value of the display property on your #usernote. Change it to block and it will work.


    Code:
    #usernote {
    
       display: block;
    
    }

IMN logo majestic logo threadwatch logo seochat tools logo