CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: UL Padding Issue with CSS  (Read 67 times)

GrumpyYoungMan

  • Full Member
  • ***
  • Posts: 201
  • Karma: +1/-0
    • GrumpyYoungMan
UL Padding Issue with CSS
« on: 16 Jul 2020, 04:07:09 am »
Strange Issue:
Code: [Select]
ul { padding: 0; }

/* PAGINATION CSS */
.pagination ul {

list-style-position: inside;
list-style-type: none;
margin: 0;
padding: 0;
   
}

.pagination li {

display: inline;

}

.pagination li a, .pagination li span {

text-decoration: none;
color: inherit;
padding: 0.5em 0.25em;
border: 1px solid black;
margin: 0.25em;

}

.pagination li a:hover, .pagination li a:focus {

background: #DEF;

}

.pagination li span {

background:orange;

}

.pagination li:first-child a {

border-radius:0.75em 0 0 0.75em;

}

.pagination li:last-child a {

border-radius:0 0.75em 0.75em 0;

}

Why is the default UL style over ruling the padding from the .pagination UL css style?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Coder - not sure that is the right thing to say... but trying to learn...

coothead

  • Jr. Member
  • **
  • Posts: 73
  • Karma: +7/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: UL Padding Issue with CSS
« Reply #1 on: 16 Jul 2020, 04:23:13 am »
Hi there GrumpyYoungMan

if you are referring to the padding here...
Code: [Select]
.pagination li a, .pagination li span {
...
...
padding: 0.5em 0.25em;
...
...
 }
..then you must understand that inline-elements cannot receive padding values.   :o

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Full Member
  • ***
  • Posts: 201
  • Karma: +1/-0
    • GrumpyYoungMan
Re: UL Padding Issue with CSS
« Reply #2 on: 16 Jul 2020, 04:48:01 am »
Thanks CootHead that makes sense, but if you click here I refer to the padding on the left before the "HTML" in the horizontal list
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Coder - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Full Member
  • ***
  • Posts: 201
  • Karma: +1/-0
    • GrumpyYoungMan
Re: UL Padding Issue with CSS
« Reply #3 on: 16 Jul 2020, 04:50:05 am »
Also what would be the best way to add padding that? Please? Sorry for all the questions...
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Coder - not sure that is the right thing to say... but trying to learn...

coothead

  • Jr. Member
  • **
  • Posts: 73
  • Karma: +7/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: UL Padding Issue with CSS
« Reply #4 on: 16 Jul 2020, 05:27:26 am »
Hi there GrumpyYoungMan,

  • the ul/ol elements have default padding-left values.
  • set the inline elements to display: block or to
    display: inline-block, depending upon your requirements.

coothead
~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Sr. Member
  • *****
  • Posts: 379
  • Karma: +51/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: UL Padding Issue with CSS
« Reply #5 on: 16 Jul 2020, 07:06:19 am »
1) depending on BROWSER UL OR LI can have a default padding OR margin. Remember what things look like is none of HTML's flipping busines, so before CSS was a thing and in the early days of CSS it was up to the UA vendor (like browser makers) to determine how to apply that.

It's why we use resets.

2) since you set zero on both UL declarations, what difference are you even referring to. That said the leading class should override the global classless.

3) Don't try to inline-block or pad LI. Set inline-block or block on the ANCHOR instead and either pad or margin that.

Trying to style display:inline or inline-block LI can have strange behaviors in IE, Edge, and even Firefox due to legacy "compatibility" issues, compared to webkit and blink browsers (chrome-likes and Safari) which prefer to more strictly follow the specification.

if list-style-type is none, there's no reason to declare list-style-position. In either case you'd be better off just using the short-hand list-style instead.

And again, if you were using a reset you wouldn't need to be dicking around with any of those explicit zero margin/padding late-game like that.

These days I always start my screen media stylesheet with:

Code: [Select]
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
margin:0;
padding:0;
}

img, fieldset {
border:none;
}

* {
box-sizing:border-box;
}

hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}

@media (max-width:480px) {
/* Fix for pre "viewport <meta>" mobile browsers */
* {
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}

html, body {
height:100%;
}

As it sets up the fastest and easiest environment to work in.

Under that your could could simply be:

Code: [Select]
.pagination ul {
list-style:none;
}

.pagination li {
display:inline;
}

.pagination li a,
.pagination li span {
display:inline-block;
padding:0.5em 0.25em;
margin:0.25em;
text-decoration:none;
color:inherit;
border:1px solid black;
}

.pagination li a:focus,
.pagination li a:hover {
background:#DEF;
}

.pagination li span {
background:orange;
}

.pagination li:first-child a {
border-radius:0.75em 0 0 0.75em;
}

.pagination li:last-child a {
border-radius:0 0.75em 0.75em 0;
}

Side note, lose the comment for nothing. REALLY? .pagination handles the page pagination? Whooddathunkit!?! That's part of the whole reason to say what things ARE and not what you want them to look like with your tags, classes, and ID's, so you don't need pointless redundant comments.
Sorrow hides well in your shell. A fellow man with hurt to spare.
Dear one, here I am to share the fear. An act of kindness, without an amen.
Come in, the fire's warm. Burn the rope and dance some more.

 

Advertisement