I have an issue with two different browsers. I have attached snapshots of issues:
When I use the following css I get image1:
.support-data-text img, .support-data-text select {
float:left
}
/* this is for dropdown list */
form#saveSupport select {
height: 29px;
width: 234px;
position: absolute;
}
form#saveSupport input{float: left; width: 243px;}
/* this is for the img we are using for dropdown list */
form#saveSupport .select_game { background: url(../images/select-status.png) no-repeat;
width: 223px; position: absolute; height: 29px; line-height:29px;
padding: 0 0 0 10px; color: #333; font-size:12px; overflow: hidden;
}
and when i add margin-left: 18% to form#saveSupport .select_game Chrome shows proper alignment of dropdown list image but not the actual dropdown list whereas Firefox displace the drodown list to right side. (Image2)
Kindly help me with the solution. I would be thankful!
Thanks,
Vikram
Hi I think you set position:relative to parent element and for child element set position:relative
I think your Parent Div is this
.support-data-text{
position:relative;
}
and now set to child div absolute position and set to left right top bottom according to your design .
Some of the CSS properties acts differently in both Chrome and Firefox.To fix this I used the below solution which worked for me. Add the CSS properties which acts differently in chrome and firefox inside class(same class name which use for chrome css prop as well) which should come under #supports (-moz-appearance:meterbar). The properties which we add within #supports (-moz-appearance:meterbar) will be taken only for Firefox browser.
Example:
#supports (-moz-appearance:meterbar) {
.yourclassname {
margin-bottom: 10px;
bottom: 2px;
}
}
Related
I have a div (#socmed) with an ul containing li's which i have positioned at the top right of my page. You can find the div inside the header tag. These are social media buttons by the way.
http://digilabs.be/tutu/collection.php
As you can see, it only shows up in chrome and safari (haven't tested in IE yet).
I have tried changing the z-index, because I felt like it got overlapped by the parent div, which is colored pink. But that didn't seem to work. I have no idea what to do.
Thanks in advance for all help.
In your main.css:Line 73
Add a width to the <li> item.
#socmed li {
list-style: none outside none;
margin-top: 5px;
width: 25px; /* Add this width..! */
}
This seems to fix your problem.
Your outer #socmed div has width: 25px, but your <li> within it does not, and by default it is larger then the 25px as specified on #socmed, so would not display.
2 CSS adjustments you can make. First make a relative container (not fully tested on your page, but usually a good practice...
header {
position:relative;
}
Second, define a width for your ul list items in your header...
#socmed ul {
width:30px;
}
Hopefully this helps
This issue is related to the width of div#socmed:
#socmed{
width: auto;
height: 125px;
position: absolute;
top:8px;
right: 40px;
}
Originally, you set width to 25px, and this was not wide enough to show your icons.
This question from:
ul, ol {
margin: 0 0 10px 25px; // to margin:0
padding: 0;
}
please don't in the ul,ol such values margin: 0 0 10px 25px; It is a gobal.
I have put relative div in relative container. It worked.
It works in chrome , and not in ff/opera.
Demo here: http://booksnearby.in/browse_items.php . The 'location: Dhoolsiras Village, delhi' line 'hangs' in the middle. I am trying to make it stay at the bottom of its container.
For this I tried
Child span tag- {
bottom: -5px;
font-size: 11px;
left: 115px;
line-height: 20px;
position: absolute;
}
Parent:- element.style {
height: 100%;
position: relative;
}
But it doesn't work, except in chrome. Please help
Thanks.
Do you have to use a table? Because your problems come from the td element's height. Tables have the worst cross browsers support out of all the html elements :)
Is it possible to change the structure to use div elements instead?
OR you could give the position: relative to your .listtd instead of the div (which means remove the position property from the div). This solution will do the trick.
I have a div with margin-top:-200px. I want the div to move up/behind the div above it.
Works great in all browsers except IE so far. margin-top:200px works, so I know it's not a collapsing margin issue.
Is there a bug I am not aware of here?
IE doesn't like negative margins and doesn't render them properly. Position your elements relatively or absolutely and use top: -200px instead.
Note: positioning them may change the layout significantly and you may have to rework your styles.
Negative margin hide the div…
Here is trick
use zoom:1, position: relative
Problem:
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}
in IE red area of toolbar div hide itself. even we are using zoom: 1. to get rid of this problem we need to add position: relative too.
Solution:
so your css class will become
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}
http://trickyclicks.com
If the above doesn't help: make sure there's a div around your offending div. Now add a width of 100% to the offending div and float it to the left. Like this. Got rid of all my negative margin ie woes...
div.container {}
div.offender /*inside div.container*/ {
width: 100%;
float: left;
margin-bottom: -20px; /* ie fix */
zoom: 1; /* ie fix */
position: relative; /* ie fix */
display: block;
}
give position as relative. inline style is advisable. It may give some problem if you use external css.
In order to support negative margins in IE, I've fixed similar issues with display: table;. Other fixes like zoom: 1; and position: relative; don't always work (at least in my experience). If you only want to add this style to IE, I'd suggest using https://modernizr.com/
// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; }
This question already has answers here:
Is it possible to set the equivalent of a src attribute of an img tag in CSS?
(24 answers)
Closed 7 years ago.
I need to define an <img>'s src attribute in CSS. Is there a way to specify this attribute?
just this as img tag is a content element
img {
content:url(http://example.com/image.png);
}
#divID {
background-image: url("http://imageurlhere.com");
background-repeat: no-repeat;
width: auto; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
No there isn't. You can specify a background image but that's not the same thing.
CSS is not used to define values to DOM element attributes, javascript would be more suitable for this.
No. The closest you can get is setting a background image:
<div id="myimage"></div>
#myimage {
width: 20px;
height: 20px;
background: white url(myimage.gif) no-repeat;
}
After trying these solutions I still wasn't satisfied but I found a solution in this article and it works in Chrome, Firefox, Opera, Safari, IE8+
#divId {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
They are right. IMG is a content element and CSS is about design.
But, how about when you use some content elements or properties for design purposes?
I have IMG across my web pages that must change if i change the style (the CSS).
Well this is a solution for defining IMG presentation (no really the image) in CSS style.
1: create a 1x1 transparent gif or png.
2: Assign propery "src" of IMG to that image.
3: Define final presentation with "background-image" in the CSS style.
It works like a charm :)
Running in compatibility mode the calendar below renders behind the textboxes below. IE8 displays the calendar how I need it to.
My CSS
.MyCalendar .ajax__calendar_container
{
border:1px solid #7F9DB9;
background-color: #ffffff;
z-index : 1004 ;
width:190px;
}
the textboxes which are overlaying the calendar don't have their z-index set anywhere although I have tried in my server side code to set their z-index to -1 if I detect IE7 to no avail. Any suggestions?
IE has problems with z-index. Most browsers treat the page as one continuous stacking context, but in IE, positioned elements generate a new stacking context, starting with a z-index value of 0.
As mentioned in this article:
http://trwa.ca/2012/03/ie-z-index-bug-and-how-to-squash-it/
try giving the calendar's parent element an even higher z-index.
I finally got it on top with an additional transparent background image. IE8. SASS:
#galerie-link {
position: absolute;
z-index: 1000;
top: 25px;
left: 40px;
a {
display: block;
width: 185px;
height: 90px;
background-image: url(../images/transparent.png);
}
}