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
Related
Trying to find an answer to why chrome on mobile phone shows the same code differently than desktop chrome (and firefox, edge, opera). The <a> text has a different position in <div> container.
PS. Ive marked "BOOKS" on the screenshots to make it more visual. On desktop view <a> is in the middle, on mobile - to the top.
desktop:
mobile:
HTML:
<div class="topbar" id="tb-grad">
<a class="logomain" id="lm-shad">BOOKS & DVD</a>
<a></a>
<a></a>
</div>
CSS:
.topbar {
max-width: 600px;
font-size: 40px;margin: auto;
border-radius: 10px;}
.logomain {
font-family: 'Luckiest Guy', cursive;
font-size: 40px;
color: yellow;}
I went through the exact same problem and after many tests and missed hours found that fonts change in Chrome Mobile X Chrome Desktop.
I know i may have arrived late, but if anyone experiences this problem try switching the font used for another. A good place to find fonts for this test may be the Google Fonts site.
Test some sources for you to observe this behavior.
If you wish, you can control the highlight colors using the following:
::selection {
background:#BBD3FD;
}
::-moz-selection {
background:#BBD3FD;
}
This will ensure that the background color of the highlighted segment is the same across all devices.
#BBD3FD is the pale blue that Google Docs uses for its highlight background.
I am having a page in which heading and drop-down both are inline but that page looks different in Chrome and Firefox even though HTML and CSS classes are same, there is no specific css or style used for a specific browser.
heading is not in center in chrome , but in Firefox heading is in the center and drop-down is in right without any space.
Following CSS
.h2 {
padding: 9px 7px;
margin: 0;
color: #2b6dd1;
background-color: #FFFFFF;
font-weight: 600;
font-size: 22px;
text-align: center;
margin-left: 25% !important;
}
I wants heading in center and drop down in right in both the browsers chrome as well as Firefox.
Please remember the I used searchable drop-down .
They are diferent web navigators so they dont read the code the same way, you must add some prefixes to make your code readable for all of them.
-webkit //chrome
-moz- //firefox
-o- //Opera
-mz- //Internet Explorer
The most common web navigator is google chrome, because it works better and has more functionalities (I´ve worked with Chrome and Edge and I recommend Chrome).
I leave you a link here to a web where u can learn more about this
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 am trying to make a website and i want to clip(mask) text from navbar. The text becomes like a hole in the navbar and background image is seen through it. How to do this?
JSFIDDLE
//css code
text{
background-image: inherit;
color: transparent;
font-size: 20px;
top: 0px;
position: relative;
margin-top: 10px;
padding: 0px;
}
There's a CSS property called background-clip that seems to do do what you're looking for. It's is unfortunatly not supported before IE9 (but works on other main broswers : Chrome, FF, Opera, Safari).
Depending on the importance of this implementation you can always have a different rendering for older IE versions and use background-clip in any other context.
See this Fiddle and comment to tell me if it's what you were looking for!
EDIT : I misunderstood the initial request. I'll try to find a suitable solution for the actual question! Sorry about that.
I have a legacy web application that is targeted for IE 6 and is being reskinned. The buttons are having the default browser button look replaced with a blue button image.
My following HTML and CSS works fine on IE 8, but not in IE 6.
HTML
<button id="add">Add</button>
CSS
button
{
width: 110px;
height: 28px;
background-image: url('../images/button.png');
background-color: transparent;
border: 0px none #ff0000;
cursor: hand;
font-family: Myriad Pro, Helvetica;
font-weight: bold;
font-size: 12px;
color: #ffffff;
}
Using CSS, how can I get the background image to show in IE 6?
Ideally the fix could be put in an ie6.css to make it easy to remove when IE6 support is eventually dropped.
Please no comments about dropping support for IE6. This legacy application is designed only for IE6 and used internally at an organisation where IE6 is the ONLY supported browser.
If the recesses of my memory on IE6 serve me well, it does not recognize background-image on a button element. Nothing you can do about it.
Although, again based on memory, if you can change it to an input (attribute type="image") you might be able to get the effect you want even on IE6.
Using the background CSS property instead of the background-image property does the trick as described in this blog post (excerpt below).
The background-image property that worked in Firefox 2.0 just did not
have any effect on IE6. After a bit of googling, I realized that the
background-image property will not work on IE and that we need to use
the background property.
This is what works for me:
button
{
background: transparent url('../images/button.png') no-repeat top;
}