1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Awesome Font Icon pushing one coln text down compared with other coln text... HALP!

Discussion in 'CSS' started by fullylucky, Jul 12, 2017.

  1. #1
    I added an Font Awesome Icon to one of the text colns in a table,
    SEMrush
    however it is pushing that line of text out of level compared with other text colns, (the neighbouring columns, to the left and right are all higher compared to the address coln.

    Does anything know how to fix it?

    Attempted soln so far: I have tried to put the awesome font icon in a separate coln however this did not resolve the issue.
     

    Attached Files:

    Solved! View solution.
    fullylucky, Jul 12, 2017 IP
    SEMrush
  2. fullylucky

    fullylucky Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    adjusting the awesome font icon's size also did not solve the issue.
     
    fullylucky, Jul 12, 2017 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,505
    Likes Received:
    1,025
    Best Answers:
    19
    Trophy Points:
    400
    #3
    Did you try

    vertical-align: middle;

    or

    vertical-align: top;

    ?

    If that doesn't help, you can always try a negative margin: margin-top: -0.6em;
     
    qwikad.com, Jul 12, 2017 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,625
    Likes Received:
    719
    Best Answers:
    151
    Trophy Points:
    420
    #4
    line-height?
    margin?
    specific styling on the i-element which you've used to wrap the font-awesome icon with (which is default, you might have used a different element, of course).
    Why are you showing us a picture only? Show us the CODE, man.
     
    PoPSiCLe, Jul 12, 2017 IP
  5. fullylucky

    fullylucky Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    echo '
    <div class="container">  
        <div class="row row-centered">
    <h1>Properties List</h1>
    </div>
    
    
    ';
    //============
    echo '
    <form id="demo-form" action="" method="post" accept-charset="utf-8" class="uk-form bt-flabels js-flabels" data-parsley-validate data-parsley-errors-messages-disabled>
    <div class="uk-text-center uk-margin-top">
    <button name="submit" type="submit" class="regbtn"> Add Property </button>
    <button name="cancel" type="submit" class="regbtn"> Back </button>        
        </div>
        </form>
      
      
    <div class="row">
                            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                    <form class="form-horizontal" name="search" role="form" method="POST" onkeypress="return event.keyCode != 13;">
                                        <div class="input-group col-sm-11">
                                            <input id="name" name="name" type="text" class="form-control" placeholder="Search properties list" autocomplete="off"/>
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btnSearch">
                                                    <span class="glyphicon glyphicon-search"> </span>
                                                </button> </span>
                                        </div>
                                    </form>
                            </div>
    
                        </div>
    
                        <div class="table-responsive content-panel tablesearch">
    ';
    $pmID =$row['pmID'];
    $sql = "select * from property where pmID='$pmID' AND inactive='No' ORDER BY propertyName";
    $result = $connection->query($sql);
    if ($result->num_rows > 0) {
    echo'
                                        <table id="resultTable" class="table table-striped">
                                            <thead>
                                                <tr class="small">                                              
                                                    <th>Property Reference</th>
                                                    <th>Type</th>
                                                    <th>Address</th>
                                                    <th>Rent</th>
                                                    <th>Commission (%)</th>
                                                    <th>Owner</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                        <tbody>';
    
    // output data of each row
        $secret = 'ddddddd';
    
        while($rr = $result->fetch_assoc()) {
            $id = $rr["propertyID"];
            $hash = hash_hmac('bbbbbbb', $id, $secret);
            $ownerhash = hash_hmac('bbbbbbb', $rr["ownerID"], $secret);
          
            $address=$rr["streetNumber"]." ".$rr["streetName"].", ".$rr["suburb"].", ".$rr["countryState"]." ".$rr["postcode"];
            echo "<tr class=\"small\"><td>".$rr["propertyName"]."</td><td>".$rr["propertyType"]."</td><td><span style='font-size: 24px; line-height: 1.5em;'><i class='fa fa-map-marker' style='vertical-align: middle;' aria-hidden='true'></i></span> ";      
            if ($rr["roomNumber"] !=NULL){
    echo "Room ".$rr["roomNumber"].", ";
    }
    if ($rr["unit"] !=NULL){
    echo $rr["unit"]."/";
    }
    echo $rr["streetNumber"]." ".$rr["streetName"].", ".$rr["suburb"].", ".$rr["countryState"]." ".$rr["postcode"]."</td><td>";
    PHP:
     
    Last edited by a moderator: Jul 12, 2017
    fullylucky, Jul 12, 2017 IP
  6. fullylucky

    fullylucky Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    I think the issue isn't with the awesome font icon aligning but with the address text. it's aligned to the bottom for that column.

    how can i make it align to the middle?

    how do i get inside the echo?

    in the css i tried to add in

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td{
    vertical-align: middle!important;
    }

    still doesn't work.
     
    Last edited: Jul 13, 2017
    fullylucky, Jul 13, 2017 IP
  7. #7
    You made it's line-height bigger than the line-heights inside the other TD... specifically by setting it to 1.5em when you JUST set the font-size to 24px, it's resolving to 36px. OF COURSE you're having alignment issues. One of the whole reasons to use font-awesome or other such vector graphic alternatives is to STOP declaring things in pixels -- that's kind of the point!

    Little "trick" -- set it to something like say font-size:1.5em; with a line-height of 1.2em, then set a top and bottom margin of NEGATIVE 0.5em; Negative margins shrink the size of the element in flow, reducing how other elements react to its height. It's sneaky, but it works -- oh, and set it to inline-block or some browsers will ignore those height calculations.

    Though really, damn that markup AND that CSS... but I see the telltales of bootcrap so I guess that level of developer ineptitude is par for the course -- with the endless pointless DIV for nothing, endless pointless SPAN for nothing, endless pointless classes for nothing, static style in the markup, etc, etc... around half that HTML belongs in the trash bin.

    BUT on the flip side of the coin, it's DAMNED refreshing to see somebody using THEAD, TBODY, and TH properly -- if at all -- for a change. Though some SCOPE attributes would be nice!
     
    Last edited: Jul 13, 2017
    deathshadow, Jul 13, 2017 IP
  8. fullylucky

    fullylucky Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #8
    sorry for being rude i forgot to post back here for closure.

    i'm happy to say i have resolved the issue.

    i removed the in line style

    that is removed:

    <span style='font-size: 24px; line-height: 1.5em;'>

    instead i added a new size to font-awesome.css and mini

    (you know how you have 1x 2x 3x etc and lg i made my own.)

    .fa-lp {
    font-size: 2em;
    line-height:0.75em;
    vertical-align: top;

    everything is fine now

    see attached.
     

    Attached Files:

    fullylucky, Jul 15, 2017 IP