I have a problem with some divs on Safari, the margins are completely messed up.
The weird part is that it works perfectly fine on Chrome & Firefox. If I implement a fix made especially for Safari, it gets messed up on the others.
Help ?
Thanks !
The problem is caused by a missing left declaration. Add this to your CSS:
#pull_link {
left: 50%;
}
You may have a small error/errors in your code that is tripping you up (e.g. perhaps you are missing a closing tag that would cause container collapse and then your clear fix is not working). Check safari developer tools against chrome developer. You should be able to locate the problem that way. Sometimes one browser will function with an error another will not. Without more information it is hard to be conclusive here. Have you tried w3c validating the html http://validator.w3.org/ ? You can catch missing syntax that way also.
Related
I'm trying to use the position fixed css on a simple one page website with vertical scrolling but am facing problems with IE9, it's like it's ignoring the fixed property, you can see the website here
http://cairocubicles.com/sandbox/mahaly-iphone/
looks right on chrome, firefox.
Appreciate the help.
Yehia
Try adding a doctype to make sure IE9 isn't going into quirks.
This took me a while to figure out.
I was writing some javascript using which contained code to write to console.log. Never noticed it was a problem as i never use IE and nothing appeared to be broken in FF or chrome. I had the js above my declaration and that was what was causing the error. you shouldnt put anything browser side before that declaration.
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.
I have run into a really odd bug with FF3.5.9 (and potentially lower) where it is moving the input:text below the input:submit. The strangest thing with this is that it is working on IE6/7/8, Chrome, Safari and Firefox 3.6. Here is a test page so you can see how it is marked up: http://paste-it.net/public/s6479e6/
I can fix the issue for FF3.5.9 by adding padding-bottom (15px) but this then puts the other browsers out of action.
Has anyone else had a similar issue and found a fix? Seems like such a minor issue but I just can't find a fix for it and I am not really into having to absolute position the inputs as that seems too hacky!
Thanks for your time,
Ad
FF 3.5.9 had some strange bugs in it. In particular a javascript bug that threw a legitimate sounding error, and FF being my main Javascript debugger I spent 2 hours down a terrible time-suck.
Checking deep in the documentation I found out that FF is conforming to some specification that no one else is. Right now FF is not in a great state for consistency, so you may have to break the habit of believing that FF is always right and the other browsers are wrong. You may want to keep your finger on the Mozilla blogs and see what they are saying so you have fewer surprises.
So basically what Alex said, but be more wary of FF for a while.
So it looks like there isn't a clean option ... if anyone else ends up having this option I ended up just floating the input:submit. Not nice but it works.
Thanks all for your help!
EDIT: vertical-align:middle did the job!
It seems that firefox 3.5 has a browser defined "line-height: normal !important" that makes it impossible for you to center the text via setting the height/line-height the same.
line-height is the same height as the input?
if not, try and set it.
for example:
input[type="text"] {
height: 50px;
line-height: 50px;
}
I'm having some problems with a certain piece of code which sits in my site; this error only occurs in Internet Explorer 7.
Rather than post all my HTML/CSS markup here I have put up a version of the site here.
As you can see I have "Widgets" in columns, for some reason IE7 adds an extra space under the Widget Header while FF displays it fine without any space.
This error does not occur in IE8, FF3, Opera, Safari or Chrome.
Can anyone suggest why this occurring and if possible, a fix?
Thanks in advance!
Add this css to wgt-wrap and it should behave.
zoom: 1
Google for hasLayout for explanation.
[EDIT] This discussion provides more insight into this IE bug. Why does Internet Explorer need the "hasLayout" flag?
Unfortunately IE 7 doesn't run very well on Ubuntu so I'm unable to reproduce your error, but have you tried resetting your CSS with a stylesheet like Reset CSS?
There is also a great site about browser quirks that you might want to have a look at.
Did you start by zero'ing out all of your element by doing a CSS reset? I see you have a few different elements in your div, it's possible that one of these has a default marin in IE7 that is throwing everything out of wack...
The problem is on my blog - blog.dynback.com.
Right panel goes down in Chrome, and stayed normal in all other browsers including Safari 4. And without Firebug its hard to find where is the problem.
You have errors in your markup, fix those first, at least the missing end-tags.
Validate here: http://validator.w3.org/check?uri=http%3A%2F%2Fblog.dynback.com
I think it has do to with the JavaScript. I've noticed the issue appears after code snippets are highlighted. Chrome uses a different JavaScript engine than Safari. Maybe that's the problem.
Try to shrink the width of #main_content