I used to create space between DIVs, using this css code:
.area:before {
content: "";
display: block;
height: 110px;
}
This works on all browsers works except on Safari on Mac.
I tried to change the values of the display or overflow but it does not work.
Can anyone advise me?
you could simply use margin-top on the main element itself:
.area {
margin-top: 110px;
}
Related
I'm trying to put some arrows onto table headers. I did this using the :after CSS pseudoelement.
The issue I'm facing is, this works correctly in all browsers EXCEPT Safari for Windows, where the background image just doesn't appear.
Why does this happen? Is there a way to resolve the issue?
HTML
<div class="test">ABC</div>
CSS
.test:after
{
content:" ";
background:url(http://www.designwalker.com/img/arrow/arrow06.jpg);
padding-left:20px;
background-size:10px 10px;
}
Note: this is just an example, not what it really will look like.
I think you need to specify display: inline-block (or block) and also a height.
.test:after {
content:" ";
background:url(http://www.designwalker.com/img/arrow/arrow06.jpg);
padding-left:20px;
background-size:10px 10px;
height: 30px;
display: inline-block;
}
http://jsbin.com/OrIdozUc/2/edit
I am trying to float an li's :after, which includes a background element.
It works in every browser on Mac, and every browser on Win, EXCEPT IE.
I tried changing around parameters like the display and floating, which does not work.
CSS:
ul.nav li a:after {
background: url(images/nav_icon.png) no-repeat;
width: 8px;
height: 5px;
font-weight: 400;
content: "";
display: block;
float: right;
margin: 8px 0 0 6px;
}
Heres what it looks like right:
Heres what IE does:
I am thankful for any help. Only thing i found googling was clearfix tricks for IE7, nothing regarding how that stupid browser interpretes selectors.
Solved using conditional comments which contain display: inline-block and removing the floating for the :after.
I'm trying to have a block-level input-append, where the input bar takes up all the space other than the button.
I got this working with a <button> or <span>, but once I switched the tag to an <input>, I started having styling issues again. However, the <input> tag is required.
I've include a Fiddle - HERE
I got it to work by doing this:
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: auto !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
I removed the nested selectors as you can't do that in regular CSS. (With Sass and LESS you can though).
I added "height: auto !important" to the ".add-on" selector. Although it's generally regarded not best practice to use "!important".
I added padding-right to the well of 58px which is the width of the GO! button, 39px, plus the well padding of 19px.
Edit: As #nicefinly pointed out, the height of the GO! button was still off. In Chrome I didn't see anything wrong, but in Firefox I could definitely see the height problem.
So, with all of his changes, I would also add that when modifying the well and add-on classes for example, this would change all the places where those standard Bootstrap classes are used and this is probably not want you want.
Instead, I would create separate classes for all of these custom classes so they work in this specific case and elsewhere it works as intended. For example, "add-on-button", "well-with-button", etc.
#CoderDave pointed me in the right direction with his suggestion - JSFiddle of #CoderDave's answer
However, I then noticed that the height was somewhat off. Instead, I set the button height manually - JSFiddle of my workaround
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: 30px !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
BUT THEN...
Testing in Chrome gave me strange results (not necessarily in the fiddle, but in my local environment). Therefore, instead of padding, I used the margin-left and margin-right where
margin-left = 17px on the input .add-on
and
margin-right = -55px on the .input-bar
However... After that, I noticed that the z-index was causing the .input-bar to block out the GO! button when the bar was in focus (i.e. I clicked into it).
Therefore, I set z-index
z-index: -1 for the well
z-index: 1 for the .input-bar
z-index: 2 for the .add-on
FINAL JSFIDDLE HERE!
This seems like a pretty hacky solution. If anyone has a better solution, please share.
I want to do a navigation with list elements formatted as table so the width of all elements is the same but it won't work for Firefox.
HTML:
<div id="#navigation">
<ul>
<li>
<a>Menu1</a>
<ul>
<li><a>Sub1</a></li>
<li><a>Sub2</a></li>
</ul>
</li>
<li><a>Menu2</a></li>
</ul>
</div>
CSS (some properties are missing but only such things as color...):
#navigation {
position: relative;
height: 25px;
width: 852px;
}
#navigation>ul {
width: 850px;
top: 0px;
padding: 0;
margin: 1px;
list-style-type: none;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
#navigation>ul>li {
position: relative;
height: 25px;
display: table-cell;
}
#navigation>ul>li>ul {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation>ul>li>ul>li {
/* nothing really happening here */
}
JS Fiddle:
http://jsfiddle.net/ZrsXv/2/
Everything works fine in Chrome, Safari, IE8 and greater and with some modifications also in IE6 and IE7
But in Firefox I will always get this
I know I'm not the first one having Problems but I have also tried solutions I found on stackoverflow but if something is changing this is everything I get
So is there a solution that won't mess everything up?
I think your problem is that position: relative; doesn't really work on table cells. I couldn't find a source at the moment but I'm pretty sure I have experienced the same problem before.
So what is happening in Firefox is that the width of #navigation>ul>li>ul is calculated as 100% of #navigation which is the closest ancestor with a position value other than static (default position value).
You can go around the problem by inserting a dummy element with position: relative; (f.ex. a div) inside #navigation>ul>li and then #navigation>ul>li>ul must be changed to #navigation>ul>li>div>ul
The easiest solution is to reference already-existing examples of menus built from nested lists.
http://www.devarticles.com/c/a/HTML/Building-a-Drop-Down-Menu-with-Nested-HTML-Lists/2/
I'm not really sure why you're using display: table, either; it's been a while since I last made a multilevel menu myself, but I never used that display method, and none of the examples I found after a brief search did either.
Reading other answers and comments I understand why you're using display: table and it could be acceptable...
I tryed different solutions and nothing work for Firefox so, if you are interested in using this method I can suggest to give the fisrst li element width to the children ul using javascript / jQuery like I did in your jsfiddle here
Otherwise I can not help you in a different way... sorry.
My site is showing up fine in IE8/Firefox/Chrome but I can't figure out how to make it function with IE.
The relevant CSS:
#maincontent {
display: table;
}
#content {
display: table-cell;
width: 620px;
padding-left:4%;
padding-right: 22px;
padding-bottom:15px;
}
#sidebar {
display: table-cell;
width: 300px;
}
#content and #sidebar are in #maincontent. On IE6/7 #sidebar will be under #content. I've tried setting the sidebar to display:block with a float, and it will then render fine in IE6/7 but all the other browsers get screwed up. How can I get this setup?
From W3Schools:
No versions of Internet Explorer
(including IE8) support the property
values "inline-table", "run-in",
"table", "table-caption",
"table-cell", "table-column",
"table-column-group", "table-row", or
"table-row-group".
The best solution is probably to build a real table.
CSS tables aren't supported in IE, so you'll probably want to try working with just floats and margins. I'd recommend taking a look at the positioning on one of these templates and working from there.