Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Why do most developers consider the W3C box model to be better than the box model used by Internet Explorer?
It's very frustrating developing pages that look the way you want them on Internet Explorer, but I find the W3C box model counterintuitive. For example, if margins, padding, and border were factored into the width, I could assign width values to all my columns without worrying about the number of columns, and any changes I make to their padding and margins.
With W3C's box model I have to worry about the number of columns I have, and develop something akin to a mathematical formula to calculate the correct width values when modifying margins and padding. Changing their values would be difficult, especially for complex layouts. Consider this small frame-work I wrote:
#content {
margin:0 auto 30px auto;
padding:0 30px 30px 30px;
width: 900px;
}
#content .column {
float: left;
margin:0 20px 20px 20px;
}
#content .first {
margin-left: 0;
}
#content .last {
margin-right: 0;
}
.width_1-4 {
width: 195px;
}
.width_1-3 {
width: 273px;
}
.width_1-2 {
width: 430px;
}
.width_3-4 {
width: 645px;
}
.width_1-1 {
width: 900px;
}
The values I assigned here will falter unless there are three columns, and thus margins at 0+20+20+20+20+0. It would be difficult to modify padding and margins; my entire widths would have to be recalculated. If column width incorporated padding and margins, all I would need to do is change the width and I have my layout. I'm less criticizing the box model and more hoping to understand why it's considered better as I'm finding it difficult to work with.
Am I doing this thing wrong? It just seems counterintuitive to use W3C's box model.
One word answer - -box-sizing
You choose how you want your box model to work.
Not everyone considers it to be better. To extract a quote from Quirksmode.
Personally I find W3C's box model counter-intuitive. To quote myself:
Logically, a box is measured from border to border. Take a physical box, any box. Put something in it that is distinctly smaller than the box. Ask anyone to measure the width of the box. He'll measure the distance between the sides of the box (the 'borders'). No one will think of measuring the content of the box.
Web designers who create boxes for holding content care about the visible width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content.
I agree, the border-box model makes more sense (at least, it does to me). There were disputes over the original W3C box model, leading to the definition of the box-sizing property in CSS3.
Personally, I prefer -to my occasional shame- IE's box-model. As noted by the OP it seems to make more sense to have a pre-defined width from which margin, padding and border-width are subtracted, than to have a width to which these are then added.
On the other hand, I can work with both models quite happily, all I really want is consistency between implementations, whichever implementation is chosen.
While I find that W3C gets it right most of the time, in this particular case, I have to say that IE's box model is superior.
One common issue that I often encounter is when I want to set the width to be a percentage and have a pixel padding as well. To get a div to stretch to 100% and add padding, I am forced to use two divs instead of one - Otherwise applying the 100% on a single div will actually turn out to be more than you expect after the padding is factored in. It makes it really difficult to work with fluid layouts.
It is not so much an issue of which is better or worse, but which follows the standard from an accepted organization and which not..
On the other hand of your problems would be someone who wants his text wrapped inside a 300px container, which has a distance of 10 pixels from the next one.. Now you would have to make the same calculations as your example in order to calculate the width.. it is a case of how you view the same problem..
If you always use padding, border and margin to a box, the IE-model may look better and more logical, but it's rarely the case.
Yes, the WC3 box model is a little bit more complicated, but it pays back in terms of possibilities and strict "to-the-pixel" control over your layout.
Once you make enough layouts with the box model you get accustomed to it quiet well, once you explore it's power and you'll never want to even consider the IE-bugs a better way of doing web layouts. Trust me, been there.
Related
I want the margin to be be an irregular shape that is fixed so that as I scroll up and down, the spacing of the words will automatically readjust to fit around the shape.
to start I tried making a square using this styling in CSS to make it wrap and stay fixed:
float: left;
shape-outside: square;
position: absolute;
however it seems it cannot float to wrap the text and have the position stay fixed to stop it scrolling out of view, at the same time.
without "position: absolute;" text wraps but shape and text scroll out of viewing range together. Apply it and the text no longer wraps and is behind square, which stays in its position.
if this had worked I would have just created a stack of different sized boxes that were filled transparent to create an irregular left hand margin.
I'm not sure any of this is even possible but if it is, I'm sure there's a much more effective way to do it... any solutions?
I intend to create a system with two columns of text. There will be lines that indicate connections between some paragraphs on the left with some paragraphs on the right that appear when you mouseover them. Should I be using d3.js or is that overkill for this purpose?
EDIT: to be clear, some of the paragraphs on the left may not be aligned with the ones on the right so there would be crossing diagonal lines all along the middle.
Krzysztof is correct in that you might want to consider more complex interactions in the future. If you really just need a line, though, then D3.js is definitely overkill. Several commenters have suggested CSS borders, but I don't know if that approach meets your needs. If you want to draw straight lines between paragraphs, those lines won't, presumably, always be strictly horizontal or vertical. A more flexible option would be to add an absolutely positioned <div> into the page, hiding or showing it as appropriate. The <div> can have a 1px height and a background color to simulate a line, and it can be transformed using translation and rotation to connect any two arbitrary points.
No, use CSS instead. If you provide HTML code then we can guide you with CSS. Check out CSS borders: http://www.w3schools.com/css/css_border.asp
it depends on many factors. If you need d3.js only for 'draw lines/arrows' then I think this is overkill (d3.js is bigger then jquery). This looks like some simple task with basic tools. But if this is data presentation, which in future may be more complex, and when you use d3 for other charts, it will be fine.
Edit: because OP edit:
Look at this in semantic way. If this is data presentation then yes, If this is graphic effect then no.
No. D3 = "Data-Driven Documents". D3 uses SVG, and adding an SVG into your page just to draw a line is an absolute overkill. As a rule, you should take the simplest approach, hence a CSS border should do the job
border-bottom: 2px solid red;
for example.
I'm working on a visualisation involving stacked histogram with really thin bars.
The problem is that white background introduces unpleasant visual vibration and make bars somewhat hard to interpret:
http://i.stack.imgur.com/GN0XD.png
What I'm looking for is a way to set a specific colour for chart background. I've tried to set it for SVG element like so:
svg {
background-color: #ccc;
}
But (obviously) it doesn't work properly:
http://i.stack.imgur.com/ctbYo.png
How do I set a background colour so that it'll be exactly the same shape as a chart?
I managed to come to this quick-and-dirty solution. Just adding a one pixel pseudo-shadow to the right of each bar:
rect {
-webkit-svg-shadow: 1px 0px #ccc;
}
Produces this:
http://i.stack.imgur.com/xSVOD.png
How is the chart being instantiated? by using svg { background-color: #ccc;} you are setting the background color of all svg elements to #ccc (except where over-ridden), so if your chart is a child of another svg element with some margins it would explain why the alignment is no good.
One strategy to go about fixing may be to use your browser's debugging abilities (ctrl+shift+i to bring up 'developer tools' in chrome) to take a look at the DOM elements and try to narrow down which ones cover which areas of the graph vs the areas of the graph plus the margins on the bottom/left. not sure about other browsers but chrome is useful in that if you hover over an element in the html document it will 'highlight' that element in the browser. This might help you narrow down which objects specifically need to be stylized.
I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden. But it will not work on mobile devices such as iPhone and iPad.
So, I tried to add min-width because it will help to get rid of empty space. But I can't put min-width on full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:
full.css
#wrapper {
width: 1000px;
margin: 0 auto;
}
responsive.css (less than 1000px)
#wrapper {
width: 100%;
margin: 0;
}
I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?
Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):
body{
overflow-x:hidden;
}
Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.
Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.
So if you are building liquid elements inside a div you would do it like this:
#liquidelement {
width:96%;
padding:0 2%;
}
You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.
Often times it's a matter of a single element which can cause the page to get the horizontal scrollbar. That can be a pain, but you can easily find out the offending element by this simple css trick
* {border:1px solid red}
You can also add the following properties if the element is hidden.
opacity: 1 ; visibility: visible;
Demo :https://codepen.io/i_abhi/pen/eYzpBjr
2020
If any of you using Boostrap and came across this question then here's the answer.
for Bootstrap Users
Wrap your .row with .container or .container-fluid and it will solve the issue.
Referring to your issue, the code appears to be correct. However, some elements inside might also affect the exact width and overflow your boundary. Might check all inside elements as well. You can use Firebug or Chrome Inspect Element.
No more than three steps are required here:
Scroll the horizontal bar to the right where you can see the extra empty padding.
Open an Inspect Element
This is done by holding ctrl + shift then pressing i
Scroll over all your elements, the element with the extra padding should protrude your pages content into that empty space created.
You can Use
#wrapper {
max-width:100%
width:100vw;
}
it work fine with me.
this is an old question and I know you found your answer
but I say this because I didn't see this anywhere else. maybe this help someone else.
if you use min-height in your CSS code, this causes a horizontal or maybe vertical useless scroll bar.
just delete it if it isn't important
this is my first question on stackoverflow after doing a lot of research without the appropriate success :-(.
I'm struggling with the task to do a three-column-layout with various amount of content and thereby differing height for each columns content. But the columns should be of same height, so that their background-color reaches down to the bottom. So, I found examples like this
How to make rounded corners on equal height columns
and of course this one
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
But they don't do the trick, as they use overflow:hidden and do a fake height pretty much longer than the page would ever be. So of course, the background-color of each column goes down to the bottom and further. That's fine, but not enough, as I do have to shape the content element's background with rounded corners. It should look like the image on following adress:
http://www.addorange.de/uploads/3columns_rounded_corners.jpg (sorry, I'm not allowed to post images yet :-()
Maybe anybody of you encountered a similar challenge to fix this by pure css.
Thank you,
Christian
Two solutions:
You can use display: table-cell for your three columns
Resize them with javascript