Hi I have tried for 2 hours everything that I could find on the net with this to no avail. So my last hope resides here.
You can check the site at:
http://webofdreams.ro/vworker/finemaid/finemaid.html#
the navigation is overview and services.
html:
<div class="contentNav clearfix">
<ul class="clearfix">
<li><a class="show1 navButton" class="left" id="activeLink">Overview</a></li>
<li><a class="show2 navButton" class="right">Services</a></li>
</ul>
</div>
css:
.clearfix {clear: both;}
.contentNav {
color: #ddd !important;
font-size: 1.5em;
padding: 0;
margin: 0;
display: block;
text-align: center;
}
.contentNav a {
color: #fff !important;
}
.navButton {
font-size: 18px !important;;
padding: 5px 15px;
background: rgb(122,188,255); /* Old browsers */
}
.contentNav li {
display: inline-block;
}
/*IE specific css*/
.navButton {
zoom: 1;
*display: inline;
}
.navButton a {
zoom: 1;
*display:inline;
}
.height {
height: 45px;
clear: both;
}
IE only supports display: inline-block for elements that are natively inline. <li> elements are natively block, so in IE, you need to keep it as display: inline, but trigger hasLayout on the element, like so:
display:-moz-inline-stack; /* only for older mozilla browsers */
display:inline-block;
zoom:1; /* triggers hasLayout */
*display:inline; /* resets element to inline for IE */
Here's the article I found this solution on some time ago:
Cross Browser Support for inline-block Styling
That said, I've never tested this in IE6, because IE6 is 11 years old and shouldn't be supported anymore. But it's worth a shot. The article was written in '07, so he may have tested in IE6
Related
I'm developing on firefox, and I just wanted to check the current state how it looks in Chrome. And I saw a little problem. After that I checked it on Edge and on IE as well and the problem is in all browsers except firefox.
To show my problem, here's an image:
As you can see there is no problem. A navigation bar positioned to the bottom of an image
But in the other browser's they are look like this:
You can see 2 or 3px difference. I don't know why. I'm using only two CSS file. The bootstrap-grid system and mine SCSS file.
I checked them out in Inspectors, FF says its height is 42px, while Chrome says 40.
SCSS:
nav{
top: 254px;
background: rgba(0,0,0,0.75);
display: flex;
flex-direction: row;
justify-content: center;
}
nav a{
text-decoration: none;
text-transform: uppercase;
font-family: $nav-font;
font-size: 25px;
color:#126ADE;
letter-spacing: 0.8px;
margin-left: 20px;
padding: 5px;
}
nav a:first-child{ margin-left: 0px;}
nav a:hover{ background: white;}
In such a scenario, I try to use separate CSS rules for Firefox and Chrome:
Rules common to both browsers:
nav {
position: absolute;
background: rgba(0,0,0,0.75);
display: flex;
flex-direction: row;
justify-content: center;
}
For Firefox alone:
#-moz-document url-prefix() {
nav{
top: 252px;/*making the height same as chrome*/
}
}
Only for Chrome:
#media and (-webkit-min-device-pixel-ratio:0) {
nav{
top: 254px;
}
}
Hope that helps!!
I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.
Edit: it seems to be working fine on Firefox 37.
The answer below is still relevant, but the style related issues from mid 2013 are resolved.
IE support isn't mentioned here but edits/answers regarding it are welcome.
demo
The HTML:
<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>
The CSS:
input[type=checkbox] {
appearance: none;
background: transparent;
position: relative;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
left: 0;
content: '';
text-align: center;
background: #aaa;
display: block;
pointer-events: none;
opacity: 1;
color: black;
border: 3px solid black;
}
input[type=checkbox] + label {
line-height: 48px;
margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
content: '';
background: #32cd32;
opacity: .3;
}
input[type=checkbox]:checked::after {
content: '\2713';
background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
width: 48px;
height: 48px;
font-size: 46px;
line-height: 48px;
vertical-align: middle;
border-radius: 50%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.
What do I need to change to have it look the same on Firefox as it does on Chrome?
Desired:
Not desired:
You can enable custom styles for checkbox specifically for mozilla browser by adding this property and it worked for me.
-moz-appearance:initial
I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from
input[type=checkbox]::after
to
input[type=checkbox] + label::after
Downside:
requires a label
But:
HTML requires input elements to have a label
Conclusion:
only bad for invalid HTML
doesnt technically need a LABEL, but does need control over the mark up to ensure there is a target-able sibling immediately after the checkbox.
i.e.
input[type=checkbox] + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
input[type=checkbox]:checked + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
<input type="checkbox"></input>
<span class="targetMe"></span>
target the span using the sibling selector and :after elements as above.
Might as well put in a label tho at this point... :P
The problem is that :after and ::after technically create an element as the last child of the element the pseudoselector is applied to. Firefox doesn't like to create children inside of its checkboxes. This is actually part of a bigger topic which is replaced elements.
You will see the same issue with the :before and ::before pseudoelements not working on checkboxes because they would create elements as a first child element within the element being selected.
I have a web site (http://www.interactstaging.net/clients/tozzi/) with drop down menus which works perfectly under Firefox and Chrome but not IE10.
An example HTML code for menu part looks like:
<div class="navi"><em class="hover"></em><span>Home</span></div>
and CSS for that part:
.navi a span {
position: relative;
display: block;
padding: 0 7px;
line-height: 28px;
z-index: 100;
height: 45px; }
Any clue why that CSS is not working under IE10?
Thanks
Try this CSS rule:
.sf-menu li {
background-color: #fff;
}
I'd like to create a horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container <ul>. Nav links can be different widths. The first and last links should line up with the beginning and end of the <ul> respectively (meaning the links aren't centered), like this:
|left side..right side|
link1 link1 link3 link4
Unless I'm mistaken, I don't think there is a way to do this in CSS2. But is there a way to do it in CSS3? Otherwise I'll need to do it in Javascript.
If you insist on CSS3, you can do it with box-flex. Since this isn't fully implemented in all browsers, the properties still have the -moz and -webkit prefixes.
Here's the CSS to do it:
ul {
display: box;
}
li {
box-flex: 1;
}
But since not all browsers use it, you have to add -moz-box-flex, -webkit-box-flex, etc.
Here's a demo: http://jsfiddle.net/tBu4a/9/
That's straightforward to do with CSS2:
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
}
a {
display: block;
}
Here's a working example. The problem isn't so much that CSS2 doesn't have a way to do it, it's that IE didn't fully support CSS2 until version 8.
--edit
OK, now I think I understand your requirements:
ul {
display: table;
width: 100%;
border: 0;
padding: 0;
background-color: blue;
}
li {
display: table-cell;
border: 0;
padding: 0;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
a {
display: block;
padding: 0.25em 0;
background-color: white;
text-decoration: none;
}
Here it is in action. I've zeroed out all the borders and padding as per your comments, you could add some back in but you would, of course, need to zero out the left border/padding of the first link and the right border/padding of the right link using either li:first-child or li:first-child a (and the opposite last-child ones).
I have some CSS that doesn't behave correctly with IE8. It works fine with FF3, but in IE8 there are white boxes in between the list items and the whole thing is buggy.
here is the css in question
#golist {
width:900px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
#listing {
list-style:none;
margin:0;
padding:0;
}
#listing li {
float:left;
display:block;
width:128px;
background:#fff;
border:1px solid #000000;
height:96px;
}
#listing li a {
border:none;
}
#listing p {
margin-bottom:0;
}
/* ---- show-hide elements ---- */
#listing li .show{
display:block;
width:128px;
height:96px;
}
#listing li .hide {
color:#121212;
text-align: left;
height: 0;
overflow: hidden;
background-image:url(bghover.png);
}
#listing li:hover .hide, #listing li.over .hide {
cursor: pointer;
height: 96px;
width:128px;
text-align:center;
}
#listing li:hover .show, #listing li.over .show {
height: 0;
overflow: hidden;
}
#listing li a, #listing li a:visited, #listing li a:active {
color:#121212;
font-size:12px;
text-decoration:none;
}
#listing li a:hover {
color:#121212;
text-decoration:none;
}
And here is the code itself:
<div id=golist>
<ul id=listing>
<li class=show>
<a href=#>
<img src=images/image.jpg height=96px width=128px border=0>
</a>
<div class=hide>
<a href=link.html>Link</a>
<p>Some info</p>
</div>
</li>
</ul>
</div>
The idea is to have a 128x96 box with an image. On mouseover, a layer pops up over it with some text.
Here you can found about this: http://webdesign.about.com/od/internetexplorer/a/aa082906.htm
This is a part of the article:
It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.
In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:
div#nav { width: 150px; margin-left: 20px; }
This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.
So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:
body > div#nav { width: 150px; margin-left: 20px; }
Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:
#nav { width: 150px; margin-left: 10px; }
The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.
By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.
Start by clearing all of the default padding and margins in your css file using:
* { padding: 0; margin: 0 }
Then you'll have to adjust your code accordingly as every browser adds its own padding and margins to all attributes.
Once you get it to the point where you're happy with it in Firefox and Safari, use conditional statements to pull in the appropriate IE stylesheet:
<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->
In your stylesheets only override what needs overriding:
Master CSS
.iframestyle { float: left; margin-right: 3px; width: 305px; }
IE 6
.iframestyle { width: 309px; height: 263px; }
IE 7
.iframestyle { width: 309px; margin-top: 0px; }
IE 8
.iframestyle { width: 305px; margin-top: 0px; }
(For whatever reason IE 8 may need a redeclaration of width.)