I've customized the CSS transitions on the Media Grid plugin and they're working everywhere except IE8. That's fine. I can live without the transitions but I still need the div containing the individuals name and title to appear. Right now they don't show up at all. I've tried everything I can think of but I can't find the answer. Could someone point me in the right direction?
http://clients.weinsteinau.cgvcreative.com/team/
For IE8 I'm afraid you will have to make a separate stylesheet and start from your class .overlays than dig deeper into those divs, you will have to change positioning, height and width. There are a few elements without dimensions and IE8 does not like that. Let me know how it goes, and oh yeah good luck! :)
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).
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
I'm pretty much as new to CSS as it gets and what I'm trying to do right now is just design a very simple/basic splash or landing page for a small business.
Here is the url for the site: My site
Now if you go on any browser, lets say google chrome and you zoom out or in (ctrl -/+) you will notice that the website layout starts to "break apart" in that all my divs just start shifting around. I obviously dont want this, and just want the site to remain the same when people zoom in or out, pretty much like all good sites haha.
I know it must have something to do with positioning, but I can't figure it our for the life or me. Last night I spent hours browsing similar questions but I can figure it out.
I'm not posting the code as to take up more space, I'm assuming since I gave you the URL you'll be able to retrieve the code from there.
I also have a few more, smaller questions:
1) if you open my site on chrome, or ie you'll notice that after the "terms and conditions" on the bottom of the page, the site ends, like it should. however, if you go on firefox, you'll notice that after the "terms and conditions" the background so to speak continues for a while. why is this and how can i fix it?
2) you'll notice that on different browsers positioning of elements is slightly different.
most noticeably if you look or chrome/firefox and then internet explorer 9 you'll notice that the "terms and conditions" are slightly higher than in chrome or ff and thus slightly touching the main content area. is there a way to fix this?
3) what is an efficient, effective way to center divs? For example, I want to center the "sign up" button perfectly centered relative in the main content area. ive pretty much just been eyeing it out and using relative positioning to center it. what is a more accurate way to center it?
Thanks, and sorry if these questions seem a little redundant. if you need any clarification on anything I'll be monitoring this question like a hawk.
Cheers
When you zoom in or out, you will encounter issues because of rounding and text rendering. It is a good idea to make sure the layout can survive a bit of stretching without breaking down.
Relative positioning is affected by issues mentioned in #1, and therefore unreliable.
Look into using something to remove the properties that the various browsers will apply. You could use a reset to give you something more workable or try to normalize the values to make them more even between browers.
For (horizontal) centering you have some options:
If you have a container with "text-align:center" it will center all child elements that are inline-blocks or inline.
If you want to center a block element, you can use "margin: 0 auto" to center it horizontally and remove vertical margins.
If you want to center an absolutely positioned element, you can use "left: 50%, margin-left: -(width of element/2)".
In addition to attempting to get rid of relative positioning, I would recommend that you do not explicitly set the height of the body element. Generally you want the elements to manage their own size, that way they will be more robust.
If you use "position: relative" now because that is what you know how to use, I would suggest you try using "float: left" (or right), or changing the display type (display: inline-block). That may help you get started in the right direction.
not sure for your points 1 & 2, but as for 3 what i've come to use is the following have the div i want to center and then use width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, where some percentage is the width I want to use.
a couple suggestions before go into fixing the zoom in and zoom out issue.
Don't use <div> to wrap around text.
Use <h1> tags for header
Store your CSS in a separate css file.
You defined the header section that's great, but do that for container and footer as well.
Comments! That would make the job much easier for people who try to help you.
Please someone explain me css positioning properties in easy to understand plain english?
With examples.
I have been struggling to understand how css positioning work in creating a layout and alignment.
A quick search on Google has lead me to this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
While there are many tutorials on CSS positioning such as
http://www.brainjar.com/css/positioning/
http://www.alistapart.com/articles/css-positioning-101/
http://www.tizag.com/cssT/position.php
http://www.mako4css.com/Tutorial.htm
The problem is that there are a number of ways to position elements on a page, you can use float, position relative divs with absolute nested divs, then you have margins and padding, as well as negative margins. Heights and widths in pixels percentages etc. It's not something to learn from a single tutorial but rather experience.
My suggestion to you is install Chrome and use the developer tool on a basic CSS layout, or FireBug in firefox to learn how CSS works on simple layouts, here you can find many styles of CSS layouts to play with http://www.maxdesign.com.au/articles/css-layouts/
I've built a webpage, everything looks great in IE7 and upwards but in IE6 it's looks bad.
I have a whole div which has a background image that's not even showing up.
Why could this be? Are there common things that tend to not work that could be in my CSS? I don't normally support IE6 so don't usually have to figure these things out, but my client has specified that they want to work in IE6.
Here's the site, yep - quite a nice site in modern browsers! http://www.replyonline.co.uk/ie6sucks/index.html - feel free to look through the code (there's a IE6 specific stylesheet at view-source:http://www.replyonline.co.uk/ie6sucks/css/anythingslider-ie.css where I've solved some of the existing issues.
Thanks
I don't have an IE6 install with me here, but here are a few hints:
It's most likely a positioning ('hasLayout') issue. Try setting zoom: 1 on the missing DIV or its parent(s). The same goes for position: relative or a combination of both.
Also, check some of the content-hiding bugs on PIE: http://www.positioniseverything.net/explorer.html
You can use the Internet Explorer developer toolbar to try some of this out: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535. Keep in mind though that some bugs will only appear or get fixed on a full page reload, and not while fiddling with the CSS in the developer toolbar.
I also use XRAY ( http://www.westciv.com/xray ) a lot to see how my elements behave.
For more info on 'having layout', see http://www.satzansatz.de/cssd/onhavinglayout.html.
It's tricky to debug since I don't have a working copy of ie6 on my machine, only ietester but there are known issues with ie6 where it doesn't calculate sizes properly in order to display background images properly.
The answer generally is to trigger hasLayout on the element and the easiest way to do this is using position:relative. I'd give that a go before anything else.
I would also recommend having a look at the html5boilerplate stylesheet to see if there is anything there that you can make use of. The reset/reassign css in there is simply brilliant and irons out a lot of css issues.
Best of luck!
1 - Make sure your site validates: W3C Validator Currently yours doesn't ( 146 Errors, 16 warning ).
2 - There's an annoying bug in IE to do with margin/padding, if you have any to the left or right of an element, you may need to do display: inline or inline-block;
I've found little things like this can help.
Looking at the W3C results, it looks like you may have too many closing div tags