My code is perfect for Chrome, but not for others ..
Look at pictures, the parent of ul has a margin-top to his child (ul). It's working fine for Chrome, but for others it's too much !
Chrome (it's ok)
Firefox and Safari (not ok)
I'm not using webkit or moz, nor transition or other property like that.
EDIT
Sorry I forgotten the code ^^
The ul is in .wrap-orange-notre-vision :
#section-notre-vision:before{
content: "UNE OFFRE QUI MODERNISE ET AMÉLIORE VOTRE RELATION CLIENT.";
text-transform: uppercase;
position: relative;
font-size: 1.4em;
font-weight: bold;
margin: 30px auto 0 auto !important;
}
section#section-notre-vision{
height: 555px;
min-height: 500px;
}
.wrap-orange-notre-vision{
margin-top: 925px;
}
EDIT
It was just due to WordPress 😐
Pretty sure each browser renders html and css slightly differently due to some specs in the browsers code. I cant remember exactly what the difference is, but i know that there is a small difference.
Related
I set up a simple example website to show you the issue that I'm currently fighting with:
http://examplesite.ohost.de/
In Firefox the site is rendering just fine, in the Dreamweaver, on my android phone and I think on other webkit browsers, the navigation bar buttons are cut off on the right and I think the buttons have slightly more width.
Here are some screenshots:
So what do I have to change to get a similar result to the one in Firefox in every browser?
edit:
I now tested it on the newest versions of Safari, Opera and Chrome and they are rendering it correctly.
You could use a fix size for navBtn, something like
.navBtn {
position: relative;
float: left;
line-height: 18px;
font-weight: bolder;
list-style: none outside none;
width: 100px;
}
This maintains element size.
I'm having an issue with inconsistency with inputs in chrome.
I'm using a big font-size, but setting the height and line-height to smaller to remove gaps above and below the text.
input {
font-size: 100px;
padding: 0;
margin: 0;
height: 80px;
line-height: 80px;
}
IE and Firefox seem to render it correctly, but chrome seems to add padding to the text of the input.
Fiddle showing what's going on here: http://jsfiddle.net/tomdickie/nZY8r/1/
EDIT:
To add a bit more clarity, to this here are some screenshots:
Firefox
Chrome
I'm trying to get Chrome to behave like Firefox (and IE) do.
try this and its woring here
HTML code
<input type="text" name="uname" value="223" />
and CSS code is
input {
font-size: 100px;
padding: 0;
margin: 0;
/*height: 80px;
line-height: 80px;*/
}
I've tested this code.
My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.
Here is the CSS:
input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
The margin-left command is working great in Firefox and Chrome, but not at all in Safari.
All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).
I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)
If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.
It's overridden by google.
If you do:
margin-left: 10px!important;
You can override that.
Or you could make your selector more specific (and hence give it precedence) by doing something like
td.gsc-search-button input.gsc-search-button {
margin-left: 10px;
}
Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.
I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!
In the end, I fixed it with more exact targeting. I had this before:
.phone{
background-color:gray;
}
This change fixed it.
div.phone {
background-color:gray;
}
By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
I have a minor CSS problem, but I'm having trouble fixing it because I don't have any computer handy with IE7 installed...
In IE8, Chrome, FF, etc. I see this (correctly):
but IE7 gives me this:
the HTML code follows:
<div id="hub">
<div class="title highlight">Faster, Cheaper, Better</div>
<p>PNMS...
the relevant CSS code follows:
#hub {} /* literally nothing */
#hub div.title {
font-size: 4em;
font-style: italic;
font-variant: small-caps;
float: left;
margin: 5px 0px 20px 0px;
width: 940px; /* same as parent container */
}
.highlight { color: #ff6633;}
p {
text-indent: 30px;
font-size: 1.3em;
line-height: 1.1em;
letter-spacing: 1px;
margin: 5px;
}
Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.
Can someone help? Thank you.
Found this somewhere, it may help:
CSS Double padding IE7 Fix
"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."
CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}
"And the fix…
Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous."
#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}
Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.
Found it. The CSS body tag had a line-height: 18px;
For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.
Ugh. I really, really hate cross-browser compatibility... I'm working on a Wordpress site for a client to create a popup box that appears just below the item I'm hovering over (using a custom shortcode). I have top set to 16px, and it works fine in Firefox. However, in IE8, it appears a lot further down. Even if I set top to "0", it still appears BELOW the containing blog, instead of at the top of it.
I also have a related issue, in that the font size in IE8 is about 2 pixels smaller. There is a <sup></sup> tag before this, as well, but removing it doesn't change much--the font size is still smaller in IE8.
Here is the page:
http://www.medicalmarcom.com/services/
Every question mark along the left side has a popup that appears when hovering over it (kinda like a tooltip). I need to make it work in FF, IE, Safari, and Chrome. The only one it doesn't work in is IE. Thankfully, he didn't mention IE6, so I'm not worrying about it unless he singles it out.
Here is the HTML:
<span class="questions"><sup>(
<div class="popup_content"><span class="popup">?</span>
<div class="popup_inside" style="display: none;">We’ll ask questions to understand your business, objectives, competitive situation, and positioning statement.<br />
<span style="color:#15398c"><em>Read More >>></em></span></div>
</div>
)</sup></span>
CSS:
.popup_content {
display: inline;
position: relative;
}
.popup_inside {
background-color: #FFF;
border: 1px solid #000;
text-align: left;
font-size: 12px;
color: #000;
width: 300px;
padding: 2px;
line-height: 1.5;
left: 0;
top: 16px;
z-index: 1001;
position: absolute;
display: none;
}
.popup {
position: relative;
z-index: 1000;
}
Ok, this is due to how ie8 is rendering the sup tag, I believe. It considers its baseline the same as the rest of the text, rather than above it. If you want to do this with just css, I'd consider rolling your own superscript class.
Here's a fiddle of something that seemed to work for me.
As an alternative solution, it seems to be rendering correctly in IE7, you could force IE8 into IE7 Compatibility Mode. Drop this line at the top of your <head>. I don't know what this will do to IE9, but it's worth a shot.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />