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.

How to remove extra white space above text

Discussion in 'HTML & Website Design' started by Soupi, Aug 4, 2020.

0
  1. #1
    Hello I am trying to get this text "*SCRC Reading Room is closed for the Fall 2020 Semester" closer to "Bird Library: View Service desk hours" How would I do that given this code.

    
<h3 class="hours-h3">Bird Library</h3>
<script src="//api3.libcal.com/js/hours_grid.js?002"></script>
<div id="s-lc-whw1503"></div>
<script>
$(function(){
var week1503 = new $.LibCalWeeklyGrid( $("#s-lc-whw1503"), { iid: 3186, lid: 1503,  weeks: 8 });
}); </script>
*SCRC Reading Room is closed for the Fall 2020 Semester
    Code (markup):
    image can be found on https://ibb.co/W5NDRk4
     
    Soupi, Aug 4, 2020 IP
  2. olmix

    olmix Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    11
    #2
    Hello,
    We dont have your CSS code but i think your <div id="s-lc-whw1503"></div> must have margin-bottom or padding-bottom.
    You need to remove it.
    If you have access to the CSS try : 

    #s-lc-whw1503 {
padding-bottom:0;
margin-bottom:0;
}
    Code (markup):
     
    olmix, Aug 4, 2020 IP
  3. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    I added this but no luck
    
<h3 class="hours-h3">Bird Library</h3>
<script src="//api3.libcal.com/js/hours_grid.js?002"></script> 
<div id="s-lc-whw1503"></div> 
<script>
$(function(){ 
var week1503 = new $.LibCalWeeklyGrid( $("#s-lc-whw1503"), { iid: 3186, lid: 1503,  weeks: 8 }); 
}); </script>
<div style="padding-bottom:0; margin-bottom:0;">*SCRC Reading Room is closed for the Fall 2020 Semester</div>
    Code (markup):
    you can find it on https://library.syr.edu/hours/index.php, if you scroll down to BIRD LIBRARY
     
    Soupi, Aug 4, 2020 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #4
    You'll get a big improvement just by removing the <br>

    upload_2020-8-5_10-12-36.png
     
    sarahk, Aug 4, 2020 IP
  5. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #5
    Thank you for that.
    But the space I want to get rid of is that i scribbled in red.
     

    Attached Files:

    Soupi, Aug 4, 2020 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #6
    gotcha, here's your culprit

    upload_2020-8-5_11-56-55.png

    that's some really nasty page layout you've got going on there. Tables are for showing data not providing layout.

    upload_2020-8-5_11-57-58.png
     
    sarahk, Aug 4, 2020 IP
  7. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #7
    Thank you i appreciate it, i dont think i have access to the css, is there any inline css u can provide that will fix it?
    like this
    <div style="padding-bottom:0; margin-bottom:0;">*SCRC Reading Room is closed for the Fall 2020 Semester</div>
     
    Soupi, Aug 4, 2020 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #8
    You want to add the css to the table above it, inline css will overrule the css file.

    Something like this will do the trick

    upload_2020-8-5_15-57-14.png

    To get those screen shots I'm using the developer tools in my browser - in this instance chrome, right-clicking, and choosing inspect.

    It lets me click or hover over parts of the screen.

    In this case when I can see that the table has a beige bar at the bottom that represents the margin for that element. Doing the same for the *SCRC text doesn't show a beige bar telling me that there isn't a margin set for that element.

    Once I know where the white space is coming from I can start to mess about making changes to it, and once I know what needs to be changed and where I can take those changes to my script and set it live.

    upload_2020-8-5_16-4-12.png






    upload_2020-8-5_16-5-59.png
     
    Last edited: Aug 4, 2020
    sarahk, Aug 4, 2020 IP
  9. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #9
    Thank you that worked, and to remove the spacing here which is located in the beginning, would i do the same?
     

    Attached Files:

    Soupi, Aug 5, 2020 IP
  10. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #10
    Have you played around with the inspect tools?
     
    sarahk, Aug 5, 2020 IP
  11. Soupi

    Soupi Greenhorn

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #11
    Yes I tried but wasnt able to remove the extra space after the first instance of the *SCRC text
     
    Soupi, Aug 5, 2020 IP
  12. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #12
    You've got 2 things contributing to the spacing

    .page-row-block (local.css, line 2478) has padding-bottom: 30px
    hr has a margin top and bottom of 20px

    upload_2020-8-6_14-53-55.png
    upload_2020-8-6_14-53-19.png

    Once you've got all this nutted out take a look at it on mobile - the table headers need some TLC

    upload_2020-8-6_14-56-17.png
     

    Attached Files:

    sarahk, Aug 5, 2020 IP
  13. Infatica

    Infatica Peon

    Messages:
    4
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    1
    #13 
    second <div class="page-row-block"> in "<article class="level-two col-lg-8 col-md-8 col-sm-8 col-xs-12">"
replace to <div class="page-row-block" style="padding-bottom:0;">
    HTML:
    but it's better to never use inline styles...
     
    Infatica, Aug 6, 2020 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    It's even better not to piss all over the markup with incorrect to nonexistent semantics and presentational classes that undo 23 years of progress... but when the mind-numbingly dumbass idiotic trash that is bootcrap gets involved, good practices go right out the window.
     
    deathshadow, Aug 7, 2020 IP