I'm coming to the end of a new web project for my father's website, however after opening it in IE, I now want to jump off a bridge!
I have attached two screenshots of how the site is rendering in IE in comparison to any other browser. For some strange reason, it is pushing the page content underneath the slider.
In IE it renders like this: http://cl.ly/JVgZ
In other browsers is renders as expected, like this: http://cl.ly/JVgo
(Sorry, newbie so I can't post images directly -.-)
As you can see, the whole of the dark grey text area is hidden beneath the slider.
I'm assuming this is CSS related, and my code for the slider is as follows:
body { }
.panel h2.title { }
/* Most common stuff you'll need to change */
.coda-slider-wrapper { }
.coda-slider { padding-bottom: 0px; padding-top: 0px; background-color: #262626; }
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { overflow: auto !important; }
/* Change the width of the entire slider (without dynamic arrows) */
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 1280px }
/* Arrow styling */
.coda-nav-left a, .coda-nav-right a { }
/* Tab nav */
.coda-nav ul li a.current {
color: white;
height: 60px;
z-index: 9999;
position: relative;
}
.coda-nav ul li a.current:before {
content: '';
position: absolute;
height: 0;
width: 0;
bottom: 2px;
left: 50%;
margin-left: -9px;
z-index: 9999;
border: 10px solid transparent;
border-top: 10px solid #303030;
border-bottom: none;
}
/* Panel padding */
.coda-slider .panel-wrapper { }
/* Preloader */
.coda-slider p.loading { text-align: center }
/* Tabbed nav */
.coda-nav ul { margin-left: 167px; margin-top: 0px; margin-bottom: 0px; clear: both; display: block; overflow: hidden;}
.coda-nav ul li { display: inline }
.coda-nav ul li a { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: #bfbfbf; display: block; float: left; text-decoration: none }
.coda-nav ul li a:hover { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: white; display: block; float: left; text-decoration: none }
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { display: none; }
.coda-nav-left a, .coda-nav-right a { display: none; }
p { color: #bfbfbf; }
I hope someone is able to save me!
Thanks so much in advance for your time and any help you are able to offer.
Edit: This code is also present in my HTML document in the section...
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
#sliderarea {position: absolute !important; margin-top: 0px !important;}
div.orbit-wrapper {margin-top: -140px !important; position: absolute !important;}
</style>
<![endif]-->
I think the problem is with your clearfix technique. A “clearfix” is what gives floated elements, such as your slider, an externally-visible height, instead of the normal zero height of floated elements. Your clearfix is working in most browsers but not in IE.
Try the alternate methods of clearfixes described in this answer about methods for clearfixes. Maybe those other methods would work better than your current one. I’m have trouble telling what your current method is because your clearfix rules are mixed with your visual-display rules. Start with the micro-clearfix at the top of that answer:
/* For modern browsers */
.coda-nav ul li a.current:before,
.coda-nav ul li a.current:after {
content:"";
display:table;
}
.coda-nav ul li a.current:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.coda-nav ul li a.current {
zoom:1;
}
Delete any rules in your existing code that the clearfix would override.
Related
I could very well have lost it.
My :hover, a:link states do not seem to work on a mobile.
I have a fixed nav at the bottom of the screen:
/* nav */
nav#desktop {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
background-color: transparent;
padding-top: 28px;
z-index: 1002
}
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 2.3%
}
#media only screen and (max-width: 675px) {
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 3%
}
}
nav#desktop > ul > li {
width: 200px;
font-size: 19px;
font-weight: 400;
float: left;
margin-right: 12px;
position: abolute;
bottom: 0px;
overflow: hidden
}
nav#desktop a {
color: #000
}
nav#desktop a:hover {
color: #8974A7
}
On a desktop the hover works successfully, as in when you hover it shows purple and then goes back to black.
Why on a mobile, when the li item is clicked, does it go purple, and then stay purple.
I did have:
nav#desktop a {
color: #000
}
nav#desktop a:hover, a:focus {
color: #8974A7
}
Thinking :focus was behind it, having removed it now; still no change.
Interestingly, I have:
#mobile-open #mobile-container > ul {
position: relative
}
#mobile-open #mobile-container > ul > li {
margin: 0px;
padding: 0px 0px 15px 0px;
}
#mobile-open #mobile-container > ul > li:last-child {
margin: 0px;
padding: 0px
}
#mobile-open #mobile-container a {
color: #fff;
text-decoration: none;
}
#mobile-open #mobile-container a:hover {
color: #ccc
}
For links within my open menu, and the two states work as expected.
As you can imagine, :hover is almost impossible to truly support on consumer touch devices (there's no detection for when a user is hovering over the screen but not touching it).
So the devices do the best they can, and they end up with what you observe, which is a pretty terrible experience, but you're at the mercy of browser vendors - you're developing on their platforms.
Do what often seems to be done, add a piece of JavaScript to detect (imperfect) user-agent/touch detection and add a class of touch to the body element.
And then, everywhere in your CSS you'd have to do this:
body:not(.touch) someselector:hover { }
Or do the inverse:
body.no-touch someselector:hover { ... }
If you decide you like the :hover implementation of a particular browser vendor when on touch, but not the implementation of another, then you can add further classes to your CSS to target specific browsers/devices.
All solutions are pretty terrible, really.
You need to use :active and :visited to change the color after you selected the element.
:hover on mobile don't work. Devices try to render it as better as they can but with touch device there's not an :hover status.
I have the following case generated by a plugin which I am not able to rewrite as I would need to fix this. It generates breadcrumbs for a website like the following example:
<li><a>Parent</a></li>
<li><a>Subparent</a></li>
<li><a>Subsubparent</a></li>
<li>Current Site</li>
I have styled the links to be clickable more easy
li {height: 40px;}
li a {padding: 5px; display: inline-block; height: 30px;}
Now of course the last element does not get the same padding and looks wired. I am not able to wrap a html element like span around it in php.
Is there a css selector to select the text inside of an element, without affecting the element itself? Or wraps an html element like span around it, something like
li:last-child::before {content:"<span>"}
Every hint appreciated! If someone likes jsfiddle here is one to play with.
Why don't you just add the padding to the last li together with the anchors?
Updated JsFiddle
li a, li:last-child {padding: 10px; display: inline-block;}
I have created the following work-around to get the right styling.
li:last-child::before {
content: "";
opacity: 0;
display: inline-block;
margin: 10px 0 10px 10px;
}
li:last-child::after {
content: ".";
opacity: 0;
display: inline-block;
margin: 10px 10px 10px 0;
}
Sadly one of the both pseudo elements needs content:"." or another real content. This is a solution to target spacing (margin/padding) without changing some css/html.
Updated jsfiddle
Still I would love to see clean css solutions!
My own suggestion, at its simplest, would be:
li {
height: 40px;
/* vertically-aligns the text to
the same 'line': */
line-height: 40px;
/* to display in a row, given the
text-alignment I assume this is required,
remove/adjust if not: */
float: left;
/* removes the bullets: */
list-style-type: none;
/* Just to clearly show the size of
the <li> elements: */
background-color: #ffa;
}
li:nth-child(odd) {
/* again, just to show the size: */
background-color: #f90;
}
li a {
/* to fill the whole of the <li>: */
display: block;
}
li a:hover {
/* just to show the hover 'hit-area': */
background-color: #f00;
transition: background-color 0.4s linear;
}
li {
height: 40px;
line-height: 40px;
float: left;
list-style-type: none;
background-color: #ffa;
}
li:nth-child(odd) {
background-color: #f90;
}
li a {
display: block;
}
li a:hover {
background-color: #f00;
transition: background-color 0.4s linear;
}
<ul>
<li>Parent
</li>
<li>Subparent
</li>
<li>Subsubparent
</li>
<li>Current Site</li>
</ul>
Now, to style them as 'breadcrumbs,' you could use generated content to provide
the separators, for example, you can update the CSS:
li {
/* other rules remain the same,
this is added to provide space
for the generated content: */
margin-left: 1em;
}
/* there is (usually) no marker before
the first breadcrumb, this removes its
space: */
li:first-child {
margin-left: 0;
}
/* other rules that, remain the
same, are excised for brevity */
li::before {
/* unicode for the guillemot,
'»', character: */
content: '\00BB';
/* to position easily and prevent
altering the position of the child
<a> elements: */
position: absolute;
/* simple means to move the generated
content off the left edge: */
right: 100%;
width: 1em;
text-align: center;
}
/* no marker the first breadcrumb: */
li:first-child::before {
/* removing both content and width: */
content: '';
width: 0;
li {
height: 40px;
line-height: 40px;
position: relative;
margin-left: 1em;
float: left;
list-style-type: none;
}
li:first-child {
margin-left: 0;
}
li a {
display: block;
}
li a:hover {
background-color: #f00;
transition: background-color 0.4s linear;
}
li::before {
content: '\00BB';
position: absolute;
right: 100%;
width: 1em;
text-align: center;
}
li:first-child::before {
content: '';
width: 0;
}
<ul>
<li>Parent
</li>
<li>Subparent
</li>
<li>Subsubparent
</li>
<li>Current Site</li>
</ul>
I installed the anything slider on my site and I'm trying to get the navigation to be tabbed like this: http://www.echappee-laine.fr/
I updated the CSS to make the tabs but I'm pulling my hair out trying to understand what went wrong because 1) the links don't cover the entire box, and 2) now that I've done this the navigation isn't responsive. (http://beta.harvest-express.com)
Any thoughts?
/* Navigation buttons, default state */
.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
background: #777;
color: #000;
}
/* Navigation buttons, active state */
.anythingSlider.activeSlider .anythingControls ul a.cur,
div.anythingSlider.activeSlider .anythingControls ul a {
background-color: #7C9127;
}
/* Navigation Links */
.anythingSlider .anythingControls {
position:absolute;
top:0;
left:0px;
list-style:none;
padding:0;
margin:0;
width:235px;
z-index: 20;
}
.anythingSlider .anythingControls ul {
margin: 0;
padding: 0;
float: left;
}
.anythingSlider .anythingControls ul li {
display: block;
height: 75px;
width: 235px;
border:1px solid #ccc;
background-image: url(.../transparant.png);
}
.anythingSlider .anythingControls ul a {
font: 11px/18px Georgia, Serif;
display: inline-block;
padding: 2px 8px;
text-decoration: none;
line-height: 75px;
background-image: url(../images/default.png);
background-position: center -288px ;
background-repeat: repeat-x;
text-align: center;
outline: 0;
}
.anythingSlider .anythingControls ul a:hover {
background-image: none;
}
1) the links don't cover the entire box
You have display: inline-block set on your a tags; unless you have a specific reason why they need to be that way, I'd change that to be display: block allowing the link to expand to fill up the containing li. Alternatively you could add a width: 100% to that rule.
2) now that I've done this the navigation isn't responsive
You've got an explicit width of 235px set on the anythingControls div.
I have a jsfiddle.net/vanduzled/AgAwK/ of what it turns out the output of wp_list_categories:
So I have A list of Category in wordpress with a sub category and I want it to display in my sidebar. I use wp_list_categories but what it displays is like this:
Accessories
Sub Accessory
Lifestyle Products
Sub Lifestyle Products
This looks good but I want to make the children (ie Sub Accessory) hidden and when you hover on the Parent (ie Accessories) the children will come out on the side like a normal vertical navigation with a Two Level Layout.
In my fiddle, the class .children is hidden and I put inline-block on when you hover on the parent but it doesn' work.
I'm actually using a Foundation Framework and Zurb has a Navigational Menu built in already but I can't use it in the dynamic insertion of menus as if to use a custom walker and then style is as necessary because in Foundation, they have an extra class which I cannot put in the wp_list_category function of wordpress.
I don't know if this can be done with pure css or a js will be necessary.
You can use a traditional css in doing this from A list Apart:
/* ASDIE NAV*/
ul.side-nav { display: block; list-style: none; margin: 0; padding: 17px 0; }
ul.side-nav li { display: block; list-style: none; }
.children{
width: 200px;
position: relative;
z-index: 1;
border-bottom: 1px solid #ccc;
}
ul.side-nav {
margin: 0;
padding: 0;
list-style: none;
width: 220px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul.side-nav li {
position: relative;
}
.side-nav li ul {
position: absolute;
left: 199px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul.side-nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul.side-nav li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul.side-nav li a { padding: 2px 5px; } /* Sub Menu Styles */
ul.side-nav li:hover ul.children, ul.side-nav li.over ul.children { display: block; } /* The magic */
/* ASIDE !NAV */
I have been trying to center the slider that I have inside the header. The header and the whole container is neatly centered, with just margin: 0 auto; Then I tried to include a slideshow inside the header, and tried by many ways to place it correctly. Yes, I succeeded for my own configuration by using position:aboslute and then playing with coordinates, but that will not work for the rest of the world.
The site (under construction) is www.hrcprojectconsulting.com
Since you ll be able to see all the CSS stuff, do you know how in heaven that can be positioned? I tried all margin combinations but I am kind out of options that I could think of.
A good news is that Internet Explorer 10 is also available now for Windows 7 so, CSS3 stuff and html5 placeholders work so I ll never code for backwards things anymore.
Note: if you happen to see everything ok, this is because you have the same kind of monitor and resolution than I do.
thank you
The code for the slider:
<style type="text/css" media="screen">
#slider {
width: 960px; /* important to be same as image width */
height: 150px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 960px; /* important to be same as image width or wider */
position: absolute;
top: 125px;
left:265px;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
The code for my homepage:
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body{
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 960px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
height: 300px; /*Height of top section*/
}
This is because the ul has a default padding. You will have to set the padding for your ul#sliderContent to 0:
#sliderContent {
padding:0;
margin:0;
}
Then you should remove the position: absolute from your stylesheet.
To place the sliderContent at the bottom you could do like this:
#topsection {
position: relative;
}
#slider {
position: absolute;
bottom: 0;
}
#sliderContent {
padding: 0;
margin: 0;
}