CSS: Har problemer med vertical-align ny

JohnRichard · 10. september 2004

Hei!

Har testet alt mulig av kode og gir litt opp.

Jeg brukte tables til design innen nylig, og da var <td valign="bottom"> en flittig brukt sak.

Slik ser det ut i IE, Opera, Firefox (nesten):

Slik vil jeg at det skal se ut:

Her er CSS koden:

/* S T A N D A R D S */

* html, body {
 background: #FFF;
 font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
 font-size: 8pt;
 margin: 0px;
 padding: 0px;
 text-align: center; /* IE5 Hack */
}
img {
 behavior: url("sys/pngbehavior.htc"); /* IE PNG Hack */
}

a img {
  border: 0px;
  text-decoration: none;
}

/* D I V ' S */

#content {
 background: #FFF;
 margin-bottom: 20px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 200px;
 text-align: left;
 width: 475px;
}

#main {
 border: 1px solid #333;
 float: left;
 height: 165px;
 margin-bottom: 20px;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
 width: 370px;
}

#right {
 border: 1px solid #333;
 float: right;
 height: 165px;
 text-align: right;
 valign: bottom;
 width: 100px;
}


/* C L A S S E S */

.right {
 text-align: right;
}

Her er XHTML koden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" title="style" />
 <title>...</title>
</head>
<body>
<div id="content">
<div id="main">
<p><img alt="Lorem Ipsum" height="92" src="content/lorem.png" title="Lorem Ipsum" width="278" /></p>

<p><a href="http://www.petitiononline.com/msiepng/petition.html" title="Proper PNG Support in Internet Explorer for Windows">
<img alt="Proper PNG Support in Internet Explorer for Windows" height="8" src="content/0001.png"
title="Proper PNG Support in Internet Explorer for Windows" width="362" /></a></p>

<p><a href="http://redvip.homelinux.net/varios/explorer-png-en.html" title="Explorer versus PNG (AlphaImageLoader)">
<img alt="Explorer versus PNG (AlphaImageLoader)" height="8" src="content/0002.png"
title="Explorer versus PNG (AlphaImageLoader)" width="272" /></a></p>
</div>
<div id="right">
<p><a href="http://browsehappy.com/" title="Browse Happy: Switch to a safer browser today">
<img alt="Browse Happy: Switch to a safer broswer today" height="15" src="gfx/bh_80x15.png"
title="Browse Happy: Switch to a safer browser today" width="80" /></a><br />
<a href="http://getfirefox.com/" title="Get Firefox - The Browser, Reloaded.">
<img alt="Get Firefox - The Browser, Reloaded." height="15" src="gfx/firefox_80x15.png"
width="80" /></a><br />
<a href="http://opera.com/" title="Get Opera today">
<img alt="Get Opera today" height="15" src="gfx/opera_80x15.png"
title="Get Opera today" width="80" /></a></p>

<p><a href="http://validator.w3.org/check?uri=referer" title="W3C.org: Valid XHTML1.0 Strict">
<img alt="W3C.org: Valid XHTML1.0 Strict" height="15" src="gfx/w3c_xhtml_80x15.png"
title="W3C.org: Valid XHTML1.0 Strict" width="80" /></a><br />
<a href="http://validator.w3.org/check?uri=referer" title="W3C.org: Valid CSS2.1">
<img alt="W3C.org: Valid CSS2.1" height="15" src="gfx/w3c_css_80x15.png"
title="W3C.org: Valid CSS2.1" width="80" /></a></p>
</div>
</div>
</body>
</html>

PS! Border er kun for test og sjekk, de skal bort.

Edit: Kommenter gjerne koden min ellers - holder på jo på å lære her

Endret 13. september 2004 av JohnRichard

JohnRichard · 10. september 2004

Og hvorfor kommer bilder som er plassert rett under hverandre med <br /> helt inntil hverandre i IE, men ikke i Opera og FF?!

PoleCat · 10. september 2004

Hva skjer om du setter display: table-cell på #right? Det er forresten ingenting som heter valign, her må du bruke vertical-align.

JohnRichard · 10. september 2004

Jeg hadde brukt vertical-align, men prøvde vel i desperasjon valign

Med bruk av display: table-cell; sammen med vertical-align: bottom; så blir det riktig i Opera, ingen endring i FF; og elementene flytter seg bitte granne nedover i IE :dontgetit:

Endret 10. september 2004 av JohnRichard

Haraldson · 10. september 2004

IE støtter ikke display:table-cell; :roll:

Vertical-align virker i forhold til andre inline-elementer, og ikke i forhold til "foreldre-elementet".

--------------------

Det ser ut som at designet ditt er satt med piksler all the way? Hvis ja, kan du jo fikse dette med marginer og absolute positioning

JohnRichard · 10. september 2004

Det jeg vil er å flytte alt innholdet i en DIV til bunnen av den DIVen. Høyden er satt.

Haraldson · 10. september 2004

Da er det til med matte.

JohnRichard · 10. september 2004

Positioning?

Hmmm..hakke peil :dontgetit:

Haraldson · 10. september 2004

Altså. Om du har en fast høyde på container-diven, f.eks. 100px, og saken med linkene er 50px, så må det gå an å tenke seg til at man kan legge til margin-top:50px;.

Å tenke har aldri vært skadelig.

Cucum(r) · 10. september 2004

Hm, har du prøvd relativ posisjonering?

#id {
width: bredde;
height: høyde;
position: relative;
bottom: 0;
left: 10px;
}

JohnRichard · 13. september 2004

Fikk ikke til med postion: relative; bottom: 0; - men har brukt margin som Mr.Berg foreslå (takk Mr.Berg for å tenke litt lengre enn meg )

Neste irritasjonsmoment er at IE ikke har samme marginer som Opera og FF, selv om jeg har satt inn følgende CSS koder:

* {
margin: 0px;
padding: 0px;
}

html, body {
 background: #FFF;
 font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
 font-size: 8pt;
 margin: 0px;
 padding: 0px;
 text-align: center; /* IE5 Hack */
}

img {
 behavior: url("sys/pngbehavior.htc"); /* IE PNG Transparency Hack */
 margin: 0px;
 padding: 0px;
}

p {
 margin: 8px 0px 8px 0px; /* margin: top right bottom left */
}

Prøvde også å spesifisere br { ... } men det gav ingen utslag i noen av nettleserne.

Tips?!

Opera + FF

IE6

Simon Zimmermann · 13. september 2004

Er det ikke lettere om du sette hele menyen din i en eller to lister?!

JohnRichard · 13. september 2004

Har sittet og lest noen intressanter artikler rundt om og skjønner jeg gjør ting litt "feil".

Lister var det jeg satt å tenkte litt på, og siden det ser ut til st flere tenker likt som meg, så tror jeg hiver meg over det og koder om med en gang

JohnRichard · 13. september 2004

Ha!

ul + li og litt css gjorde susen, nå er det identisk

Og dette er bare en liten side som jeg leker meg med xhtml strict og css på, samt litt eksperimentering med png og IE (6).

Waldmeister

:w00t:

Endret 13. september 2004 av JohnRichard

Logg inn

CSS: Har problemer med vertical-align ny

Anbefalte innlegg

JohnRichard

Lenke til kommentar

Videoannonse

JohnRichard

Lenke til kommentar

PoleCat

Lenke til kommentar

JohnRichard

Lenke til kommentar

Haraldson

Lenke til kommentar

JohnRichard

Lenke til kommentar

Haraldson

Lenke til kommentar

JohnRichard

Lenke til kommentar

Haraldson

Lenke til kommentar

Cucum(r)

Lenke til kommentar

JohnRichard

Lenke til kommentar

Simon Zimmermann

Lenke til kommentar

JohnRichard

Lenke til kommentar

JohnRichard

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer

CSS: Har problemer med vertical-align *ny*

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer

CSS: Har problemer med vertical-align ny