I have a search box using a mixture of floats of form/select elements.
The search is rendering fine in firefox, chrome, safari etc however IE8 is ignoring the margin and padding rules (tried both).
see here: http://property.begbies-traynor.com
The section in question is immediately below the slider, the search area.
When viewed in chrome for example, the Search submit button is correctly sitting just inside the main container whereas IE has it right up against the side.
Similarly, the Select elements are sat on top of each other despite there being adequate margin rules to separate them from each other.
Any help on this is appreciated.
It is also not working in any other browser not using the Webkit-engine (I've tested it in Opera and Firefox), as you are only including the padding- and margin-styles for Webkit:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* … */
}
If you want to see your CSS properties working in any browser, you should define them for any browser.
Related
When resizing the browser window in order to see how the elements inside the flexbox rearrange themselves, Google Chrome cuts one of them off at a very specific resolution. It works just fine otherwise. This doesn't happen in Safari or Firefox. The flexbox is inside a section with height: auto
I don't know what to try here. This is beyond confusing...
I've built a layout for a list of items, and I'm running into some line rendering discrepancies between Firefox and other browsers, specifically with my custom font. Firefox renders the text above where I'd expect the baseline to be within the line height.
Firefox rendering:
... while Chrome seems to be putting the text lower in the bounding box.
Chrome rendering:
I'm aware that Firefox & Chromium browsers have different default line heights, so I've set this explicitly. The lines are the same height to the pixel between browsers (26.88px), but the text is positioned differently within them.
You can see that I've adjusted the top padding to be smaller, which looks how I intend on Chrome; if I make the top & bottom padding equal, the text renders closer to an apparent vertical center on Firefox, but lands too low in Chrome.
Is there a way to address this, without doing browser-specific padding values? This is the site in question, the styling for this component can be found here, and my font-face definitions can be found here. Thanks for your help!
I ran my font files through the Font Squirrel Webfont Generator optimization, and this fixed up my vertical metrics! Using the Font Squirrel edit, I no longer need to apply different padding values to achieve a vertically centered appearance on Chrome.
That said, the optimized fonts are still rendering higher within the line height in Firefox. This is the case even when I'm using the default font instead of my custom font:
I think this means Firefox is just eccentric, and must be special-cased accordingly. Here's my CSS, which achieves approximately the same appearance in Chrome & Firefox:
.project-row {
padding: 0.7em;
}
/* appear vertically centered in Firefox */
#supports (-moz-appearance: none) {
.project-row {
padding-top: 0.75em;
padding-bottom: 0.65em;
}
}
It'll do. Please holler if you have any better ideas, and until then, this is the answer!
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 building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox.
I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though.
I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns.
Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.
Chrome renders:
Safari renders:
I very much like the Chrome way of rendering the columns, so I was wondering if there is a way to force Safari to render the site this way, possibly without altering the html layout at all.
notes: Firefox renders the same as Chrome and needs no fixing. I'm not developing for IE, so I don't know how that renders.
I had the same issue but min-height didn't work. I had the column-count set on a Bootstrap .col-md-12 container and this was the issue for me.
I added a child div with the class required and it worked perfectly
add a min-height to <ul> seems to fix the issue
nav ul { ... min-height:50px; } /* < add */
tested on Safari 5.1.7 (7534.57.2) for PC
bug is referenced here too: http://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1
I had a similar problem with the columns content showing up on Safari with a height of 1px. I added "min-height: 100%" to the element and all looks good. I also have "height: 100%" on the body/html and containing elements, assuming this is how I got it to work properly.
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.