I'm still using header, section and footer tags to differentiate what is what instead of using divs
I'm still using header, section and footer tags to differentiate what is what instead of using divs with some class name like every does
<I try to avoid it as much as possible as well. And if I wrap things than I try to use semantic elements mostly. But often it's the only way.
<Yup that's what I mean, that always feels much better :D
(And is better for accessibility in some cases)
(And is better for accessibility in some cases)
<Lol that's just my face 
AIt's just much more readable
AI don't understand people working with bootstrap and this kind of library
<Well... First of all, what about #
┃game-development instead of web dev?
┃game-development instead of web dev? AYou're just creating shits of divs and spans with weird class names
AIt just doesn't feel right
<Yeah I never really liked bootstrap and tailwind etc
AAnd you're just making your code heavier
AAlso you don't learn how to use CSS for real
<For everything that's not component based it's bullshit anyway. If you want to change the overall whitespace of a page or change some colors you need to rename every class name 
AYou're depending from the library but you can't do everything
AOh god
<When a project uses tailwind I just write normal CSS and google the tailwind class name for every line 
so much more complicated for writing as well. At least for me
so much more complicated for writing as well. At least for meASuch a pain
AEnough talking of (crappy) libraries
AGood night
<Good night ^^
ATest your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I@<Tim> so basically
II will provide you with the CSS for the table
I.styled-table {
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid #C2B5A8;
border-radius: 5px;
padding: 10px;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
margin-top: 10px;
text-shadow: 0 0 8px rgba(191, 239, 221, 0.3);
font-family: Courier, monospace;
font-smoothing: antialiased;
color: #C2B5A8;
line-height:20px;
}
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid #C2B5A8;
border-radius: 5px;
padding: 10px;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
margin-top: 10px;
text-shadow: 0 0 8px rgba(191, 239, 221, 0.3);
font-family: Courier, monospace;
font-smoothing: antialiased;
color: #C2B5A8;
line-height:20px;
}
<Ah nice, I will take a look at it in a second :)
Ithis is the CSS applied to the table itself
<what happens if you give the container that gets too big a max-height of e.g. 300px?
II tried doing overflow on this btw but maybe theres something up with the CSS that I'm just too dumb to realise?
Iit still goes up
Iit doesn't limit
II even tried to set the height itself to like 50px
Iit doesn't change
<wait is this element a table?
Iyes
<please share your html
Isure
<then put the table in a wrapper container
I<table class="styled-table results">
<tr>
<td><strong>IP</strong></td>
<td><strong>Country</strong></td>
<td><strong>Region</strong></td>
<td><strong>City</strong></td>
<td><strong>Coordinates</strong></td>
<td><strong>ISP</strong></td>
<td><strong>Phone</strong></td>
<td><strong>Proxy</strong></td>
<td><strong>Hosting</strong></td>
</tr>
<tbody class="results" id="results">
<!-- Lookup results will be inserted here dynamically -->
</tbody>
</table>
<tr>
<td><strong>IP</strong></td>
<td><strong>Country</strong></td>
<td><strong>Region</strong></td>
<td><strong>City</strong></td>
<td><strong>Coordinates</strong></td>
<td><strong>ISP</strong></td>
<td><strong>Phone</strong></td>
<td><strong>Proxy</strong></td>
<td><strong>Hosting</strong></td>
</tr>
<tbody class="results" id="results">
<!-- Lookup results will be inserted here dynamically -->
</tbody>
</table>
<because the table still needs to stay the same height
Itried that with a div
Iwith this class:
I.results {
max-height: 50px;
overflow-y: auto;
/* scrollbar-width: none;
-ms-overflow-style: none;
}
#results::-webkit-scrollbar {
display: none;
*/}
max-height: 50px;
overflow-y: auto;
/* scrollbar-width: none;
-ms-overflow-style: none;
}
#results::-webkit-scrollbar {
display: none;
*/}
<and?
Inothing
Iit still goes as big of a height as it wants
Ino idea whats up with that
<without the source code I can't help you much
<maybe you could provide me an html file or jsfiddle or similar where I can reproduce the problem?
Ilet me see