Author Topic: I hate CSS  (Read 814 times)

0 Members and 1 Guest are viewing this topic.

Offline Archibald

  • Full Member
  • ****
  • Posts: 251
I hate CSS
« on: April 26, 2017, 06:17:01 PM »
I've been trying to code a web page instead of using WebPlus but have come across numerous problems with getting the layout to my liking.

I attach a very simple file that demonstrates the sort of issues I've come up against.  It just draws two tabs for a navigation bar.  Viewing the page in a browser shows that the text does not fall within the area of each tab although the text paragraph's <p> element is within the tab's <div> element and there's plenty of height available for the font size.  Specifying padding for the <div> doesn't help.

Actually I was more concerned about the unwanted gap 4 pixels wide between the tabs as I was very short of width available on the page I'm coding.

I am not after support to solve these issues as I now know how to solve them.  With my limited knowledge and experience of CSS, the way to avoid the 4 pixel gap was surprising.

Anyway, I've decided I really hate CSS.
 

Offline Mick

  • Administrator
  • Immortal
  • *****
  • Posts: Overload!!
  • Gender: Male
  • Board Administrator
    • Live WebPlus Support
Re: I hate CSS
« Reply #1 on: April 26, 2017, 07:45:38 PM »
Live 1 to 1 WebPlus Support - [ninj] http://www.webplus-support.co.uk  [ninj]
 

Offline clitheroe kid

  • Full Member
  • ****
  • Posts: 146
  • Gender: Male
  • Board Member
Re: I hate CSS
« Reply #2 on: April 27, 2017, 07:13:39 PM »
Hi Archibald,

You could add some padding: -

Code: [Select]
.studioTab {display:inline-block; width:150px; height:25px; background-color:red; border-radius:15px 15px 0px 0px; padding-bottom: 15px;}
Edit: Did you use
Code: [Select]
float:left; to close the gap and perhaps
Code: [Select]
margin-right: 1px; to give a small space?

Joe
Some people think that I have Attention Deficit Disorder. They just dont understand that........ Hey! Look a chicken!
 

Offline Archibald

  • Full Member
  • ****
  • Posts: 251
Re: I hate CSS
« Reply #3 on: April 27, 2017, 09:23:49 PM »
Hi Joe,

Adding padding-bottom increases the height of the tab so its height is no longer the wanted and specified 25 pixels.  Isn't that the same as changing "height:25px" to "height:40px"?

Adding "margin:0px" to the CSS for the text <p> elements forces the text to go inside the <div> element.  I would have expected zero margin to have been the default without needing to specify it.  (Actually it would look better with a few pixels top margin)

The surprising solution to the unwanted gap between the tabs is to put the HTML for both tabs on the same line of code.  A more amusing way to sort out the issue is to insert an HTML comment as shown in the attached file. Actually the tabs look better with 1 pixel gap, achieved by adding "margin-right-1px" to the <div> elements. I'm wondering whether to use the newish CSS3 flexible boxes for the tabs but I've not tried using flexible boxes yet: I need to do some more investigation but the conventional inline-block or floating tabs are good enough.
« Last Edit: April 28, 2017, 01:01:25 AM by Archibald »
 

Offline Alfred

  • Administrator
  • Immortal
  • *****
  • Posts: Overload!!
  • Gender: Male
  • Board Administrator
Re: I hate CSS
« Reply #4 on: April 27, 2017, 11:57:51 PM »
The surprising solution to the unwanted gap between the tabs is to put the HTML for both tabs on the same line of code.  A more amusing way to sort out the issue is to insert an HTML comment as shown in the attached file.
I think there may be other ways, such as setting the line height to zero or simply removing the "inline-block" style, but I haven't tested to see whether either of these has unwanted side-effects.
La perfection est atteinte non quand il ne reste rien à ajouter, mais quand il ne reste rien à enlever.
(Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away.)
- Antoine de Saint-Exupéry (1900-1944)
 

Offline Martin Taylor

  • Support
  • Senior Member
  • ***
  • Posts: 71
  • Board Member
Re: I hate CSS
« Reply #5 on: April 28, 2017, 11:53:47 PM »
I would have expected zero margin to have been the default without needing to specify it.

Ah, but the browsers all apply default CSS to page elements.  Chrome (at least) specifies 1em margin above and below a paragraph.  So you do need to override the browser's settings.  You often see some sort of "reset.css" being used to completely clear all the browser defaults.

By the way, one much-used way to avoid the space between those inline block elements is to apply a negative margin.
 
The following users thanked this post: Mick, Alfred

Offline Archibald

  • Full Member
  • ****
  • Posts: 251
Re: I hate CSS
« Reply #6 on: April 29, 2017, 11:15:39 AM »
Hi Martin,

The attached HTML file has three <div> elements. A browser leaves a gap between the second and third element due to the paragraph <p> element within the third <div> element. That doesn't make any sense to me but I guess it's like that for historical reasons.
 

Offline Martin Taylor

  • Support
  • Senior Member
  • ***
  • Posts: 71
  • Board Member
Re: I hate CSS
« Reply #7 on: April 29, 2017, 08:30:16 PM »
The attached HTML file has three <div> elements. A browser leaves a gap between the second and third element due to the paragraph <p> element within the third <div> element. That doesn't make any sense to me but I guess it's like that for historical reasons.

Yes, that does seem odd at first, but it's because the browser is applying a top margin to the <p> element, which pushes it away from the second <div>.  Intuitively, you'd expect that the paragraph's margin would be inside that third <div>.

So one answer is to apply a zero margin to all <p> elements as a CSS reset, and do away with the browser defaults.

Code: [Select]
p {margin: 0px;}
 

Offline Archibald

  • Full Member
  • ****
  • Posts: 251
Re: I hate CSS
« Reply #8 on: April 30, 2017, 09:13:03 AM »
Thanks Martin.  I've only come across that issue once so far but I was thinking that I might as well set all <p> elements to zero margin initially.
 

Offline Martin Taylor

  • Support
  • Senior Member
  • ***
  • Posts: 71
  • Board Member
Re: I hate CSS
« Reply #9 on: April 30, 2017, 11:22:22 AM »
It's a feature of "collapsing margins".  See https://css-tricks.com/what-you-should-know-about-collapsing-margins/ and other such.  Essentially, when two elements share their top edge (as in this case), the larger of the two margins is taken as the one to apply to both.  It does make sense in most circumstances, but can lead to apparently odd results if it's not taken into account.
 
The following users thanked this post: Alfred

Offline Archibald

  • Full Member
  • ****
  • Posts: 251
Re: I hate CSS
« Reply #10 on: April 30, 2017, 04:37:41 PM »
Martin, I would say it's due to the margin of the child <p> paragraph element extending outside its parent <div> element. To me that makes no sense at all and is not something that you would expect to happen; even less sense when you realise that one of the following resolves the issue:
  • apply a border to the <div>, even a yellow border so it's not visible;
  • setting <div> padding to 1px;
  • use overflow:hidden or overflow:auto.
I expect it's like that for historical reasons but it would make much more sense for the paragraph's margins to always fall within its parent <div> whether or not the <div> has a border.
 

Offline Martin Taylor

  • Support
  • Senior Member
  • ***
  • Posts: 71
  • Board Member
Re: I hate CSS
« Reply #11 on: April 30, 2017, 11:41:31 PM »
Martin, I would say it's due to the margin of the child <p> paragraph element extending outside its parent <div> element.
Although it looks like that, what's happened is that the two elements' top edge is at the same vertical position.  In that case the margin applied is the greater of the two, which in this case is the 1em applied by the browser for the paragraph.  So the <div> and <p> both end up with a 1em margin to separate them from the adjacent (previous) element.

Quote
To me that makes no sense at all ...
:) It is logical, even if it isn't what you might expect.

Quote
... and is not something that you would expect to happen; even less sense when you realise that one of the following resolves the issue:
  • apply a border to the <div>, even a yellow border so it's not visible;
  • setting <div> padding to 1px;
  • use overflow:hidden or overflow:auto.

Yep.  Applying a border or padding to the <div> means that the <p> and <div> no longer share their top edge, so the "margin collapse" rules no longer apply, and each element's margin is applied separately.

The "overflow" trick does seem a little quirky, agreed.

Another helpful article on this subject: https://www.sitepoint.com/web-foundations/collapsing-margins/
 

Offline Archibald

  • Full Member
  • ****
  • Posts: 251
Re: I hate CSS
« Reply #12 on: May 01, 2017, 09:50:35 AM »
All I'm saying is that one would expect the paragraph margin to fall within the area of the <div> element whether or not the <div> element has a border. Collapsing margins would then be irrelevant.  I wouldn't expect the position of the <div> to depend on what's inside it.