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 6 years ago.
Improve this question
I've seen many people suggesting setting *{ margin:0;padding:0;}. It does prevent lots of unexpected margin/padding on the page.
But if it's first thing we ought to implement every time we create a CSS file, why do the browsers bother to set default element margin/padding other than 0?
I guess giving a default margin makes sense to elements like <p> to keep the paragraph spacing. But again, if we are suggested to put the * reset every time, the browsers' default settings don't matter anyway, right?
There really is no exact answer to your question. But, the most logical reason to put a preset margin and padding is to most likely make webpages automatically more appealing to the user. If you see a website with text right up against the side of a page, it starts to look a little stretched and sketchy. So, to counter this, they set a margin and padding.
Bryce
A <h1> in example unfortunately has a browser-specific margins (see specific to the browsers). Setting margin/padding to 0px is a poor version of a normalizer that redesign all css to a clean cross-browser design from what you can start to write css that let the browsers render the same style.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Firstly, I don't have much experience with Bootstrap and I just started my second Bootstrap project. Sometimes I confused about overriding CSS. It may spend more time to find out the style need to be changed rather than write from scratch. So I am thinking... how about taking out the bootstrap style?
For example, keep the markup structure, set the color background, font value to inherit, remove all shadows, gradients, border, border-radius etc.. Furthermore, build a reference in order to check the default value easily. Then we can just use the layout of Bootstrap but write our own style.
I prefer to not directly modify the Bootstrap source code. Use an extra CSS file is better to organise. It is also good to update Bootstrap.
By the way, I really miss the blankwork grid system, is it possible to add this feature into Bootstrap?
So, do you think this is a good idea or bad?
What you are looking for is possibly the customised version of bootstrap. See the details at http://twitter.github.io/bootstrap/customize.html. This will allow you to pick which elements of bootstrap framework you would like to use without adding the other parts. It also allows you to customise fonts and some basic shades and colours.
This can also be done via the less system - see http://bootstrap.lesscss.ru/less.html for information on how to do this.
And finally, if you are having trouble identifying which css is being applied to which element, have you tried using a browser debug tool such as Firebug in firefox?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Panel control over div is impacting hyperlink within the div as no linkable.My panel is just appear above my div hyperlink content.
so part of my hyperlink where panel displays not linkable.. but remaining part of hypherlink is linkable
I am not able to add my sample code over here..
Please see my detail post here.. http://forums.asp.net/t/1895787.aspx/1?Panel+UpdateProgressBar+controls+over+div+is+impacting+hyperlink+within+the+div+as+no+linkable+
You misspelled "progress" in the closing </progressTemplate> tag.
Update
Actually I was hoping that would fix it. Usually if you're having z-index issues and there's a borked tag, that's the reason why.
If it's still not working, then you need just need to dig into the CSS of the page and figure out why. The HTML you gave is not indicative enough to know what the issue could be. You want to 1) look at the rendered HTML source, rather than your ASP.NET view, and 2) look at what CSS is being applied to that HTML.
Generally, if you need to move an element above another that is blocking focus, you just increment z-index until you've achieved that. Just bear in mind that the element must have either position: relative or position: absolute before z-index will even apply and sometimes the overlapping element's z-index is ridiculously high (1000, 9999, etc.). So you might have to make the blocked element even more ridiculously high. This is all just trial and error stuff, though, so you're mostly on your own for that part.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I recently made a website for a church. I used Foundation, SASS, and Compass. I've almost got it finished up when I notice that if you size the window down I get a horizontal scroll. So I add overflow-x: hidden; I thought that fixed it but when I tested it on my iPad I am still getting roughly 20px of padding on the right side. I then thought maybe it was from the box-shadow which made sense so I removed all the box shadows and its still there. Here is the link: http://www.jessefoutch.com/fumc/ any help would be appreciated.
Foundation already has its own set padding and margin for grid-columns and other grid elements. You can either change these parameters in the _settings.scss file in Foundation, or you can set the padding or margins to 0 manually and that should fix any of your issues. I checked and didn't actually see the issue you were speaking of however, so it may no longer be affecting your site
Perhaps you need to clear your cache. I have looked at the site in Firefox, Safari, and Chrome and only saw the standard browser scroll bar when I resized.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've battled with a two column layout for a WP index and got it working.
However on this one site it will not work:
http://justbedroomdesigns.com
You will notice that the third box containing a pic of a bed (or the first box in the second row - bottom left one) is not in its correct place (to the left of the final box with a bed pic).
I've used height auto to try fix it but it's still out of place.
All help hugely appreciated as is all the help I get from this awesome community.
the reason is that your images height is not same so give height to your post-block DIV. Like this:
.post-block{
height:355px;
}
I would suggest using a CSS reset if you dont already use one. http://meyerweb.com/eric/tools/css/reset/ Using and calling one before calling your css file can do wonders with cross-browser consistency. May be a pain to add now being that after you will also have to change your current CSS again but as a last resort, should help remedy your issues. Also by adding the above code by #sandeep as it fixed the issue I was seeing in Ffox.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
In what cases these are useful?
table-layout
font-stretch
font-size-adjust
orphans and widows
marks
clip
orphans and widows are used commonly in print to avoid a single line at the bottom or top of a page.
More info can be found here just do a quick search
http://www.w3schools.com/Css/pr_tab_table-layout.asp
I use table-layout: fixed a fair amount, but the others not so much. I've found that table-layout: fixed, along with <col> tags will speed up the rendering of a page with a very large table because the browser doesn't need to process the contents of all data in the table to calculate column sizes. It is also useful to have two tables with columns that align perfectly.
Clip looks like it could be useful, but I haven't used it before. A good article on clip is here:
http://www.ibloomstudios.com/articles/misunderstood_css_clip/
Orphans, widows, and marks are useful in print stylesheets I believe. And the font ones are for scaling height/width of fonts. I'm not sure how supported any of those are, but table-layout is well supported.