I have a standard 12 column bootstrap grid, with 4 columns (col-md-3) inside.
In IE7 the fourth column skips to the next line.
The problem is: each column is 25% wide, and has a padding of 10px. When calculated, the column's width = 25% of its parent + the padding.
So the padding is added outside instead of inside. Is there a way to fix this ?
Bootstrap i using the css attribute
box-sizing
And as you can see here IE7 is not supporting this attribute.
There seems to be a fallback with JavaScrip here, but I didn't test or use it, so I cant tell you how good it is.
Bootstrap 3 doesn't support IE7 due to the use of the CSS attribute 'box-sizing', however there is a workaround that's helped for me.
Check out his GitHub project (in beta) that provides IE7 support.
https://github.com/coliff/bootstrap-ie7
Happy coding :)
Related
I have this simple code with Twitter Bootstrap 3: http://jsfiddle.net/korjavin/xUJGV/3/.
(result only: http://jsfiddle.net/korjavin/xUJGV/3/embedded/result/)
I am confused that rows with lorem-lipsum text have not any vertical margin.
I can add margin-top to custom.css but connect it to all classes like col-sm-1(2 ..), col-xs-*, col-* ... looks like bad solution.
What is the best solution to add vertical margin for all Bootstrap grid classes?
The best solution is to respect Bootstrap rules on element nesting. A container, within it a row, within it some col that don't exceed 12 in total. Then, every paragraph wrapped on a <p>tag, and so on.
Basically your problem is about correctly using Bootstrap elements, not about CSS.
Check an improved version of your fiddle, also in full screen.
I'm looking into creating a set of css grid classes for webkit only browsers. Should be simillar to blueprit/bootstrap/compass, however I'd rather not use those because they rely on float positioning.
I'd like something like this:
span-1 {width:10%;display:inline-block}
span-2 {width:20%;display:inline-block}
and so on. Would there be any benefit to using display:table-cell vs inline-block for this? Or is there a better approach?
Actually display: table is really the solution you are probably looking for (because of your target browsers). It was added to browsers so people could get a grid layout without needing to use a table. You don't even need percentages (the number of columns you add will dictate the width of the children elements).
DEMO
The only real caveat comes in when you are doing mobile browsers and want a dynamic layout shift (media tag) to go from a horizontal list to a vertical list. I guess it is not too big of a deal to add you own media tags (and add a class to the wrapper)...
You probably could get display: inline-block working but make sure you use box-sizing: border-box because when you are working with percentages, even a single px off and things start wrapping..
I'm having issues with creating equal height columns on the basic Dreamweaver HTML5 3 col fixed layout. I was using jQuery equal height columns to make the column's bg colour be equal on all pages, however due to some scripts I am using on my site and incompatibility with a manual "style:height:xpx" added to the article column I would like to try and use the display:table, display:table-cell method. I have used the basic Dreamweaver 5.5 HTML5 template, and kept everything the same except removed the display:block property for aside, article etc elements. I added a container div around the 3 columns; aside, article and aside.
Everything works fine - as in the background colour continues until the end of the block, which is what I need - except the trouble is, for some reason on the aside columns it leaves a gap at the top of the columns of 13px. I have no idea why this is happening.
I have uploaded the file here: http://www.primecuts.org.uk/test.html . If I remove the <nav> part, the gap is still there, although it doesn't look as "ugly" as the bgcolor difference is not noticeable, I would like there to be no gap between the text starting and the top of the block/bottom of the header. Any help would be appreciated, I don't know what is causing this.
The problem can be fixed by
.sidebar1 { vertical-align:top; }
The gap has something to do with the padding on the .content article, in the sense that removing padding removes the gap, and the padding is influencing the position of sidebar because they are both table cells in the same table row, but I confess that's a bit of a woolly explanation, and I can't actually identify the specific CSS requirement that this relates to.
I'm currently using the Blueprint CSS framework setting my width to 910px along with the sticky footer markup by Steve Hatcher.
The problem I'm getting is that for some reason in only Internet Explorer 6 is that an extra padding/margin of 10px is being added on the right hand side of my #wrap class.
I have uploaded my test site here:
http://www.prashantraju.com/test
Here is a comparison of IE6 vs IE7.
comaparison http://www.prashantraju.com/test/ie6ie7.gif
As you can see there is no margin/padding on the right hand side (the red area) with IE7 but in IE6 there is an extra 10px.
Is there a way to fix this - or what the cause of the extra 10px is?
Thanks in advance.
From what I can get with FireBug, there is no explicitly width set to the navigation bar, what if you give it a fixed size(same as 910px)?
Edited:
Sorry, given the FireBug css output, I suspect that you are using a inherited element from screen.css from line 101: margin-right:10px;
I reckon that is the cause.
Now that the navigation bar has it own css entry in the stylesheet, maybe you can reassign the margin-right element valut back to zero to resolve this problem.
I have setup my form using CSS.. Labels float to the left and input/textareas float to the right. They align fine.
However I recently added a block with checkbox elements. For some reason, there is a margin appearing above it which I have not been able to find the solution to fix. I suspect it is a float problem but I can not figure it out. I'm generally pretty good with CSS.
(no longer viewable)
Notice the extra space above the checkbox block... Borders are on to help you understand where the divs lie.
So where is the offending CSS code?
Thank you!
Update
It appears to be fine in Safari.
I am testing on firefox 3 on mac osx .
This is because you are using a fieldset with a legend. The legend is pushing the top margin out. Legends are very difficult to style cross browser, in fact most browsers cant style them at all other than font color.
Check this link to see some research that has been done on styling legend elements (with cross browser screenshots): legend styling
I suggest you hide the legend, and include an extra label inside the fieldset for cross browser goodness.
I think its this:
.option-row input {style.css (line 562)
display:block;
float:left;
width:10%;
}
Firebug is telling me that your borders overlap. Reducing the width of that box to 8% would work, but not sure that achieves what you want?
if i'm not mistaken, your checkbox and label within the option-row class are both defined as block-level elements. try removing the display property or setting it to inline.