Bli kvitt forskjell/mellomrom (CSS i IE vs FF)

[Autodidact]

Bildet under viser hvordan det er ønskelig/forventet det ser ut (øverst) med tanke på avstanden mellom menyelementene og stripene, og hvordan IE rendrer det. Har lagt til flere striper under menyen for å teste om plassering i koden hadde innvirkning på lufta IE tillater seg å stappe inn.

 

Forslag til årsak/løsning mottas med takk, for nå er jeg dritlei feilsøking..

 

 

Relevant HTML-kode;

 

<!-- end #header -->

<a href="../default.asp"><img src="../res/pix_gray_25.gif" width="700" height="100" border="0" lowsrc="../res/pix_gray_25.gif" /></a></div>

<img src="../res/pix_trans.gif" width="700" height="2" /><br />
<img src="../res/dotted_700.gif" width="700" height="2" />

<div class="h_mnu_main"> 
<ul> 
<%' <li><a href="/"class="selected">Introduskjon</a></li> %>	
	<li><a href="../default.asp">	Introduksjon</a></li>
	<li><a href="../products/">		Produkter</a></li>
	<li><a href="../docs/">			Dokumenter</a></li>		
	<li><a href="../contact/">		Kontakt</a></li>
<img src="../res/dotted_700.gif" width="700" height="2" />			
</ul>
<img src="../res/dotted_700.gif" width="700" height="2" />		
</div>
<img src="../res/dotted_700.gif" width="700" height="2" />	
<div class="clearfloat"></div>
<img src="../res/dotted_700.gif" width="700" height="2" />	

<!-- TemplateBeginEditable name="content" -->

 

CSS-kode:

 

.h_mnu_main{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}

.h_mnu_main ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
background: #FFFFFF; 		/*Default BG*/
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;	/**/
border-right-color: #FFFFFF;	/**/
border-bottom-color: #FFFFFF;	/**/
border-left-color: #FFFFFF	/**/
}

.h_mnu_main ul li{
display: inline;
}

.h_mnu_main ul li a{
float: left;
color: #000000;			/*Default FNT*/
padding: 3px 11px;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;	/*Default Brdr*/
}

.h_mnu_main ul li a:visited{
color: #000000;				/*Visited FNT*/
}

.h_mnu_main ul li a:hover, .h_mnu_main ul li .selected{
color: #FFFFFF !important;	/*Hover FNT*/
padding-top: 3px;
padding-bottom: 3px;
background: #ED1B24;		/*Hover BG*/
}

[Stian89]

Så vidt jeg forstår ved å se på koden din er disse linjene bilder, noe som er svært klossete når "grafikken" bare skal være ei dottete linje.

 

Hvorfor ikke bare lage en class av et eller annet slag, og plassere den som du vil?

 

<div class="stripe" style="border-bottom: 1px dotted #555; width: 100%;">

 

Width 100% hvis den ligger inni meny div'en, slik at den strekker seg like lang.

[pedervl]

En generell metode som bør brukes til å få sider til å bli mest mulig like i alle nettlesere er en "CSS reset", noe ala:

 

* {margin: 0; padding: 0}

 

, men ikke bruk koden over. Bruk heller denne koden:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,textarea,,blockquote,th,td {
margin:0;
padding:0;
}

table {
border-collapse:collapse;
border-spacing:0;
}

fieldset,img {border:0;}

address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}

li {list-style:none;}

caption,th {text-align:left;}

h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}

q:before,q:after {content:'';}

abbr,acronym {
border:0;
font-variant:normal;
}

/* To preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}

/*to enable resizing for IE*/
input,textarea,select {font-size:100%;}

/*because legend doesn't inherit in IE */
legend {color:#000;}

Denne koden påføres FØR annen CSS-kode, altså i toppen av ditt CSS-stilskjema eller i et egen CSS-stilskjema som linkes til før du linker til stilskjemaet med 'styling'.

 

Merk: Alle marginer og lignende blir nullstilt, så disse må stilles manuelt, slik at alle nettlesere bruker de samme måla.

Endret 20. juni 2008 av pedervl

[Autodidact]

Så vidt jeg forstår ved å se på koden din er disse linjene bilder, noe som er svært klossete når "grafikken" bare skal være ei dottete linje.

Godt poeng.. Gammel vane skulle jeg tro. CSS tar stadig mer over (mer tid!), så hintet tas til følge..

Denne koden påføres FØR annen CSS-kode, altså i toppen av ditt CSS-stilskjema eller i et egen CSS-stilskjema som linkes til før du linker til stilskjemaet med 'styling'.

Takk skal du ha! Skal implementere koden i prosjektet og se om ikke det gjør ting bedre.

[Autodidact]

CSS-reset-koden gjorde ikke noen forskjell for stripene, men å benytte dotted over og under meny-div'en hjalp med å fjerne det store gapet som oppstod under.

 

Dotted i FF ser helt topp ut, men IE rendrer det mer som dashed i mine øyne.. Alt for lange striper istedenfor prikker. En annen ting er at FF har litt marg over header-bildet mens IE trykker det helt opp i kanten.

 

Når man ser hvor mye dill som skal til for å få kontroll med CSS, skjønner jeg ikke helt hvorfor det vokser frem en generasjon som "forguder" CSS og ser på tabeller som fandens verk.

[Sjark]

Grunnen til at folk forguder CSS er ting som lesbarhet på siden, si du skal kopiere tekst eller noe sånt fra en side med ca en million tabels nesta inn i hverandre, prøver du å markere tekst da vil du sannsynligvis merke mange tabels også, og det ser forferdelig ut.

 

HTML Tabels er ikke laget for design, de er der for å inneholde tabulær data.

CSS derimot er laget for å designe sidene, og det fungerer ganske så bra, problemet er at IE 5 og 6 (og tildels 7 men det har blitt bedre) ikke følger CSS standarden skikkelig, så sider så er skrevet helt etter standarden, blir ikke vist sånn som du vil i IE 5 og 6 (det pleier og være ivertfall en del bedre i 7en), mens de rendrer helt fint i FF og Opera.

 

Jeg tror ikke det er så alt for lenge til at du kan slutte (ivertfall delvis) og holde sidene perfekte i IE6, for det er allerede mer folk som har IE7 en IE6, og %en til FF stiger også en del mens IE6 synker, dette er et godt tegn for alle web designere:)

Endret 24. juni 2008 av Sjark

[PHPdude]

Når man ser hvor mye dill som skal til for å få kontroll med CSS, skjønner jeg ikke helt hvorfor det vokser frem en generasjon som "forguder" CSS og ser på tabeller som fandens verk.

Når man ser hvor lett mange har for å dømme et konsept før engang første kapittel i læreboka er lest, skjønner jeg godt hvordan god gammel kunnskap forgudes og alt annet ses på som fandens verk.

 

Sorry, klarte ikke dy meg. Ikke vondt ment, men tror du ser poenget.

[Autodidact]

Joda jeg ser poenget, men jo lenger jeg holder på å lese og fikle med å la CSS overta for "gamle synder", jo mer i tvil blir jeg på om det er veien å gå - fra et designers perspektiv.

 

Når man ser på mengden hacks og problemer/inkompatibilitet som eksisterer, blir man ikke lett overbevist.. I alle fall ikke for å innta en "all or nothing" holdning som tilsynelatende mange etter hvert gjør.