IE8 vs IE7 html formatting - html

I've been struggling with getting a div container element to center along with it's child content and is starting to get frustrating. The inline styling I have for div is as follows:
<body id="body1" style="vertical-align: middle; text-align: center">
<div id="container" style="position: relative; width: 910px; margin: 0px auto;">
<!---Child Content--->
.
.
.
</div>
</body>
When these settings are viewed in IE7, the div container is off-set to the right as the below pic shows:
In order to center it I have to add define the right property in its position style in order to push it toward the center:
<body id="body1" style="vertical-align: middle; text-align: center">
<div id="container" style="position: relative; right: 425px; width: 910px; margin: 0px auto;">
<!---Child Content--->
.
.
.
</div>
</body>
This fixes the problem for IE7:
Predictably however, the formatting is off in IE8, Firefox, Chrome, etc. when applying the second styling format above:
Firefox (same behavior in Chrome and IE8)
Hope it's a simple fix, I don't understand why IE7 treats the styling differently. Any help is appreciated.
UPDATE:
#Dan Hardy, adrift - If I could accept both your answers I would, thanks guys it worked. That is very strange behavior, I figured by now I wouldn't have to cater to specific browsers.

This paves the way for a fix, but isn't strictly a fix:
You can add conditional browser specific statements into your HTML code:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Basically what you can do is add the comment's below to your page:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="conditional_ie_7_stylesheet.css" />
<![endif]-->
Between those tags you could add the necessary styling to offset the issues on specific browsers.
As I've said, this doesn't fix your CSS problem but it provides an alternative.

If you put !ie7 after the width attribute, it will be ignored by browsers other than IE 7:
right: 425px !ie7;
For a better explanation of this, see this SO question and the accepted answer:
Bang IE7 - What does it mean?
I leave it to you to decide whether this is too 'hacky', but it is used in the Stack Overflow css.

Was able to get the html in the original question to work fine in IE7 when you remove the position: relative from the div. There is also the chance that there are interactions in the content html/css that is causing the underlying issue so if this doesn't fix it could you post the content html/css that you have that demonstrates the issue in the screenshots that would be helpful.

Related

CSS position:fixed never works at all in my site but works in other site

When I used CSS position:fixed, it never works at all in one of my site but works in other site.
I couldn't find out any reason. It works perfect in all of my developing sites in all browser.
However, position:fixed never works in one site only wherever I put it except for Firefox.
Example:
<div style="position:fixed">
This div is fixed
</div>
This never fixed its position.
Now the is fixed but it doesn't stick to the window when scrolled as it does in Firefox.
<div style="position: fixed; width:100px; height: 100px;"></div>
Don't put the div into relative container.
You have to set left/right and top/left position.
<div style="position: fixed; left: 0; top: 10px;">
It might be coused of parent element overriding your statement. Try adding
<div style='position: fixed !important;'>
Now I found the solution & working on it.
It was because I call some other css files. when i remove one of the css it works perfect.
I don't know why but it works..

Why doesn't padding-bottom in div tag work?

I have a <div> and I want to put the text 10px from bottom border of the `. However, it doesn't work for me. Following is the code.
<div id="title" style="height:35px;border-bottom:thin solid rgb(65,31,30);margin-left:14px;padding-bottom:10px;font-size:18px;font-weight:thicker">Hello, world!
</div>
remove your height:35px style. that contradicts what you are trying to do. it has a 35px height plus an additional 10px bottom padding.
check out this jsFiddle. i hope it makes sense to you.
I have experiences with this sort of stuff in the past. This is just the case in some browsers and especially if you had overflow-y: scroll; enabled in the style. Your syntax looks good and I have tried it. even with or without that semi-colon at the end, it would still work fine since you are styling it inside the div as an attribute itself.
The way I see it if this is not your entire code please be aware of overflow: scroll; it code be overwriting your style.
or try running it with other browsers.
or you could restructure your code to make sure the padding works like this:
<div id="title" style="height:35px;margin-left:14px;font-size:18px;font-weight:thicker">Hello, world!<div style="border-bottom:thin solid rgb(65,31,30);padding:10px"> </div>
</div>:
by just adding another div within that div

Unable to set width/height to an img when DOCTYPE is set (Firefox)

Imagine three images with fixed size:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.photos img {
width: 320px;
height: 240px;
background-color: black;
}
</style>
</head>
<body>
<div class="photos">
<img src="abc" />
<img src="def" />
<img src="ghi" />
</div>
</body>
</html>
When you look at such page in IE or Chrome, you'll see what I expected - threee images with fixed sizes.
In Firefox however, it doesn't work.
But if I set the images to display: block; or remove the DOCTYPE (doesn't show on jsfiddle) it works.
What am I doing wrong?
Thanks
This seems to be an old feature in Firefox: I found a discussion about it from year 2007:
So I suppose it’s intentional and won’t go away. I guess they might be thinking this way: Everything is fine if you set dimensions on an image, we’ll scale it. But if the image is missing, we will render the alternative text instead, and this changes the img element from a replaced inline element to a text, a non-replaced inline element, and for it we won’t support height and width, by the spec. Instead, the text determines the dimensions. And presumably the authors of Firefox think this is the right thing to do, and only in Quirks Mdoe do they do as other browsers do.
If you add alt attributes (as you should, every img should have one), you’ll see how the box size varies by text length. Apparently Firefox treats a missing alt here as equivalent to alt="", implying zero width.
This would explain why setting display to inline-block (or block) changes the behavior: then width and height are applied.
I think firefox wont be applying height and width to <img> element which are empty and hence it must be rendering like that, so use CSS display: block;
Here's my fiddle
Or use an image and see...
Updated : fiddle

Link not working in overlapping Div

Making a footer for a web site I stumbled upon some strange behavior of overlapping Divs. You can see an example at:
http://mike.latysheva.ru/test.html
The issue is that second link is not clickable in IE7 and at least some versions of IE8. Works fine in IE9 and Firefox.
Here is the code, it is pretty simple (you can see full code in page source):
<div style="height: 120px; width: 200px; background: #DDDDDD; postion:relative;">
<div style="height: 40px; padding: 10px;postion:relative;">
<a ...[have to remove an actual link in order to post it here]>Test Link 1</a>
</div>
<div style="height: 40px; padding: 10px;postion:relative;">
<a ...[have to remove an actual link in order to post it here]">Test Link 2</a>
</div>
</div>
<div style="width:250px;height:100px; background:#777777;margin-top:-60px;position:relative;z-index: -10;"></div>
What can be wrong with the code? Does it have something to do with z-index: -10? I'm totally confused ... Please help ...
Thank you in advance!
Try giving the parent of the z-index:-10 div a z-index:1.
See this question: Z-index broken in IE8?
and this one
IE7 / IE8 z-index problem
Could it be that your first two divs are given postion instead of position attributes? z-index needs non-static positioned divs to work right.
It has to do with the order of the divs. Also if you are putting a link over another div which contains multiple divs, the overlay needs a backround. I usually use a transparent png. Otherwise the browser can see through it (ie7 etc).
Solution to problem:
http://jsfiddle.net/Anytech/Gr3ae/1/

In css, how do I make one line only execute if it is IE6 or IE7

I have this code:
#left-nav #left{
width:100px;
height: 99px;
float:left;
border-bottom: 1px solid #344a53;
margin-top:-1px;
}
I want to be able to only do the margin-top:-1px if it is not IE7 or IE8. Also does anyone know this problem with cross browser compatibility? I have to divs side by side in another div, but for some reason in chrome firefox and IE8, I have to use the margin-top: -1px because the div on top was 1 pixel down.
Example:
<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
The left and right div for some reason is 1 pixel from touching the header, but the container still touches it perfectly.
Quick and easy way is to use the IE conditionals.
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="/ie6.css" />
<![endif]-->
You can also use stuff like
<!--[if IE lte 7]>
For if IE is version 7 or lower.
See http://www.quirksmode.org/css/condcom.html for more information
Use conditional comments to target the CSS to IE6/7:
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="all" href="ie.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="all" href="ie.css" /><![endif]-->
And then in ie.css you'd have this rule:
#left-nav #left{
margin-top: 0;
}
You'd have to make sure that the ie.css file is included after your main css file so it overrides the margin-top: -1px.
On the topic of the negative margin, I try not to use them as they tend to cause problems. It's much safer to use:
#left-nav #left{
position: relative;
top: -1px;
}
Answering the question in your title you can apply a property to only IE 6 and 7 by using the star hack provided you are down with having invalid CSS.
This approach has the advantage that it doesn't require you to remember to use conditional comments in each page you include your CSS with.
Hacks work, but why not reconsider what you've already done to avoid them? Using a framework with auto padding and defined spaces such as Blueprint, YUI, or 960 grids can help immensely and avoid hacks....especially on Blueprint and YUI with their browser "resets" Using these and simple, straightforward css, I honestly can't remember the last time I used a hack--it's been over a year for sure.
If I was a betting man, I'd say there's something going on with your float in the side-by-side example you mentioned. Try a simple float reset test:
.clear {
clear: both;
}
and then after the side by side divs, insert
<div class="clear"></div>
If you notice any change, it was a float issue. Pretty common issue.