how to fix site for IE7 - html

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.

Related

Internet explorer 7 overflow using min-width

affected page: http://adq.geantduweb.ca/
Firefox, Ie8,9 and Google chrome all run with the desired effect. The overflow works...
but internet explorer 7 i get a horizontal scroll at the bottom and you can see my white mask hiding the themed blue bar (Breadcrumbs)
any ideas to make this to work in ie7?
my overflow is on my #wrapper that has a min-width of 960px
Here is some of the CSS for the element that is causing the issue. (Note this is SASS CSS it outputs just like normal CSS when parsed.)
#wrapper
min-width:960px
overflow:hidden
#content
background:#fff
min-height:100px
padding:1px 0px 0px 0px
#component
padding-bottom:30px
.contentinner
position:relative
width:960px
margin:0px auto
.contentrightmask
position:absolute
top:-44px
right:-10000px
width:10000px
z-index:900
height:43px
padding:0px
margin:0px
background:#FFF
thanks for the help!
1.IE6 and 7 both do this, and it's caused by their stunningly creaky layout engine - it was never built with CSS in mind and it still shows, even in IE8(q). Put the float:right element first is probably the most commonly seen. By Keith More info
2.Or try setting them to display:inline or display:inline-block More info other link
3.Try to small change markup: place items with a float before items without it (from the same row). It should help. by oryol More info
in your code
<div class="contentrightmask" slick-uniqueid="389"/> in ie7
which has possision absolute and width is 10000px and even it not contains any data remove this div or fix your Css
I fixed IT
Thanks to : http://snook.ca/archives/html_and_css/position_relative_overflow_ie
i put position:relative to my #wrapper
(the element that has the overflow:hidden.)
thanks everyone who tried :)

Firefox displaying padding differently to all other browsers

I have a tab that has two borders on either side, the borders must fill the toolbar they are within and to achieve this I have used padding. In Chrome, IE, etc. the top and bottom padding must be set at 9px to fill the toolbar, however in Firefox they must be at 4px.
Here's a jsfiddle with a mockup of the toolbar added.
The markup is pretty simple;
<a href="Discover">
<span class="navButton">
Discover
</span>
</a>
I have removed transitions and other unneeded styles from the css;
.navButton {width:50px; border-right-color:#171717;
border-right-width:1px; border-right-style:solid;
position:relative;
padding-left:10px; padding-right:10px;
padding-top:9px; padding-bottom:9px;
}
display:inline-block would be quite appropriate here (at least a reasonable suggestion without seeing the rest of the code). You'll also need to drop the width declaration as your tab caption is wider than 50px - the reason you can't notice it now is because elements rendered inline (including <span> with default display property) can't have dimensions applied to them.
Works fine in this fiddle
I've had a fiddle and it works fine now. I have set it to display: inline-block and changed paddings and positions around.
Span is an inline-element by default and maybe handles the padding completely different than a block-element. Try setting:
.navButton {
display: block;
}
and check the results.
In general, you should include a CSS reset script (Google for it).

Css: min-height interpreted as height (iPhone webapp)

I building an iPhone webb app based on iWebKit's framework. I'm currently integrating a CSS div slider to improve the navigation between pages (divs) and everything works fine except one thing.
It appears as if I'm supposed to set a fixed height value to the div containing the sliding objects. These objects will contain quite a lot of content and wary in size, hence the divs/page have to expand vertically by default. For some reason, it appears as if the browser interprets min-height as height and doesn't expand the div to display all content. I realize there's probably a small mistake somewhere, something I have forgotten to add or remove. Please help me by pointing these out for me. Thanks
Wrapper containing the slides:
#contentWrapper {
float: left;
min-height:305px;
position: relative;
margin:0px;
padding-bottom:0px;
display:block !important;
}
Class added on every sliding obj
.additional-block {
height:auto;
position: absolute;
padding-bottom:30px;
display:block !important;
}
Live demo: http://utvecklingspunkten.se/heightIssue.php
Click on "Click" to see the actual issue appearing; the text is cut off below 305 px. The issue appears in all browsers including Safari for iPhone.
It's the overflow: hidden on your "content2" div that's conflicting here. Setting that means that the container can overflow, so it does. (Removing the min-height will show you that it would be 0 pixels high otherwise.)
Removing the overflow setting will have the effect I think you want.

Floating divs not displayed in IE7

OK I don't see what's wrong here:
https://www.e-capture.net
When browsing this site in IE7, the divs with IDs #blog and #social are not being displayed. The reason seems to be the #content div, which has a different height in IE7 vs IE8/FF/Chrome. But I don't see what I'm doing wrong.
Fun fact: the site displays better in IE6 than it does in IE7 :-)
Any ideas?
Thanks!
I've tested this in IE7 and Firefox.
You just need to move around a bunch of your <div> tags, and add a single new one (highlighted below).
Here's what Firebug looked like after I'd finished:
(I did the same thing in IE7 first, and it fixed your problem. Then, I did the same in Firefox to make sure the fix won't kill it in modern browsers.)
Here's my attempt at a textual description of what I did:
I moved #blog, #social and #footer respectively to outside and after #content.
I wrapped a new <div> around #blog and #social, with these styles:
margin: 0 auto; width: 960px.
I swapped around a few things concerning #buttons, to make them consistent between FF and IE7:
On ul#buttons li, remove margin: 10px 0, and add float: left.
On ul#buttons li a, remove float: left and add display: block.

Problem with absolute positioning in Firefox and Chrome

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.