[CSS] Align probleem - Softwareontwikkeling

zondag 23 november 2003 18:49

Acties:

Topicstarter

Ik was de news layout voor me site aan het maken. alle newsitems zien er goed uit, zowel in IE als in Mozilla. Het enigste probleem met mozilla is dat hij niet goed alignt. Mozilla allignt naar de linker kant. Terwijl IE dat naar de rechterkant doet zoals het moet.

De site
http://www.tsw-gaming.nl/got.htm

Internet Explorer 6
Afbeeldingslocatie: http://www.xs4all.nl/~hach1000/tsw/websiteIE.jpg

Afbeeldingslocatie: http://www.xs4all.nl/~hach1000/tsw/websiteIE.jpg

Mozilla Firebird 0.7
Afbeeldingslocatie: http://www.xs4all.nl/~hach1000/tsw/websiteMOZ.jpg

De html code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The Shadow wolves :: tsw-gaming.nl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fader.js"></script>
</head>
<body>
    <div id="allnews"><br /><br />
    <div id="news">
            <div id="bottom">
                <div id="caliskin_v6iplbotrightt"></div>
                <div id="caliskin_v6catbg2"></div>
                <div id="caliskin_v6catright"></div>
            </div>
            <div id="top">
                <div id="caliskin_v6ipltopright"></div>
                <div id="nav_m2"></div>
                <div id="tile_back2">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                testing 852.
                </div>
            </div>
            <div id="content">testing.tralalala<br />tralalala<br />tralalala<br />tralalala<br />tralalala<br /></div>
        </div>
    <div id="news">
        <div id="bottom">
            <div id="caliskin_v6iplbotrightt"></div>
            <div id="caliskin_v6catbg2"></div>
            <div id="caliskin_v6catright"></div>
        </div>
        <div id="top">
            <div id="caliskin_v6ipltopright"></div>
            <div id="nav_m2"></div>
            <div id="tile_back2">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Alles werkt naar behoren
            </div>
        </div>
        <div id="content">Na een hoop geploeter en gestuntel is het dan eindelijk zover. Het is gelukt met het nieuws ding er op te krijgen.<br />Hihi best wel cool als het nou eens fatsoelijk gaat werken :)</div>
    </div>
</div>
</body>
</html>

Cascading Stylesheet:

#allnews{
left:170px; 
top:125px; 
height:auto; 
background-color:#BBBFC5; 
font-size:11px; 
width:571px; 
text-align:right!important; }

#news{
position:relative;
width:500px; 
margin-bottom:20px; 
height:auto; 
background-color:#D7DBDF; 
text-align:right; 
padding-top:19px; 
padding-bottom:24px;}

#top{
left:0px;
top:0px;
width:500px;
height:19px; 
background-color:#D7DBDF;}
        
#caliskin_v6ipltopright{
background-image:url(layout/caliskin_v6ipltopright.gif);
left:0px;
top:0px;
width:4px;
height:19px;}

#tile_back2{
background-image:url(layout/tile_back.gif);
left:4px;
top:0px;
width:496px;
height:19px;
background-repeat:repeat-x;
font-size:12px;
font-weight:bold;
text-align:left; 
vertical-align:bottom; 
}
#nav_m2{
background-image:url(layout/nav_m.gif);
left:10px;
top:3px;
width:23px;
height:11px;
z-index:1; 
font-size:6px;}
#bottom{
left:0px;
bottom:0px;
width:500px;
height:24px; 
background-color:#BBBFC5;
}
#caliskin_v6iplbotrightt{
background-image:url(layout/caliskin_v6iplbotrightt.gif);
left:0px;
top:0px;
width:12px;
height:24px;}
#caliskin_v6catbg2{
background-image:url(layout/caliskin_v6catbg.gif);
background-repeat:repeat-x;
left:12px;
top:0px;
width:466px;
height:24px;}
#caliskin_v6catright{
background-image:url(layout/caliskin_v6catright.gif);
right:0px;
top:0px;
width:22px;
height:24px;}
#content{ 
position:relative; 
width:480px; 
background-color:#D7DBDF; 
text-align:left; 
padding-left:20px;  
background-image:url(layout/caliskin_v6ipltoprightbg.gif); 
background-repeat:repeat-y; 
background-position:left, top;}

[ Voor 31% gewijzigd door GoddXX2 op 23-11-2003 18:56 ]

zondag 23 november 2003 18:52

Acties:

rewind.

WOW misschien is het een idee je stylesheet wat overzichterlijker te maken ?

zondag 23 november 2003 18:56

Acties:

--MeAngry--

aka Qonstrukt

Ik kan je wel 1 hint geven en dat is om bij het maken van stylesheets een beetje orde te houden in de opmaak, want het is zo (in ieder geval voor anderen) bijna onmogelijk om snel dingen terug te vinden.

Ik heb deze problemen in ieder geval ook nogal eens gehad met Mozilla en Internet Explorer.
Ik zou in ieder geval Left: 0px eens weghalen bij #top en #bottom.

Tesla Model Y RWD (2024) ▪︎ Daikin Altherma 3 6kW (300L SWW) ▪︎ 20x AIKO NeoStar 2S+ 465Wp ▪︎ Sigenergy SigenStor EC 10+10 (12kW + Gateway HomePro TP)

zondag 23 november 2003 18:57

Acties:

GoddXX2

Topicstarter

IK heb hem maar eens geweizigt

Ik kon het zelf aardig uit elkaar houden, maar ik weet ook dat het voor anderen beetje moeilijk en onduidelijk is om te lezen.

en dat left: 0px bij bottom en top eruit halen maakt geen verschil. Die had ik er ingezet zodat hij aan de linker kant bleef staan. Maakt eigenlijk ook niet uit of ze er in staan of niet.

maar dit is natuurlijk niet me hele stylesheet, ik ben nog wat vergeten wat wel van belang kan zijn:

Cascading Stylesheet:

div {
position:absolute; 
background-repeat:no-repeat; 
background-position:left; 
background-color:#385C7A;}

[ Voor 58% gewijzigd door GoddXX2 op 23-11-2003 19:00 ]

zondag 23 november 2003 19:09

Acties:

Rickets

Finger and a shift

Het komt door de text-align op #allnews. Die wordt in IE toegepast op blocklevel elements (niet zoals het moet dus). Je zult dus met margin/padding moeten werken.

[ Voor 9% gewijzigd door Rickets op 23-11-2003 19:15 ]

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

zondag 23 november 2003 19:15

Acties:

Johnny

ondergewaardeerde internetguru

Dit zou best op te lossen zijn, maar door de enorme hoeveelheid irrelevante CSS code kan ik er geen wijs uit.

Daarnaast zitten er fouten in je HTML code, je gebruikt dezelfde ID meerdere malen (ID's zijn UNIEK!!! gebruik classes!) en sematisch is het ook niet echt fijn. dingen zoals <div id="tile_back2"> zijn niet fijn, gebruik liever <h3 class="tile_back2">
en roep die in je CSS bestand aan als h3.tile_back2 dan weet je meteen dat het om een subtitel gaat.

Je kunt die hele rij non-breaking-spaces trouwens ook vervangen door iets als margin-left: 40px;

[ Voor 30% gewijzigd door Johnny op 23-11-2003 19:17 ]

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zondag 23 november 2003 19:50

Acties:

Verwijderd

Centreren van block-level elementen in Mozilla (en in IE6 standard compliant mode):

code:

1 2	margin-left:auto; margin-right:auto; /* niet samentrekken tot margin:0 auto;, want dan werkt het niet meer in IE6 */

Betere manier die altijd werkt (IE5+ en MOSe):

code:

parent-element{
 text-align:center;
}
element{
 text-align:left; /* haalt IE hack weg */
 margin:0 auto; /* centreren op de goede manier */
}