Problem with absolute positioning in Firefox and Chrome - html

I don't understand why FF and Chrome render my page differently. Here's a screenie of it in
firefox: firefox example http://grab.by/65Bn
and here's one in chrome
chrome: chrome example http://grab.by/65BB
fieldset has a relative position and the image has an absolute position.
here's the basic structure:
<fieldset class="passenger-info">
<legend>Passenger 1</legend>
<div class="remove-me">
<img src="/images/delete-icon-sm.png" />
</div>
</fieldset>
basically the image is declared right after the legend.
here's the css for fieldset:
.passenger-info {
background:none repeat scroll 0 0 #F2F2F2;
border:1px solid #9D240F;
display:inline;
float:left;
margin-bottom:10px;
margin-right:10px;
padding:3px 10px;
position:relative;
width:350px;
}
and for the remove-me image:
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
it's totally weird. I tried putting the fieldset padding out, and the image moves up a little, but still not at the corner.
This post shows that FF does indeed have problems with rendering fieldsets.
http://www.codingforums.com/showthread.php?t=132624
Is there a better way of doing a fix without using a browser specific hack?

I can't believe this is 4 years old and still not answered. I searched every where for this answer. Here is what I did to use position absolute on an image within a fieldset. From here, change your right and top positioning to make it work for you in Firefox. (leave your original class in place for IE, Chrome, Safari, Opera)
#-moz-document url-prefix() {
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
}
This is a Firefox Hack that I'm told works for every version of Firefox. I'm using Firefox Version 33.0.2, so I can't confirm this works on older versions. I had the same problem on my site. It looked the same in IE, Opera, Safari, and Chrome. It was only in Firefox I noticed the positioning different. This works!

It appears that Firefox has an invisible padding or margin that places the element at the top right of the text space. Chrome is placing the element at the top right of the fieldset element outside of the flow of text.
One thing you could do is add a div wrapper and then absolutely position the element in the top right of the wrapper so that it lays over the corner of the fieldset.

It appears that the .remove-me element might have margin. Make sure to to remove that prior to adding absolute-positioning to items.
For precise results, you should always do a 'reset' in your CSS. This means removing margin/padding from every element.
A simple reset:
* { margin: 0; padding: 0px; }
Put that at the top of your CSS.

I have used #media screen and (-webkit-min-device-pixel-ratio:0) {} and fixed my absolutes that way. Its not very dry but it works.

I think it is because you didn't indicate the height of the div (passenger-info) that contains the button; Chrome starts acting up when you don't specify this.

The real solution is firefox and ie don't set defaults for top, left, right, and bottom.
I was able to fix my problem by setting these properly.

Instead of using margin use left, top, right, bottom. Example:
position: absolute;
top: 10px;
left: 20px;

Using a feature query against one of mozilla's platform-native properties is probably the correct approach for this in 2020. -moz-appearance is one such property, but others would work as well.
#supports (-moz-appearance: none) {
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
}

I had a similar problem with a web site and the images in Chrome where wrong. I had the position in an image and an input box in the same way as your example at the beginning of this post, and I solved it by putting the absolute position in the input box and in the image position in relative coordinates.
When I do that, it changes both positions but puts margins in both. I got it where I want it, to solve this problem with Firefox an Chrome you have to follow some of these tricks in order to put the images in the right place. Play with the position to make it work.

Related

How can I bring the CSS resize icon above a child img tag?

In my answer to another question I noticed the CSS resize handle icon of a parent div can be obfuscated by an img. In that answer it doesn't really matter, as background is more appropriate anyway and could be used instead.
However, let's say (for some bizarre reason) you wanted an img inside a resizeable div, how could you bring the icon above it?
I wasn't sure if it was just an optical illusion of some kind, so I used a colour wheel with a white centre to test it:
div{
resize:both;
overflow:hidden;
height:400px;
width:400px;
border: 1px solid black;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>
Here is a browser comparison:
Edge and IE don't support CSS resize so they couldn't be tested. I believe Opera uses the same Engine as Chrome so it's no surprise they both failed. However, it works as you would expect in Firefox. Is there a fix for Blink?
At first, I thought about the ::-webkit-resizer pseudo element, but upon further testing, I found out that it only considers textarea elements, not other elements that uses the resize property. Here's a fiddle showing this behavior.
Also, notice that even on the textarea element, ::-webkit-resizer style changes only kick in after it reaches a certain height (Very very small). This is also reproducible through the fiddle above.
Given that, it seems to me that the best alternative to "fix" this bug is to use a custom JS resizer lib.
A (rather monkeypatchey) pure css workaround is to apply a negative z-index to the child img
div{
resize:both;
overflow:hidden;
height:400px;
width:400px;
border: 1px solid black;
}
img {
position: relative;
z-index: -1;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>

Layout issue in IE- possibly to do with negative margins

I'm really struggling with a layout issue in (all versions of) IE. The site I'm working on works fine in Chrome and Firefox, but the layout of the banner is completely wrong in IE, where it appears a few hundred pixels lower than it should. I'm not sure if this is an issue with negative margins or what, and there's not much testing I can do since I'm using a Mac and only have static screenshots to go by.
I'd really appreciate any feedback on this. I've attached an image of what the IE screenshot looks like, and what it should look like. The link to the site is: http://www.osullivans-pubs.com/draft
EDIT: I'm unsure what code to include really since I can't identify the problem but I'm guessing it has something to do with this element:
#back {
overflow: hidden;
min-height: 700px;
margin-top: -235px;
padding-top: 80px;
background-position: center -44px;
text-align: center;
position: relative;
}
EDIT: I'm attaching an image of the site zoomed out, to give an idea of why negative margins are necessary. It's pretty hard to explain, but it's to do with the diagonal backgrounds and the fact that I need these backgrounds to reach about 1600px (for larger screens, and I can't repeat them, they're diagonal). I wish there were some way to get IE to recognise the negative margins, I've tried the zoom: 1, position: relative technique, but still nothing. Even in IE10.
Using negative margins is a bad idea for primary development and should only be used when there is no other solution.
Personally, I consider negative margins a hack.
Position relative will make an element respond relative to its parent, but if you've moved your element outside of its parent with negative margins you can only expect weird results.
In my experience, IE tries to 2nd guess what you want, whereas Mozilla is more wysisyg. so cross browser compatibility will always be a hinderance to you.
If you want your element to always appear in the same place [ relative to pixel position 0,0 (top left)] then use an absolute positionning on the element and specify top and left. this way you can ignore the parent element.
#back {
overflow: hidden;
min-height: 700px;
background-position: center -44px;
text-align: center;
position:absolute; top:30px; left:20px; margin:0px; padding:0px;
background-color:red;
}
This gets tricky when you want things to reposition themselves based on browser resizing; So be sure to test the absolute positioning in different situations, full screen, resized, min res, wide screen, screen rotation (if using handheld devices).
Turn off padding and margins completely, while positionning with margin:0px; padding:0px;
and change the background color to something to aide you in seeing edges of your element.
hence why ive added a reg BG on the example above.
Once the element is rougly in the right place (+/- 1 pixel) then you can tweak the margins and paddings.

CSS Border radius not trimming image on Webkit

I'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?
I have all the different prefixes for each browser plus the standard border-radius:
www.cenquizqui.com
The upper content box that holds the pictures, called #screen
a copy paste of screen's css:
#screen {background: none repeat scroll 0 0 #EEEEEE;
display: block;
height: 300px;
position: relative;
width: 960px;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;}
Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.
Regards
G.Campos
Here's a workaround that will fix the current chrome bug:
.element-that-holds-pictures {
perspective: 1px; /* any non-zero value will work */
}
This won't affect the display at all (unlike the opacity:0.99 workaround - which is great workaround, too, by the way).
Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.
There is a much simpler solution.
Just add overflow:hidden to the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius
Try the following css to the child elements of the element with border-radius set:
opacity:0.99;
It solves the problem and doesn't change the opacity much.
This worked perfectly for me.
It looks like you need to apply the border radius to the li element:
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}
It very much does have a border radius:
(I just added a border with Chrome's dev toolbar.)
The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.
My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).

How do I automatically center a div in IE8 in quirksmode?

I am working with IE8 in quirks mode...
I have styles cascading from my Firefox stylesheet which include:
#container {position:relative; width:1007px; margin-right:auto; margin-left:auto;}
#textbin {width:720px; position:relative; margin-right:auto; margin-left:auto;}
Apparently I'm not doing something right, or auto-margining does not work in IE8.
Is this the case? If so, how can I get around this limitation? I tried no positioning, absolute positioning, and even adding relative position to my IE8 stylesheet. Furthermore, when I manually center the div, IE8 adds margin to the bottom of the page...
by the way, I am a beginner here, so if more info is needed please let me know!
The old-school hack-y way to do it was to add text-align:center to the parent of the div you want to center. Of course you'll need to then specifically declare a text-align property for the child elements if you don't want them to be center aligned, as text-align is going to be inherited by child elements.
This will work for IE5 quirks and higher.
The css:
body, html {
width:100%;
}
#yourdivname {
margin:0px 50% 0px 50%;
//this can be removed, but is just for test sake.
background-color:#bbb;
width:100px;
height:100px;
}
I hope this will help, kind regards Bert Jan.

how to fix site for IE7

I am having tough time finding out what CSS property to change to get my page working in IE7.
Page is here
It works fine in Firefox, Chrome, IE8 but not in IE7 (maybe IE6) as well.
Notice that navigation menu goes up and #header that contains logo shrinks to a small size...
/hate IE/
Your .content has a height of 4.2 pixels. Try using a border-top:4px solid #whateverhex instead of using a 41px high repeating gif.
Then remove height:4.2px.
Alternative would be #nav { clear:both; }
my guess is that IE isnt using the Psuedo after class, which is where you clear your float. you can just add a height to the #header, or clear your float in a line break tag after the content.