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?
Related
I'm using an accordion slide in my site and I've noticed that on IE and Firefox I get a weird gap of 20 pixels at the top of the slider.
I've checked the CSS back to back for some padding to the UL or the LI or even the slider itself but couldn't find any. It works perfectly on Chrome.
Read many post suggesting this to adjust the line-height but it didn't work for me.
How can I resolve this issue?
http://www.rom.guywalderonline.com
TRY THIS>>>
#slider {
height: 0px; /*IMPORTANT*/
background: url('../images/romold.jpg') top right no-repeat;
background-color: #434749;
}
This 100% works, if you have any problems please comment back....
If you add the following code to your template css file, it willl remove the gap:
#slider .row-fluid [class*="span"] {
min-height: 0px !important;
}
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.
I've been working on a print page for a client. After playing around for awhile I've found I get an extra blank page. The unusual thing is that if I select "Outline Block Level Elements" in Web Developer for chrome, the extra page disappears. This is all the CSS being used on that page right now:
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
height: 296mm;
border: 1px solid black;
margin: 0px; /* this affects the margin on the content before sending to printer */
}
.print_A4 {
margin: 0mm;
padding: 0mm;
height: 270mm; /*A4 Size*/
width: 210mm; /*A4 Size*/
}
.A4_content {
margin-left: auto;
margin-right: auto;
margin-top: 44mm;
height: 210mm;
width: 165mm;
}
I've done a lot of googling but I can't see anything related to this. The body border clearly shows the div ending before the end of the first page, however I still get an extra blank page for some reason.
Could it be there is something adding only 1 pixel somewhere? Since you define the page to use full 270 mm height. Even one margin/padding/border would add a new page.
Does it still happen if you decrease this value? If not, then I suggest you take a small bit off this value (you don't use full height anyway.) You can add page-break: after to .print_A4 to prevent a next page from taking the little space left on the previous page.
Really late answer, but I think my contribute can help someone with the same issue I came across making use of CSS to setup a page for printing:
creating a dynamic html content and appending it to the body element with the purpose to print only such content, I realize that only Chrome (version 46) and Opera (version 32) creates an extra blank page at beginning while printing, this only happened when the content height was greater than the page height.
The solution provided by #mewiki solved me a 2-days-of-research-and-test problem.
Indeed Chrome and Opera seemed to have default margins and setting the following rule:
body {
margin: 0 0 0 0;
}
solved the frustrating behavior which was not encountered in other browsers.
Old question, but for people with the same problem here is my solution that fixed it for me.
I found out that the margin-bottom of the body must be set explicitly to zero (Chrome and Safari seem to have a default margin).
body
{
margin: 0px 0px 0px 0px;
}
div.page {
margin: 10px 10px 10px 10px;
page-break-before: none;
page-break-after: none;
page-break-inside: avoid;
}
For each to be printed page start with a <div class="page"> and set the page margins there so the page looks nice.
So because 27.9cm turns into something like 1423.03px I suspect it's causing the print renderer to display an additional pixel. Adding this to my page fixed the issue.
.page-a4 {
width: 21cm;
height: calc(27.9cm - 1px);
}
For anyone dealing with multiple pages. I added each page content in sections then used this:
section {
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
I had a similar problem where the introduction of a page break caused a blank page.
I don't have enough reputation to comment on wiredolphin's post, but using that suggestion, the following worked for me
html, body {
margin: 0 0 0 0;
height: 99% !important;
}
.page {
height: 100vh;
page-break-after: always;
}
I know this doesn't answer the original poster's question, but it's pretty old, and this might help someone.
Also, thanks wiredolphin! You led me in the right direction.
#page {
size: auto; /* auto is the initial value */
margin: 12px; /* this affects the margin in the printer settings */
}
I was facing the same issue and Neograph734's answer gave me an important hint.
I was also getting extra blank pages, and the only thing that worked for me was adding this rule to my css (for print)
*
{
box-sizing: border-box;
}
Then I no longer need to worry about having an extra pixel added when using margin, padding or border.
Once I've added that rule, I only had to adjust the boxes positions and everything worked flawlessly.
I have got rollover images setup on a site i'm building using css background images like so:
.rollover a {
display: block;
width: 400px;
height: 400px;
background: transparent url(hover.jpg) no-repeat;
}
.rollover a:hover {
background-position: -400px 0;
}
This works perfectly on all browsers however on the iphone i seem to get 1px extra on the right hand side (so it's showing 401px rather than 400px) so I end up with 1px of the rollover image displayed on the main page which is obviously incorrect. If anyone could suggest any reason why this might be happening i would be immensely grateful.
Thanks very much as ever everyone!
Dave
Try adding this .rollover a {overflow:hidden}
I have an anchor tag with some simple CSS:
div {
background-color: gray; /* for debugging */
}
div a {
display: block;
padding: 6px 4px 6px 7px;
background-color: red; /* for debugging */
}
In Firefox, the anchor (in red) is clickable even outside of the text because of it being display: block with some padding. In IE7, when I hover over the red area that is not text, the anchor is no longer a link there.
Try adding zoom: 1 to the element. This gives the element hasLayout, which is not only the source of 60% of all IE bugs (according to a survey I made up to make this point), but also tends to plague block-level anchors.
Somehow a combination of zoom: 1; position: relative; seemed to have worked for me. So buggy!
zoom: 1 worked for me without position: relative, however display: block was set on my a elements.
Use zoom: 1 !important; worked for me.
I have 2 nav bars on my pages at http://gvtdev.davebezaire.com. Setting zoom:1; display:block; caused one menu (along the left) to behave properly. The other (across the top) will not work right even when I add position:relative; width:100%. For now, I've set set up a:hover {text-decoration:underline;} and that will have to be good enough unless someone has suggestions for me.
As a fairly new web page developer, it really is disheartening to learn how much of my effort gets expended on fixes for IE!