i have a website in which i am trying to position (using CSS) a certain on the page. the is absolutely positioned and is located inside a relatively positioned paernt .
on firefox and even IE it looks ok but on Safari, things get messy and it shows 5 pixels lower than it should. i have tried to figure out for days now what is wrong there but cannot seem to see it.
you can find an example link to the problematic page here:
http://yaronattar.com/index.php?option=com_content&view=article&id=117:the-new-lovers-2010&catid=51:the-new-lovers-2010&Itemid=242
the problematic is the one conaining the "previous/next" navigation at the bottom right corner of the page.
anyone sees what is causing the trouble here?
thanks
This will target webkit browsers only (Chrome, Safari and I think a version of Opera too)
#media screen and (-webkit-min-device-pixel-ratio:0) {
/Chrome and Safari CSS here/
#id-name {
position:absolute;
width:100px;
height:100px;
left:100px;
bottom:100px;
}
}
Related
I have this old website that needs to kinda work on mobile. The whole thing is built on tables. On mobile I need the columns to take up 100% of the screens width and essentially go on a new line. In chrome, IE, FireFox.. it just works. However on IOS and Safari it will not go on a new line and the rest of the columns just crunch into the corner (looks real bad)
CSS I have tried: td { display: block; width:100%; float: left; }
Anyone know why on safari only it will not go on a new line?
For anyone else stuck with this issue. Safari will override table styles (without notice) unless you add <!DOCTYPE html> to the top of the file
I created www.studycraft.net but then noticed that in Internet Explorer the shadow that goes across the background is at an angle (In Safari, FireFox and Chrome it's a straight vertical edge). I asked on the theme's developer's site how can I make it straight and he had told me to add this to my custom css box:
.angled-background {
transform: initial;
}
(this may have fixed it for Chrome and/or Firefox, I had only really tested it with Safari and IE before having this "transform" property set)
This does seem to be the right element because this is where he fixed another issue where this shadow wasn't always (certain window sizes) wide enough to cover the title and made that text hard to read against the non-shadowed background - my .angled-background actually looks like:
.angled-background {
min-width:1250px;
display: block;
transform: initial;
}
But in any case, this doesn't seem to fix it for IE - the shadow stills has an angle and it even cuts back in at a certain window sizes to make a strange looking corner to the shadow and then looks really bad. Here's a pic:
thanks for any help.
I heard back again from the theme's developer and he provided the solution - it should be "transform: none" instead of "transform: initial". So the correct code is:
.angled-background {
transform: none;
}
I'm stuck on a margin/positioning issue where I have a div that will not cooperate between Mozilla and Webkit browsers. The element in question is at the bottom of the page http://clifford-stage.scholastic.com/Calendar where there is a black box with a top-right-border with a radius. (editor's note about posters...) In mozilla the border does not break past the bottom edges and displays as desired, however in Chrome and Safari, the bottom flows past the edge, and I've played with every margin scenario but cannot seem to get it to agree between browsers.
I'd appreciate any help. (BTW, this is NOT my page design...)
With Firefox, you need to explicitly declare X & Y coordinates when using position:absolute;:
#yourDiv {
position:absolute;
top:0;
left:0;
}
Otherwise you will get quirky behavior. It is also proper browser behavior, Firefox is just stricter about it than Chrome is.
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
I'm having a CSS styling problem between Chrome/Safari and Firefox. In both Chrome and Safari, the hidden drop down is correctly positioned, but in Firefox, the subnav menu is off by a few pixels. After looking into the issue with the inspection tools of both browsers, it seems that Firefox is making the #main_nav_bar ul 10px wider than Chrome. The issue I'm having is that I'm not sure how to change this while not messing up the way the nav bar looks.
The link is http://www.tamidgroup.org.
Any suggestions on a fix are much appreciated.
Definitely add a doctype in there. You could also target those browsers with a media query.
Example for chrome and safari
#media screen and (-webkit-min-device-pixel-ratio:0){
//add your browser specific code here
}
That way you can target specific issues you see from one browser to the other.