- This topic is empty.
-
AuthorPosts
-
May 9, 2013 at 5:56 pm #44667SplitintwoMember
Hi all,
I don’t normally post code problems because after a couple hours I work them out. This has me stumped.
I’m building a layout for a website. I’m using the 960 grid system with 16 columns. The 960 boxes were slightly smaller than I wanted and I wanted a border sitting on parts of the boxes.
So I removed the 10px margin that sits either side of each container and replaced it with padding of 10pxs.
If I want a border, then I set the border on the same side to 9px’s and add a 1px border.
Slightly clumsy but it works for my design.
http://codepen.io/anon/pen/Dqjzc
The HTML is fairly simple. There’s a fixed header and bunch of containers below it.
The CSS file is huge because the first 455 lines are a 960 16 column grid. You can ignore that (I think).
The problems are line 534 downwards the classes .paddingmargin and .rightborder are identical.
However if you use .rightborder the code it knocks one of the divs down a level. Why?
(The div below is the one I replaced)
How can two identical pieces of code give different results?
(right border was originally –
.rightborder {
margin-left: 0;
margin-right: 0;
padding-left: 10px;
padding-right: 9px;
border-right: solid #6a6a6a 1px}
May 9, 2013 at 6:28 pm #134616AlenParticipantThe box model – http://learnlayout.com/box-model.html
The box-sizing – http://learnlayout.com/box-sizing.html> However if you use .rightborder the code it knocks one of the divs down a level. Why?
I’m guessing with of the element + padding + margin exceeds the width of the container. (see box-sizing above for solution)
May 9, 2013 at 7:10 pm #134622SplitintwoMemberThat’s what’s weird though. I’ve zeroed the margins in both, and replaced them with padding. I’m using exactly the same pieces of CSS but when I switch one for another one pushes it down a level.
These are the two classes I’m interchanging.
.rightborder {
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
padding-right: 10px;}
.paddingmargin {
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
padding-right: 10px;}
Surely nothing should change?
May 9, 2013 at 7:23 pm #134623AlenParticipantAre you sure you’re not inheriting from another element… that could be causing issues. Can you provide us with working example?
May 10, 2013 at 12:31 pm #134708SplitintwoMemberI put it all in the code pen.
http://codepen.io/anon/pen/Dqjzc
The classes are line 534 downwards
The place to change one for another is line 28 in the HTML.
May 10, 2013 at 1:17 pm #134711wolfcry911Participant.rightborder is listed twice in the css. The second one has the same declarations as .paddingmargin, but the first puts a 1px border on it. So there is a difference.
May 11, 2013 at 12:01 pm #134781SplitintwoMemberThanks wolf. Reminds me of when everyone else can see the last word in a wordsearch and you cannot find that shit, no matter how long you look at it.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.