I am working on a wordpress project. The issue is though the container where the content area and sidebar along with the top logo positions seems perfect in chrome with 30px margin-top.
But in firefox the margin seems to go down more, though the margin value is same. Any recommendation for FF compatibility with css would be great...
Hard to see without code, but you may have some problems with the two browsers' base CSS styles being different. You could try using a thing like normalize.css as a way of normalising these styles before your own stylesheet.
You could also use the web inspector/Firebug in firefox to see what surrounding elements have an effect on the positioning.
Related
I have padding: 0 40px 0 40px on the main element of each page.
In chrome, the layout looks correct with the correct padding. Here the image shows the correct padding using the developer tools.
http://imgur.com/BButZht,TuOHanN
However in IE and safari, the padding is not present and the text/image are shifted to the outer body element.
http://imgur.com/BButZht,TuOHanN#1
I cant figure out why this is happening. The IE developer tools don't help me much either
Same padding issues for the home page and category pages.
www.luminoto.com
Thanks
IE does not have display:block in its browser stylesheet for the main element, so you have to add it explicitly in your stylesheet – otherwise it’ll just be treated as an inline element (and all the content will just “flow out” of it).
You can add it directly to your formatting for .photo_main – although the better place to do this would be inside a “reset” stylesheet meant to equalize such browser differences.
Not sure if that’s the same issue Safari is facing, but give it a try and see if it fixes that as well.
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
To start off with, I'm quite new to CSS still so I hope I haven't done anything horrendously stupid.
Basically, I have a design I'm doing built using Pure and the width is playing up in Google Chrome, while it works as intended in Firefox.
Here's a link to what I've done: http://egf.me/Rushd/rushdtest.html and screenshots:
Firefox: http://i.imgur.com/mn3GIbT.png
Chrome: http://i.imgur.com/44jLC6J.png
If you have a look at the page source, I haven't really done anything in my own CSS to change anything (I commented it all out as a check just to be sure) so I'm guessing I'm somehow using Pure wrong, since their own site renders fine on Chrome.
Also, inspecting the elements with Chrome's dev tools show that the div elements which should be next to each other have widths which add up to less than that of the parent. And nothing there seems to have buffers or padding. Also, if I manually reduce the widths to be very very slightly less, Chrome seems to magically fix everything.
The problem is that a space is rendered between your child divs.
The issue is neither margin nor padding - it's actually caused by the whitespace between your div tags in the HTML code!
Place the tags directly adjacent to eachother without any whitespace and your problem will be solved ;)
Example code
<!--whitespace in HTML = renders as a space between the divs-->
<div></div>
<div></div>
<!--no whitespace in HTML = renders edge to edge-->
<div></div><div><div>
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
I have a problem with our website at www.eat.vn. The site is fine in Firefox, Chrome, IE8 & IE9 and Safari, but in IE6 and IE7 we have a problem with a main design element.
Please see the attached image and you will understand that the stacking effect on the tabs is not what I wanted. I have tried to work around this bug, but can't manage to find a solution which does not mess up anything in the other browsers. Any help would be much appreciated!
I don't have IE6 or IE7 to hand to test this, so I'm shooting in the dark somewhat.
My guess is that the issue is related to the container element for the tabs (<div id="steps">). This has a style of float:left;, which I don't believe is necessary; it doesn't need to be floated since it doesn't have any other elements next to it.
However this float may be causing the IE6/7 bug; it looks as if this element has decided that it should only be as wide as one of the tabs inside it, which is then causing the tabs to wrap beneath each other.
I would therefore suggest taking the float:left away from this container element, and see if that helps.
(The tab elements inside it should still be floated, of course)