Please review my Fiddle Sample.
Click on a calendar day with an event (orange square).
You'll notice that the date box, is at the bottom of the window.
In the stylesheet, there's a snippet like this...
.calendar *{
-moz-box-sizing:border-box;
box-sizing:border-box;
vertical align: top;
behavior: url(pie/PIE.htc);
}
...the vertical-align: top; should bring that box to the top of the window, but it doesn't.
If you add vertical-align: top; to the stylesheet in Chrome, then it works fine.
Not sure why this is... Thoughts?
I seems to be a height issue. Remove height: 100%; from .calendar .c-specific
.calendar .c-specific {
position: absolute;
width: 100%;
height: 100%; <<< Remove this
left: 0;
top: 0;
display: none;
padding: 1em;
behavior: url(pie/PIE.htc);
}
This is the line you need to change:
.calendar .c-holder .c-grid .c-row .c-day .date-holder {
font-size: 1.3em;
position: absolute;
right: 5%;
bottom: 5%; /*** CHANGE THIS TO TOP ***/
behavior: url(pie/PIE.htc);
}
Related
I have a problem with sidebar of this page. I can not make it go under in the responsive version, especially in the smartphone version. Sidebar remains attached to the contents of the left but does not wrap
This is the link for the codepen
If codepen does not work, this is the link for the website.
archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: 350px;
bottom: inherit;
right: inherit;
clear: both;
float: left;
}
Html there will certainly be errors because it is a copy of a source of a website wordpress.
There are a few problems here:
Your container .archive-posts-w.with-sidebar has display: table;. Change that to display: block for smaller screens (i.e. in your media query)
The CSS for the part above your sidebar should be like this (for smaller screens):
.archive-posts-w.with-sidebar .archive-posts {
display: block;
vertical-align: top;
width: 100%;
}
And for .archive-posts-w.with-sidebar .archive-sidebar you have a max-width setting of 350px, also inherited from everal other rules, so change this rule (for smaller screens) to
.archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: none;/* <-- this one is changed */
bottom: inherit;
right: inherit;
clear: both;
}
First add class table td in that td class="test"
td.test
{
display:block
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
margin:0px!important;
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
In that class you have 'margin: 0 0 0 60px!important;' you change that 0px
abd check the devices
http://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait
On this website, when the viewport width is reduced to 595px or below, the following CSS should apply:
#media (max-width:595px) {
#header-left,#header-right {
display: block;
width: 100%;
float: none;
}
}
The browser is recognising the CSS, and it appears active, however, #header-left (which contains the logo) is not 100% wide, or is #header-right (which contains the phone number).
That is, #header-left & #header-right still try to take up half of the width, and appear side by side, instead of above and below each other.
Why is this occurring? Thanks.
Remove position:absolulte; from #logo {position: absolute;top: 0px;left: 0px;} and remove from #menu Then your code works fine.
You should override the following commented rules in your css specific to the 595px size:
#logo {
/* position: absolute; */
/* top: 0px; */
/* left: 0px; */
}
#header-right {
width: 50%;
float: right;
padding-top: 8px;
/* text-align: right; */
}
#menu {
/* position: absolute; */
/*top: 80px;*/
/*left: 0px;*/
background: url(images/menu-bg.png) no-repeat;
width: 960px;
height: 55px;
}
Note: Override the commented rules
My nivoslider slideshow on my index page shows us correctly in chrome, IE 10 and opera.
Only in Firefox it shows us up on the right side.
Here is my site: http://www.colombian-emerald-jewelry.com/
How can I fix this ?
I appreciate your help
You can also just add float:left; to the nivoSlider class:
.nivoSlider {
float: left;
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}
Positioning is the way I got it working, in both browsers try this:
Add:
.slider-wrapper {
height: 350px;
position: relative;
}
Edit:
.theme-default .nivoSlider {
background: url("loading.gif") no-repeat scroll 50% 50% #FFFFFF;
box-shadow: 0 1px 5px 0 #D3D3D3;
position: absolute;
}
.theme-default .nivo-controlNav {
bottom: 0;
clear: both;
left: 45%;
overflow: hidden;
padding: 0;
position: absolute;
}
In case anyone meets the same problem, but wants to avoid using float (it forces using clearfix if your slider is let's say above the main content of page), the clear: both works even better.
.nivoSlider {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
clear: both
}
#bottom_fade {
position: absolute;
bottom: 0;
width: 100%;
background: url("bottom-fade.png");
background-repeat:repeat-x;
height: 400px;
z-index: 2;
}
.categories {
position: absolute;
left: 50%;
color:black;
word-wrap: break-word;
font-family: 15px 'Libre Baskerville', serif;
margin-left: -200px;
z-index: 1;
}
.categories td {
width: 200px;
}
you may see the result of the above code here.
Try to resize your browser window so that you're forced to scroll to see the whole text in the table.
As you scroll, you may see that #bottom_fade will not remain sticked to the bottom of the page but will follow your scrolling. I don't want that to happen: how can I say to bottom_fade to ALWAYS stays attached to the bottom of the browser window, no matter what happens to the scrollbar?
Many thanks!
Change
#bottom_fade {
position: absolute;
}
to
#bottom_fade {
position: fixed;
};
and it should work like a charm.
(nice effect by the way!)
I've coded my website for all browsers but of course IE has issues. Specifically only IE 7. I'm hoping to find a resolution to why it's behaving the way it is with two issues and what I can add so IE will display it properly.
My submit buttons are aligning to the bottom of their containing divs.
CSS for the SUBMIT button for the SEARCH field
#searchform { /*container widget */ position: relative; left: 15px; width: 97%; height: 30px; background-color: #f3f3f3; border: 2px solid #742222;}
#searchform label { display: none; }
#searchform input#s { width: 75%; height: 20px;}
input[type=text],input#s { margin: 0 10px 0 0; width: 60%; }
#searchsubmit{ position: relative; float: right; width: 30px; height: 30px; text-indent: -999px; background: url(http://averylawoffice.ca/img/SEARCH-submit.jpg) center; border: 0px;}
This CSS works in all browsers but IE version 7. Is there a way to make it top align without having to position absolute?
I've managed to move the SUBMIT button up (to the correct position) by left-floating the text-box.
.subscription_email {
...
float: left;
}
Same goes for the search text-box:
#s {
...
float: left;
}
By making those changes, the resulting presentation will be exactly the same as in Firefox.