http://www.crtaci.info/
I have some absolutely positioned menu in footer.
Tested in FF 3.5.3, Safari, IE8, Chrome... But in Opera I'm getting a big gap below that menu in the footer.
ps title is margin problem, because I think it is some margin issue... :)
Opera has too small a market share for me to design specifically for it, but this page has a solution that should work, but it doesn't work on Opera when you resize.
http://www.electrictoolbox.com/html-css-footer/
You may want to look at what the author does, and see if you can understand what you are doing differently.
Related
Out of the blue, EVERY browser shows the same problem. The left-most column is squashed and refuses to expand. It makes it impossible to edit the template options. Any ideas? thanks :-)
This looks like a glitch with Shopify and would be better addressed by opening up a support ticket with their support team
Note: If you shrink your screen width to 599px wide or less, the sidebar should expand to be 100% of the window width - this might help if you're in a pinch and need to make updates right now
I'm using Font-awesome in my project, and every icon is aligned in the middle of the line. On Chrome, Firefox and IE, They are aligned corretly, but on Safari, the icon drop around 3 or 4 pixels.
I inspect the icon and in every browser, they are render and ocupate the exactly space they should be. But in Safari, they are rendered with extra top size, a transparent padding on top of the icon. It's not vertical-alignment or line-height problem, the character itself have this "transparent padding" on top.
That seens silly, but on a huge project, every icon is aligned 3/4px down than it should be give me a lot of headache.
One possible reason is that you have a different default line height in the different browsers. Try explicitly setting this to see if if it makes a difference:
CSS
i{
line-height:20px;
}
or even
i{
display:inline-block;
}
depending on the specifics of your styling, you might need to also set a class on the i tag, e.g.
i.icon-class{ ....}
Good luck!
I want a padding of 10px on my select tag. With a text-indent I can make the padding-left work on Safari. But I want a padding everything not just left.
Is there any way to have it work normally on Safari? (I can't understand how something so elemental can be an issue nowadays!)
try -webkit-padding:....that should work. here's Apple's list of properties that safari supports...I don't see any differentiation between safari and mobile safari, but I know there is some...https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
I've found a rather interesting mishap here.
I have a negative margin on my navigation as I wanted it to sit specifically. All appears fine in FF, but in Safari my content is jumping up to where my nav is, as if my nav does not exist.
I tried playing around with the numbers, when I change it from -77px to -55 the content jumps where it's supposed to be (but obviously my nav does not).
Here's a link to my code via pastebin.
Any help is much appreciated!
Oh, the site is here
Thanks
You've got a few problems with the layout design of the site that are causing the problem, I think. It is having issues in Chrome as well.
First, your nav isn't contained in its own div, which doesn't really fit in with the design pattern you're following. Consider a redesign with the following:
div wrapper
div header
div nav
div content
div column1, etc
div footer
div wrapper (end)
This will give you much more control over the layout, and you'll make changes on the nav div instead of the ul. Your clearing divs aren't completely necessary as you're not floating any elements, but I think you're using them to create white space - either use margins or assign the nav element a height and your original issue should be resolved. I hope this helps.
Anybody familiar with this bug with box-shadow in CSS3?
It renders ok at first. But when scrolling the page up and down(so the shadows goes in and out of visible area) the shadows from the horizontal lines does error and needs to be reloaded to render right. I experience this only in Opera, and not in IE(where I use css3pie.com).
Take look at this example: http://www.gatzschmann.no/beta/
Anybody got a clue why? This does not happen when viewing other sites using box-shadow.
Regards
Petter Andreas
This is a redraw painting bug in Opera. We're aware of this issue and we'll fix it as soon as we can.