Has any of you had a similar issue to this?
I have two selects on my page. The top one seems to be displaying some weird padding issue but I cannot see to sort it out:
Their CSS and HTML is exactly the same other than the text that is the values for them.
I have tried defining line-height etc but nothing seems to work.
Thanks
Related
I know this has been asked many times, and I have been searching for the answer in a lot of places but I can't seem to fix my code. Thank you for reading this because I'm going crazy here! First I had a different z-index problem with safari, than another with explorer, but now the z-index problem I'm having with mozila I can't fix in any way. I code in chrome, where it seems to work perfectly (for me it seems at least!)
I believe now it works more or less fine in most browsers but not on mozila. The idea of the page is to make (only with CSS because that's the only language supported by the website) a flipping book of several pages. I see some examples around of CSS only flipping cards (only one page), but not a book of more than one page. So I essentially overlap several "cards", in order to give this effect. You can see the demo from codepen here: pkrein/pen/qBOewem
Btw I do know this code is not as clean as it could be, but that's the way I figured to make a fuction like that works only with CSS, and I hope it will make sense for you.
Ok, so the matter is, the content inside the book pages is not "scrollable" on firefox. I guess this is indeed a z-index problem, because when I move any page outside the book, that is, from behind the rest of the content, it scrolls fine.
Let me know if I can give any more info that could help you understand my issue!
I figured a possible solution for this. It's not quite the solution for the problem itself but it's something that can make what I want to do work.
The problem was: (what I had to remove in order to make it work):
(1) The div #content-holder holding all the text inside the flap
(2) The div .preparation-text inside the .preparation (that's the text I want to scroll). That was a scrolling div (.preparation) inside a non-scrolling div (.preparation-text). I always add a scrolling div inside a non-scrolling div in order to hide the scrollbar, by adding a high padding-right to the inside div. I know I can use code to hide the scrollbar but it do not work in all browsers.
How I fixed:
(1) I just removed the #content-holedr divs, since it was not strictly necessary.
(2) I removed the .preparation-text and transformed .preparation into a scrolling div. Then I just covered the scrollbar with an image of the same size and colors as the background (a print of the layout).
I'm trying to modify a default select box using CSS. I've already done it. But, some problems are happened at firefox. What I've done still now:
It's the perfect result on all browser except firefox and IE
At firefox, there are the problems:
(1) There are an unexpected border on the right side of the select box
(2) Padding of text of select box is much bigger than other input field.
At IE, same problem happened. There are unexpected and much clear box at the right of the select box:
How can I remove that unexpected line/box from firefox and IE. Also, what can be responsible for the padding problem at firefox?
Well, I've used this tutorial's concept to customize the select box using CSS only. And I've put my code at
jsfiddle.net/w9kFc/1/
(I can't add the select-icon image at jsfiddle from external link. So, I've taken the screenshot locally. But, I've given the image's link at the jsfiddle code. )
This seems to work in IE10: jsFiddle
Added a label around the select.
Replaced the text-indent with padding.
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
I am currently developing a new website and have problems with IE7. First image is what it should look like. Second image is what IE7 renders (I use IETester to test older IE versions).
The first problem is with the white background which is applied with the following trick. There is a div that contains both left and right column with background-color: white; The left column has the same background as the page (and some padding-right) so that even if the right column' height is less that left's they appear to have equal height.
The second is with the list (ul) below the dummy text, which appears really messed up.
At first I thought that this would be easily solved with some "clear: both" here and there, but it didn't. I've tried lots of things but with no luck.
Any idea what I should do?
Tia,
Nikos.
Modern Browsers:
IE7:
Ok, I solved the problems mentioned, after I read some articles about hasLayout. By applying specific width or zoom: 1 (there are other ways too in the previous link) to certain divs that didn't wrap or clear properly, everything seems ok now.
I'm trying to get familiar with CSS but some of things that are happening seem rather arbitrary.
For example:
http://jsfiddle.net/stapiagutierrez/48yGU/24/
Why is only the first and second divs displayed (playerinformation and centerad), but not the third one? I thought divs were stacked vertically unless told otherwise via floats or what have you.
Any suggestions?.
I just want three div, organized horizontally within the middle vertical div called middle.
My guess is #rightad is being removed by Adblock, or an equivalent. That's what's happening for me. If you disable your adblocked, I bet it will show up.
All worked for me (in Firefox), then installed AdBlock and the #rightad disappeared. Disabled adblock for the page and it reappeared again.
Alternative quick test would be to try your jsfiddle in a different browser and see if its all there.