I have a weird problem whit my css and I cannot find a solution on the net…
I have this css for my “submenu” of the navigation bar on this site: http://ahornung.tk when I look at the submenu in every browser except Safari it needs a margin-top: -43px; for it to look ok but in Safari it does not…
Does a css detect web browser and ignore css if Safari rule exist?
.submenu {
position: absolute;
z-index: 1000;
display: none;
left: 100%;
margin-top: -43px;
border: 0.5px solid black;
}
Update:
In Safari it looks good whit out margin-top: -43px;...
Difficult to tell exactly what is going on but rather than using margin-top try using top:0 and adjust as required.
Related
How do you do?
I have converted XD file to html, css code.
I checked on my PC(windows), but I didn't check on Macbook.
Details:
I coded button and used pseudo element to display right arrow at the right side.
Here is my code.
HTML
<button class="register btn-top-register">Register</button>
CSS
.register{
background-color: #FF6D1F;
border-radius: 10px;
color: white;
padding: 20px 50px;
margin-right: 5%;
border: none;
position: relative;
box-shadow: 1px 5px 0px #8b3507;
}
.register::after{
content: '\1F892';
width: 20px;
height: 20px;
position: absolute;
right: 0;
}
This register button displayed triangle on Windows, but step shape on Macbook.
I tried many times to fix difference.
Could you help me how to fix and display the same shape-triangle?
You can use browserstack to test your code in different devices such as mac and ios
Have a look at these unicodes https://www.toptal.com/designers/htmlarrows/.
If you want to use of unicode I don't know exactly.
I suggest you to use SVG or img to display an icon on your button.
You can download an SVG icon from flatiIcon, or you can use of featherIcon or font awesome for example.
I'm working on this site http://zap3d.com/ and I have a problem: With Internet Explorer (IE) I can't click the two links (Upload and Download) but with Chrome and Firefox I can.
Here is my CSS for Upload button
.upload_button {
position: absolute;
left: 47px;
bottom: 28px;
width: 237px;
height: 41px;
border: none;
background: transparent;
}
Thanks
Some versions of Internet Explorer may not register clicks on elements that have a transparent background, and no content within. In these cases, set your element's opacity to zero:
.upload_button {
opacity: 0;
}
You'll get the same invisible element effect, while maintaining cross-browser compatibility.
I am having a very strange problem here. I tried to create a search bar and this is how it looks in chrome, which is what i want.
It works fine in Safari, Here is all the involved CSS code.
#input {
height: 25px;
padding-left: 5px;
width: 70px;
}
#button {
margin-left: -6px;
height:27px;
position: relative;
top: -2px;
padding-left: 5px;
}
But in case of FireFox, the Button moves up a little which makes it look bad. Here is how it looks in FireFox.
This BUg in Firefox is fixed if i remove the line top: -2px; but then a similar problem crops up in Chrome and Safari.
How do i Fix this ?
You can fix with jQuery
Code
$(document).ready(function(){
if($.browser.mozilla){
$("#button").css("top", "-2px")
}
})
If you have not added jQuery add this script
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
I've got some simple html and css (see below) that shows a flex app inside a Div tag. In most browsers (ie8, chrome, FF), the object doesn't have a border or a vertical scrollbar. In ie9, both a scrollbar and a 3D etched border are shown. I'd like to remove those, I tried various border styles but nothing seem to help. Does anyone have a solution for this? Is this a known problem for ie9 only?
I'm kind of new to Html, CSS, javascript, etc. and I have to say, IE browsers are a pain!
#mapLocation
{
position: absolute;
top: 131px;
left:0;
z-index: 0;
bottom: 120px;
width: 100%;
z-index: 2;
border-style: none;
}
#mapObject{
position:relative;
width: 100%;
height: 100%;
z-index: 2;
border-style: none;
}
</style>
<div id="mapLocation" >
<object id="mapObject" type="text/html" data="otherFile.html"></object>
</div>
Thanks for any help,
Ggilmann
I just had the same issue. It may be a compatibility mode that is switched on in your IE9 browser. Try to uncheck it.
I have anchor element with CSS class.
All browser show the BG-image well, except IE 7 (it won't show the image at all). (I added the _attributes since I saw thats what is used in other sites).
When using IE Developr tools in IE7 it says background-image: none... Thanks
color: #FFFFFF;
cursor: pointer;
height: 102px;
left: 0;
margin-left: -7px;
position: fixed;
text-indent: -9999px;
top: 25%;
width: 35px;
z-index: 9998;
background-color: #279cff;
border-color: #279cff;
border-style: outset outset outset none;
border-width: 1px 1px 1px medium;
background-repeat: no-repeat;
height:170px;
background-image: url(../images/1.png);
background-position: 11px;
If the background has alpha transparency you won't be able to see that in IE6 properly because it doesn't render PNGs well. Either switch to gifs OR stop supporting ie6 :P
The underscore is a hack for CSS attribute to work only on 6, don't use it but use different CSS for IE.
IE6 doesn't handle very well with png. try to use jpg and it will probably work.
If not, try to float or display: block the element to see if it shows the background.
If your starting with _property it is for IE6 hacking. It will work only IE6. For IE6 use _property for IE7 use #property