Hi,

I cannot solve this problem without using hacks. Can U help me please? In chrome, ff, safari, opera everything is OK. But in ie6, ie7, ie8 not. Please see a photos

http://img243.imageshack.us/img243/4008/chromed.png http://img708.imageshack.us/img708/870/ie6.png http://img35.imageshack.us/img35/7734/ie8u.png

Even if I place plain text into body, there is the difference between browsers. In chrome, ff opera, text has about 2px margin from browser window, in ie6 there is no margin.

CSS:

body
{
    font-family: Arial, Verdana;
    font-size: 12px;
}

/* top */
#top
{
    background: #422736 url("../images/topBar.png") repeat-x;
    height: 50px;
}

#topContent
{
    width: 960px;
    margin: 0 auto;
    height: 50px;
}

#topContent p
{
    float: right;
    margin: 0 15px 0 0;
    display: inline;
    padding: 16px 0 0 0;
}

#topContent p a,
#topContent p a:active,
#topContent p a:visited
{
    color: #fac841;
    text-decoration: underline;
    font-size: 11px;
    font-weight: bold;
}

#topContent #login
{
    margin: 12px 0 0 0;
    width: 37px;
    height: 26px;
    float: right;
}

XHTML:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>CVideo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <META NAME="Description" CONTENT="Meta description"> 
    <META NAME="Keywords" CONTENT="Meta keywords"> 
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
    <link rel="stylesheet" type="text/css" media="all" href="css/screen.css" />

    <!--[if lte IE 7]>
            <link rel="stylesheet" type="text/css" href="/m/css/ie.css" />
    <![endif]-->


</head> 

<body>
    <div id="top">
        <div id="topContent">
            <p><a href="#">Zapomnia?e? has?a?</a></p>
            <a href="#"><img id="login" src="images/login.png" alt="CVideo - Zaloguj si?" /></a>
        </div>
    </div>
</body>         

</html> 

1 answer

0
points

( a ) I can't see the difference between the images. ( b ) if there is one it's tiny? ( c ) you haven't shown the CSS that's in /m/css/ie.css so we have no way of knowing if it's that has the error.

show live code and explain the error and you might have a chance of getting some help.

my guess is that you have a margin collapse issue, try adding top padding to #topContent or some of the other containers to see if it helps (adjust margins accordingly)

Answered almost 9 years ago by Tony Crockford
  • ie.css is empty there is no even this file already in my project this is for the future problems :) the difference is that this image which looks like play button is differently posisitoned according to the text on the right rafal almost 9 years ago
  • so put some top padding in the box that holds the image and then the margin will work try #topContent {padding: 1px 0 0 0} Tony Crockford almost 9 years ago
  • doesn't work at all, that's strange that img positioning is ok, but p not ;/ rafal almost 9 years ago
  • I've added height atribute to #topContent p, and it works. there is still 1px difference between chrome nad other browsers, but it's almost invisible. thanks Tony. rafal almost 9 years ago