I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.
Related
I have position fixed menu element which is hiding whenever you click/touch on darken area. And the problem is that whenever you are scrolling website this blank space appears under menu before it hides
screenshot with issue:
.
I tried to add more height to menu element and setting overflow: hidden to disable scrolling when menu is active but it didn't help. Also i tried to search about this but it's really hard for me to formulate accurate question with words to find some related answers or tips.
I figured out how actually position: fixed is working, and came up with idea how can i solve my issue. So basically, on touch devices position fixed is working only in one way(for example: if you set top: 0 and bottom: auto(or top: 0 and bottom: 0), there will be an empty space at bottom before menu hides, and if you set bottom: 0 and top: auto there will be opposite effect). So i came up with idea to create another layer with same bg-color and same animation effects but with bottom: 0 and top: auto for preventing this blank space on top/bottom side of the menu. So basically, yea, it did solve my issue. Maybe someone is facing same, so i decided to write down this answer.
thanks to #eisbehr for teaching me how to use this and a well learned lesson, I removed my previous answer.
body {
margin: 0;
}
.forceHeight {
position: relative;
height: 200vh;
background-color: lightgrey;
}
.menu {
position: fixed;
right: 0;
top: 0;
bottom: 0;
background-color: blue;
}
<div class="forceHeight">
<div class="menu">
this is your fixed menu
</div>
asdf this has a lot of content
</div>
With the help of the nice people here I got a reasonably decent mock-up: http://jsfiddle.net/CecilWesterhof/4kLwK/2
In the middle there is a main document and besides this there is a comment section.
It looks reasonable, but there are two problems with it.
When the document becomes less high, the position of the comments is not really correct. It should be top, middle and bottom. But currently (in FireFox, which is the most important) when the document height is lowered the middle section gets into the bottom section.
What should I change in this code?
The other problem is the next button. I would like to have it on the right, but I did not get this to work.
I tried:
button.next {
background: #84a0C4;
border-radius: 10px;
clear: both;
color: #FFFFFF;
float: right;
font-size: 200%;
overflow: hidden;
}
But that places the button at the right, but also makes the comment section bigger and gives you a scrollbar when you do not need one.
EDIT
For the button problem I found a hack. Using the above style and adding a few breaks like:
<button class="next" id="next">Next</button>
<br/><br/><br/>
solves the button problem. Not really neat, so if there is a better way …
To see the problem with the float without the hack:
How it looks in FF under Linux without the hack http://decebal.nl/images/2014-04-30ButtonRightProblem.png
About the alignment problem, this picture displays it:
wrong alignment http://decebal.nl/images/2014-04-30AlignProblem.png
Questioning is merged into ‘Always check for a reference’ instead of being halfway between ‘Be short …’ and ‘Always check …’.
You have to pick minimum min-height for your comment div, as you will always have an issue with that.
Also I've found some weird positioning logic in your css file including tranformations of Y scale... No idea why you need that. It'll probably cause many troubles in IE browsers.
Anyway, here is the fiddle -> http://jsfiddle.net/4kLwK/7/
and in a summary my modifications of the CSS file:
added:
#comment
{ position:relative;
min-height:250px;
height:100%;
}
modified:
.middle {
position: absolute;
border:1px solid red;
top: 40%;
}
.bottom {
position: absolute;
bottom: 0px;
}
Edit:
With one little addition it did the trick.
.bottom {
position: absolute;
bottom: 0px;
width: 99%; /*
In this way the button stays right.
I am using position: fixed and bottom: 0 to affix something to the bottom of the screen. The name, however, appears to go off of the screen, on my 11" Air, and you can see the site here. I've posted my CSS code below for the div.
Broken JSFiddle: http://jsfiddle.net/MgdQv/
#credits {
color: #363636;
bottom: 0;
padding-right: 10em;
text-align: right;
position: fixed;
width: 100%;
opacity: 0;
-o-transition:1.5s;
-ms-transition:1.5s;
-moz-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
#credits:hover {
opacity: 0.8;
}
Add right: 30px (30px being the value of margin-right of parent body) and it should behave as expected.
Edit: and maybe remove padding-right: 10em. Forgot that I had desactivated it in Firebug before answering...
Also do not post link to a website: after you've fixed your problem, your question will become meaningless to future visitors of this question because the link will have changed... Please post relevant HTML and CSS reproducing your problem (and a fiddle)
You only must add an height-attribute to your #credits.
I'm trying to AP a div in the header of my blog containing a bg image and a link. I looks correct in Chrome, but incorrect in Safari and Firefox. I suspect it's not the AP div itself but other elements causing the shift, though I can't figure out what, and I'm using a reset.
Here's a link to screenshots show you what I'm talking about:
http://imgur.com/a/hP8dM
Here's a link to the website:
http://www.artyst-tyrant.com/blog
Here's the css I'm using:
#trex-blog {
margin-left: 435px;
position: absolute;
top: 50px;
z-index: 50000;
}
#trex-blog a, #trex-blog a:visited, #trex-blog a:hover {
background: url(../img/blog-trex.png) no-repeat scroll 0 0 transparent;
display: block;
height: 121px;
width: 356px;
font-size: 0;
line-height: 0;
overflow: hidden;
text-indent: -9999px;
}
Here's the html
<div id="trex-blog">Artyst Tyrant - Victor Beazzo Designer for Hire</div>
Designer by trade who's trying his hand at learning to code, but I'm by no means a pro, so please, go easy.
Thank you in advance for your help, it's really appreciated.
Chrome v18 on Win7 renders the image in the same place as my other browsers - perhaps you were browsing a cached version on chrome only?
The only caveat to absolute positioning elements is if they are wrapped in a relatively positioned element - then the absolute position is relative to the parent - http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I looked at your source code and didn't notice any position relative attributes on the parent elements.
I adjusted the css top attribute value to 20px and it aligned for me in all current browsers.
Right now, the portfolio section of my website has the top three images showing properly. But in the Opera browser, it "crops" the top and bottom of the rest of the images, leaving only the very middle of each of the images to show. All of the other browsers show every picture in the portfolio section properly. I've tried messing with the margin and padding on the pictures with no luck. If anyone can help me figure out what is going on, I would surely appreciate it! =] Click here to get to the website.
#portfolio {
overflow: auto;
display: block !important; /* aren't we kind… */
display: inline-block; /* …to IE6 :p */
}
#portfolio a {
float: left;
margin: 3px;
}
Try:
#portfolio a.cboxElement{
display:block;
float:left;
border:3px solid #fff;
}
To answer the "Why?" part of your question, it looks like there's a bug in the browser that's triggered by opacity on some inline elements. Setting the display mode to block will work around it.
Also: which version of Opera are you using?