[CSS][IE] Three Pixel (Text) Jog - Bug - Softwareontwikkeling

donderdag 6 maart 2008 09:38

Acties:

Topicstarter

Hi allemaal,

volgende probleem heeft me vannacht een tijdje wakker gehouden, en een (volgens mij juiste) oplossing vanmorgen hiervoor blijkt niet te werken! Waardoor ik het maar even hier probeer, wellicht dat iemand me kan zeggen waar mijn denkwijze de mist in gaat

Situatie: ik heb een website, opgebouwd uit Div's en 1 iframe; hieronder volgt kort even de code hiervan (Content eventjes eruit gestript). De div #container maakt gebruik van faux columns in de CSS.

HTML:

<head>
<script language="JavaScript" type="text/javascript">
    function loadPage(url){
        frames['content'].location.href= url + '.htm'
    }
</script>
<!--[if IE]>
<style type="text/css"> 
.sidebar { zoom: 1;}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HomePage - MockUp</title>
<link href="css/home.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="header"></div>
  <div id="container">
    <div id="sidebar" name="sidebar">
        <a href="javascript:loadPage('home');">» Home</a><br />
                ...
            <a href="javascript:loadPage('news');">» News</a><br />
    </div>
    <iframe id="content" name="content" src="news.htm" frameborder="0">
    Your browser does not support or is configured not to use iframes
    </iframe>
  </div>
  <div id="footer"></div>
</body>

Uiteraard hoort hier ook wat CSS bij, en wel de volgende:

Cascading Stylesheet:

a{
    color:#FFFFFF;
}
a:active, a:link, a:visited {
    display:inline;
    font-weight: normal;
    text-decoration: none;
    width:160px;
    display:-moz-inline-block;
    display:inline-block;
}
a:hover {
    font-weight:bold;
    font-style:italic;
    background-image: url(../images/rollover.png);
}
body  {
    background:url(../images/background.png);
    background-color:#EBA2DB;
    background-repeat:repeat-x;
    font-family:Calibri;
    margin:auto;
    text-align:center;
}
#container {
    background: #BA4EA4 url(../images/columns.png);
    background-repeat: repeat-y;
    margin:auto;
    text-align:left;
    width:1004px;
}
#content {
    border: 0px;
    width: 804px;
    height: 440px;
    margin-left:0px;
    overflow: auto;
}
#footer { 
    background:#b975a8 url(../images/smallfooter.png);
    clear:both;
    margin:auto;
    width:1004px;
    height:25px;
} 
#header {
    background:#b975a8 url(../images/header.png);
    height:140px;
    margin:auto;
    width:1004px;
    margin-top: 10px;
} 
html {
    overflow: auto;
}
#sidebar {
    color:#000;
    float:left;
    text-align:left;
    margin-right: -3;
    width:160px;
    padding: 10px 20px;
}

Via google heb ik gezocht op dit probleem en kwam ik op deze site van adobe het script tegen wat zei dat de #sidebar (de div met float) een zoom 1 nodig had om dat tegen te gaan. Zodoende ook toegepast. Maar dat bleek de oplossing niet te zijn. (De holly-hack kan/mag ik niet toepassen omdat die niet meer werkt in IE7 en aangezien IE6 nu dmv Windows Update vervangen wordt door IE7 is dat dus geen optie)

Verder gezocht op internet, waarbij ik deze site tegenkwam welke vermeldde dat ik de margin van de #sidebar 3 pixels smaller moest zetten. Aangezien ik geen margin hierop had, heb ik een margin-right van -3 gezet (negative dus), waardoor het probleem opgelost was, IE en Firefox tonen het nu gewoon goed. Hier wil ik wel bijvermelden, dat het in samenwerking met de oplossing van Adobe is, als ik de oplossing van Adobe weghaal, dan gaat Firefox weer de mist in.

Ook nog even op GoT gezocht uiteraard, waarbij ik dit topic tegenkwam. Hierin wordt komt de TS erachter dat height bij een andere Div voor problemen zorgt. Ook hiermee heb ik allerlei combinaties geprobeerd, maar hiermee vind ik iig geen oplossing in mijn situatie.

Máár, als ik er -3px van maak (cq. de unit toevoeg), dan is het probleem weer terug, en een margin zonder unit is niet echt netjes te noemen, vandaar dat ik me afvraag óf er ëberhaupt een juiste oplossing is hiervoor. Of dat mijn combinatie van zoom en margin -3 de enige werkbare oplossing is...

Wanna play?

vrijdag 7 maart 2008 10:21

Acties:

crisp

Devver

Pixelated

Je kan style directives specifiek op IE (en bepaalde versies van IE) targetten dmv conditional comments

Intentionally left blank

Reageer