webForumDet fria alternativet
Logga in / Bli medlem

Avstånden Firefox kontra IE

HTML & CSSur HTML, XHTML & CSS

15 svar · 1 105 visningar · startad av Ann-Sofie

Ann-SofieMedlem sedan mars 2003136 inlägg
Frågan#1

Nu har jag testat allt från strikta lösningar till hur påhittiga lösningar som helst men ändå envisas webbläsarna att ge olika resultat.

Sidan är uppdelad i ett sidhuvud och därefter två kolumner med en prickad skiljelinje, längst ned ett avslut lika bred som båda kolumnerna.

Jag har löst det enligt koden nedan där box1 och box2 är de två kolumnerna, marginal är den marginalen längst till vänster eftersom inte margin-left funkar i alla webbläsare.

Det sista innehållet i de två kolumnerna är en bild i varje kolumn som då önskvärt slutar på samma nivå vilket jag inte får till exakt i FF.

Det stora problemet är den prickade mittlinjen, om jag tar bort denna så ser resultatet likadant ut i IE och FF men när jag lägger till den så ser det perfekt ut i IE men i FF blir det ett stort glapp under de sista bilderna och före botten-texten. Det är som att avstånden inte är desamma i webbläsarna. Jag har försökt med att lägga in prickarna (mellan kolumnerna) som en bild och då bestämt height men i FF blir det längre än i IE, likaså om jag lägger prickarna som en border-left så blir det större i FF än i IE.

Har nån en klok idé hur jag ska gå tillväga?
:q

#platta
{
width:586px;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}

.topp
{
width:546px;
border-bottom:dotted 2px #666666;
}

.marginal
{
width:20px;
float:left;
}

.box1
{
width:263px;
background-image:url(img/HEJbakgr.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
float:left;
}

.box2
{
width:263px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
float:left;
}

.hr
{
border-top:1px dotted #666666;
}

.botten
{
width:556px;
clear:both;
border-top:dotted 2px #666666;
}

.mittprick
{
width:10px;
border-left:dotted 2px #666666;
float:left;
}

.mitt
{
width:10px;
float:left;
}
cayas avatarcayaMedlem sedan aug. 20051 448 inlägg
#2

skicka upp lite htmlkod tack

Ann-SofieMedlem sedan mars 2003136 inlägg
#3
<body>
<div id="platta">

<div align="center">
<div class="topp">
<img src="img/huvud.jpg" alt="huvudbild" border="0" /></div>
</div>

<div class="marginal">&nbsp;</div>
  
<div class="box1">
     <img src="img/Dalahast_1.jpg" alt="xxxx" border="0" align="right" />
     <br /><br /><br /><br /><br />text</p>
     <p>text </p>
     <p>text </p>
     <p><img src="img/1525R-80585.jpg" alt="xxxx" width="263" height="207"         border="0" /></p>
	
	<div class="hr">&nbsp;</div>
	
	<img src="img/Novemberspecial2.jpg" alt="novemberspecial" border="0" />    <br />
	<p>text</p>
	<p>&nbsp;</p><br />
	<p><a href="http://www.xxx.se/" target="_blank">text </a><br />
       </p>
	
       <img src="img/AIB_iceglas1.jpg" alt="ice" border="0" />  

</div>
			
	<div class="mitt">&nbsp;</div>
	<div class="mittprick"><br /><br /><br /><br /><br /><br /><br /></div>	
   
<div class="box2">
       <img src="img/novneuheit.jpg" alt="Neuheit" width="166" height="70"  vspace="2" border="0" />
       <br />
        text
        <br /><br />
        <a href="sida.html" target="_blank">text</a><br /><br />
        <p><img src="img/RIB_2.jpg" alt="rib" width="263" height="179" border="0" />   <br /></p>
 
	<div class="hr">&nbsp;</div>
        <img src="img/Lucia2.jpg" alt="Lucia" width="64" height="23" border="0" /><br />
    <p>text</p>
    <p>text<br />
      text <br />
    </p>
    <p><a href="http://www.xxx.se" target="_blank">text</a> </p>
    <p><img src="img/Lucia_bild.JPG" alt="lucia" width="263" height="163" vspace="2" /><br />
    </p>
    <div class="hr">&nbsp;</div>
	   
    <img src="img/Willkommen.jpg" alt="willkommen" width="152" height="54" vspace="2" border="0" /><br /><br />
     text
      <br /><br />text<br /><br />
  
    <a href="http://www.xxxx.se" target="_blank">www.xxxx.se</a>      <br /><br />
    <a href="http://www.xxxx.se/ger/index.html" target="_blank"><img src="img/door.jpg" alt="willkommen" width="263" height="220" border="0"  /></a><br />
    <br />
</div>
	
	<div align="center">
	<div class="botten">
	<br />
      xxx adressuppgifter<br />
      Tel  <br />
      <a href="mailto:info@xxxx.se">info@xxxx.se</a> &nbsp;&nbsp; <a href="http://www.xxxx.se" target="_blank">www.xxxx.se</a><br />
    </div>
	</div>
	
	
	<div align="right"><a href="http://www.xxxx.se" target="_blank"><em>text</em></a>&nbsp;&nbsp;&nbsp;&nbsp;</div>
    <br /><br />
</div>
</body>
cayas avatarcayaMedlem sedan aug. 20051 448 inlägg
#4

kan du prova detta?

cssen är nollställd, jag har tagit bort en massa br ur html
om du hemskt gärna vill ha en prickad mittlinje, varför lägger du den inte som en bakgrundsbild på #platta?
hursomhelst, säg till hur det gick efter uppladdandet av detta

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td
{
border: 0;
outline: 0;
font-family: inherit;
font-size: 100%;	
font-style: inherit;
font-weight: inherit;	
margin: 0;
padding: 0;
vertical-align: baseline
}

body {
background:#fff;
color:#000;
font:62.5% Verdana, Arial, Helvetica, sans-serif;
text-align:center
}

#platta {
margin:20px auto;
width:586px
}

.topp {
border-bottom:2px dotted #666;
width:546px
}

.marginal {
width:20px
}

.box1 {
background:url(img/HEJbakgr.jpg) top left repeat;
width:263px
}

.box2 {
width:263px
}

p {
font-size:1em;
line-height:1.3em;
margin:0.5em 0;
text-align:left
}

.right {
float:right
}

.left {
float:left
}

.hr {
border-top:1px dotted #666;
margin:0.2em 0
}

.hr hr {
display:none
}

.botten {
border-top:dotted 2px #666;
clear:both;
width:556px
}

.botten p {
text-align:center
}

.mittprick {
border-left:dotted 2px #666;
width:10px
}

.mitt {
width:10px
}

<body>
<div id="platta">

      <div class="topp">
            <a href="/" title="Till startsidan"><img src="img/huvud.jpg" alt="huvudbild" /></a>
      </div>

      <div class="marginal left">&nbsp;</div>

      <div class="box1 left">
            <img src="img/Dalahast_1.jpg" alt="xxxx" class="right" />
            <p>text</p>
            <p>text </p>
            <p>text </p>
            <p><img src="img/1525R-80585.jpg" alt="xxxx" width="263" height="207" /></p>

             <div class="hr"><hr /></div>
	
	<img src="img/Novemberspecial2.jpg" alt="novemberspecial" />
        <br />
	<p>text</p>
	<p>&nbsp;</p><br />
	<p><a href="http://www.xxx.se/" target="_blank">text</a>
       </p>
	
       <img src="img/AIB_iceglas1.jpg" alt="ice" />  

</div>
			
	<div class="mitt left">&nbsp;</div>
	<div class="mittprick left">
              <br /><br /><br /><br /><br /><br /><br />
        </div>	
   
<div class="box2 left">
       <img src="img/novneuheit.jpg" alt="Neuheit" width="166" height="70" />
       <p>
        text
        <br /><br />
        <a href="sida.html" target="_blank">text</a></p>
        <p><img src="img/RIB_2.jpg" alt="rib" width="263" height="179" /></p>
 
	<div class="hr"><hr /></div>
        <img src="img/Lucia2.jpg" alt="Lucia" width="64" height="23" />
    <p>text</p>
    <p>text<br />
      text
    </p>
    <p><a href="http://www.xxx.se" target="_blank">text</a> </p>
    <p><img src="img/Lucia_bild.JPG" alt="lucia" width="263" height="163" />
    </p>
    <div class="hr"><hr /></div>
	   
    <img src="img/Willkommen.jpg" alt="willkommen" width="152" height="54" />
     <p>text</p>
      <p>text</p>
  
    <p><a href="http://www.xxxx.se" target="_blank">www.xxxx.se</a>
    <a href="http://www.xxxx.se/ger/" target="_blank"><img src="img/door.jpg" alt="willkommen" width="263" height="220"  /></a></p>
</div>
	
	<div class="botten">
      xxx adressuppgifter<br />
      Tel  <br />
      <a href="mailto:info@xxxx.se">info@xxxx.se</a> <a href="http://www.xxxx.se" target="_blank">www.xxxx.se</a>
    </div>
	
	
	<div class="right"><a href="http://www.xxxx.se" target="_blank"><em>text</em></a> 
        </div>
</div>
</body>

och nästa gång du laddar upp nån kod - ta då hela koden, det är mycket lättare att felsöka när jag vet vad det är för doctype etc.

Ann-SofieMedlem sedan mars 2003136 inlägg
#5

Förlåt att jag inte tagit med all kod direkt, självklart är det svårt att ge hjälp då.

Doctypen är
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

och jag har testat nu men det skiljer fortfarande lite. Är nog ett hopplöst fall som man får svälja. Jag ska testa ditt tips om att lägga skilje linjen som bakgrundsbild i plattan. Jag testade iofs att göra själva "mitt-diven" med bakgrundsbild men då jag angav 1000px height så var den visuellt mycket högre i FF än i IE.

Jag la märke till att du tog bort alla border="0" och v-space på bilderna. Är det något som brukar ställa till problem?

Tusen tack för att du tagit dig tid!

Saschs avatarSaschMedlem sedan nov. 2002830 inlägg
#6

Det finns en hel del att göra med fixningar med hjälp av en separat CSS för just IE. Men exakt liknelse utan mindre förskjutningar är nog väldigt svårt att uppnå - det går men väldigt många quirks och specialfixningar måste då till, för de flesta IE (5 och uppåt) har sina egna småsaker som måste justeras.

Ann-Sofie skrev:

Jag la märke till att du tog bort alla border="0" och v-space på bilderna. Är det något som brukar ställa till problem?

Nej, men man styr v-space och border och liknande via CSS:en och inte direkt i HTML:en.

Ann-SofieMedlem sedan mars 2003136 inlägg
#7

bilder och typsnitt i olika webbläsare

ang border och v-space etc på bilder, jag har alltid lagt in det i anslutning till bilden t.ex. <img src="bild1.jpg" alt="bild" vspace="4" border="0" />

Är det totalt fel? Men att lägga upp en css-regel för varje bild låter inte heller optimalt. Jag använder DW och när jag lagt in en bild markerar jag bilden och ger den aktuella regler.

Hur gör ni?

En annan html/css fråga kontra olika webbläsare. Jag har fått frågan varför verdana inte alltid ser ut som verdana i olika webbläsare. När jag fått filerna och tittat på dom så ser jag ju att kodaren lagt in font-family:verdana... överallt i body och i de olika divarna. Men samtidigt kan jag också se att typsnittet ser annorlunda ut i IE. Varför då?

Äh, jag slänger väl med lite av den koden också så kan ni också få titta på den och se om ni hittar felet för visst måste det vara nåt fel?

*små funderingar som vuxit...*

body {
	background-image: url(img/bild.jpg);
}

body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: none;
	color: #0099FF;
}
a:active {
	text-decoration: none;
	color: #0099FF;
}
.style1 {color: #0099FF}

a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}

#platta
{
	
	height: 500px;
	width: 800px;
	background-image:url(img/bild.jpg);
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	border: 1px solid #000000;
	}
	
	
#meny
{
height:60px;
width:665px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
	
	
#box1
{
width:210px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-top:216px;
margin-left:16px;
float:left;
}

#box2
{
width:210px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-top:216px;
margin-left:16px;
float:left;
}

...

Lite HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="imagetoolbar" content="no">
<link href="stil.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style2 {font-weight: bold}
-->
</style>
</head>

<body>
<div id="platta">

<div align="right">
<div id="meny" align="left">&nbsp;<br /><br />
  <span class="style2"><a href="../index.html" target="_self">Sida1</a><img src="img/black_dot.gif" width="22" height="12" border="0" /> 
  <a href="../sida/index.html" target="_self">Sida2</a><img src="img/black_dot.gif" width="22" height="12" border="0" /> 
  <a href="../sida/index.html">Sida3</a> <img src="img/black_dot.gif" width="22" height="12" border="0" /> 
  <a href="../sida/index.html" target="_self">Sida4</a> <img src="img/black_dot.gif" width="22" height="12" border="0" /> 
  <a href="../sida/index.php" target="_self">Sida5</a> <img src="img/red_dot.gif" width="22" height="12" border="0" /> 
  <u class="style1">Sida 6</u></span> <strong><img src="img/black_dot.gif" width="22" height="12" border="0" /> 
  <a href="../sida/index.html" target="_self">Sida 7</a></strong>
</div>
</div>

<div id="box1">&nbsp;</div>

<div id="box2">
  <div align="center">
  <img src="img/rubrik1.jpg" alt="rubrik" vspace="4" /><br />
en massa text och lite bilder
</div>
</div>

</div>
</body>
</html>
Saschs avatarSaschMedlem sedan nov. 2002830 inlägg
#8

Man sätter helt enkelt ett globalt värde i CSS:en som påverkar ALLA bilder:

img {
 border: 0;
 margin: 0 0 0 4px;
}

Sticker någon bild ut och ska en speciell regler ger man den en egen klass och tilldelar speciella värden till denna.

Angående hur typsnittet Verdana ser ut i Explorer kontra övriga webbläsare har återigen med att göra att renderingen/tolkningen som sker i Explorer - oftast har det att göra med storleksskilnader som Explorer gärna ändrar i. I övrigt så har jag aldrig märkt att Explorer ändrat om mitt typsnitt (Så länge jag har typsnittet och det är aktiverat) om man inte saknar typsnittet - då försöker Explorer ersätta typsnittet med ett eget typsnitt som den har som standard, därför är det rekommenderat att man anger flera typsnitt som liknar på varandra i deklarationen vilket typsnitt som ska visas om inte det första hittats osv.

Ann-SofieMedlem sedan mars 2003136 inlägg
#9

Varje dag lär man sig något nytt - nu ska jag också lägga in img i min css!!!

Ang typsnitt så blev jag trots allt glad att inte du heller hittade fel i koden för jag har stirrat mig blind.

Konstigt att det ska blir sån skillnad, verdana är installerat i hennes dator men det kanske är nån storleksskillnad då. Det verkar se bättre ut när det är bold-stil. Fast man blir ju lätt förvillad när man stirrar på fonten sådär. (hon är väldigt petig också, jag tycker hennes sida är snygg och skulle inte alls bry mig om det)
Däremot ligger vissa texter i tabeller men det spelar väl ingen roll så länge de styrs av diven i css? eller måste typsnittet ligga i tabellen också? :OO

Saschs avatarSaschMedlem sedan nov. 2002830 inlägg
#10

Jag skulle iofs vilja förändra din HTML samt CSS lite;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="imagetoolbar" content="no">
<link href="stil.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style2 {font-weight: bold}
-->
</style>
</head>

<body>

<div id="platta">

<!-- Skapa namn för VAD de innehåller istället VAR de ska vara, då kan du dessutom återanvända elementen och pilla mer i css än html när duska designa om -->

<div id="meny">
<ul>
<li class="style2"><a href="../index.html" target="_self">Sida1</a><img src="img/black_dot.gif" width="22" height="12" /></li>
<li class="style2"><a href="../sida/index.html">Sida3</a> <img src="img/black_dot.gif" width="22" height="12" /> </li>
<li class="style2"><a href="../index.html" target="_self">Sida1</a><img src="img/black_dot.gif" width="22" height="12" /></li>
<li class="style2"><a href="../index.html" target="_self">Sida1</a><img src="img/black_dot.gif" width="22" height="12" border="0" /></li>
<li class="style2"><a href="../index.html" target="_self">Sida1</a><img src="img/black_dot.gif" width="22" height="12" border="0" /></li>
</ul>
</div>

<div id="box1">&nbsp;</div>

<div id="box2">
  <div align="center">
  <img src="img/rubrik1.jpg" alt="rubrik" vspace="4" /><br />
en massa text och lite bilder
</div>
</div>

</div>
</body>
</html>

CSS:

body {
 background-image: url(img/bild.jpg);
}

body,td,th {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 color: #000000;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #000000;
}
a:hover {
 text-decoration: none;
 color: #0099FF;
}
a:active {
 text-decoration: none;
 color: #0099FF;
}

.style1 {
 color: #0099FF;
}

a {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #000000;
}

#platta {
 height: 500px;
 width: 800px;
 background-image:url(img/bild.jpg);
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
 margin-top:50px;
 margin-left:auto;
 margin-right:auto;
 border: 1px solid #000000;
}

#meny
{
 height:60px;
 width:665px;
 font-size:13px;
 text-align: left;
}

#meny ul {
 list-style: none;
}

#meny ul li {
 display: inline;
}

#box1 {
 width:210px;
 font-size:10px;
 margin-top:216px;
 margin-left:16px;
 float:left;
}

#box2 {
 width:210px;
 font-size:10px;
 margin-top:216px;
 margin-left:16px;
 float:left;
}

Edit; För att svara på din fråga angående hur det ser ut med divvar i td, undvik tabeller och div så långt du kan för båda har samma funktion vilket gör det dumt att använda båda samtidigt men du kan sätta en typsnittsfamilj på en td och divven kommer att ärva dess textegenskaper om du inte har definerat att ALLA divar ska ha något speciellt i CSS:en

Ann-SofieMedlem sedan mars 2003136 inlägg
#11

Jag är envis, kanske dum men jag har svårt att bara acceptera att det inte går att göra vissa saker för alla webbläsare.

Jag har en vän som fixat en supersnygg sida (som ska skickas som nyhetsbrev) och jag har lovat att koda. Nu får jag som sagt inte ihop det och hon är ju självklart också förtvivlad. Det måste helt enkelt bara bli bra! Jag bifogar skissen i pdf-format.

Problemen är:
A) när vi har testat att skicka som nyhetsbrev har jag kodat i tabell och då är det inga problem, den här designen får jag absolut inte till i tabell-form. Ser ni att det går?

B) supersvårt att få till texten att lägga sig runt hästen sådär snyggt i inledningen då rubriken HEJ också är en bild. Jag har testat olika varianter och nu lutar det mest åt att jag lägger HEJ som bakgrundsbild och bara lägger hästen som bild, då vandrar texten runt men jag är inte 100% säker på att det funkar i utskick.

C) Det två sista bilderna ska ju ligga i linje med varandra (bottenlinjen) men detta är ju hur svårt som helst, ser det bra ut i FF vilket det oftast gör skiljer det sig supermycket i IE och tvärtom.

Vad skulle ni ha gjort? Några idéer som jag ska testa? Ett tag tänkte jag "fan, jag lägger bara upp bilden och skickar iväg" men börja nästan grina för då går det ju inte att klicka på en endaste länk... blääää...
Längst upp förresten har jag lagt till en länk som man ska klicka på om man inte ser nyhetsbrevet korrekt, då kommer man till webbversionen. Pinsamt om inte den är bättre då eller hur?

Trött och i behov av hjälp eller lite idéer i allafall!

Saschs avatarSaschMedlem sedan nov. 2002830 inlägg
#12

Ann-Sofie skrev:

Jag är envis, kanske dum men jag har svårt att bara acceptera att det inte går att göra vissa saker för alla webbläsare.

Detta är absolut inte någon dålig egenskap men jag håller med, när det inte går är det lätt att bli så frustrerad att man vill spy och stånga huvudet i väggen.

Ann-Sofie skrev:

A) när vi har testat att skicka som nyhetsbrev har jag kodat i tabell och då är det inga problem, den här designen får jag absolut inte till i tabell-form. Ser ni att det går?

Inga som helst problem.

Ann-Sofie skrev:

B) supersvårt att få till texten att lägga sig runt hästen sådär snyggt i inledningen då rubriken HEJ också är en bild. Jag har testat olika varianter och nu lutar det mest åt att jag lägger HEJ som bakgrundsbild och bara lägger hästen som bild, då vandrar texten runt men jag är inte 100% säker på att det funkar i utskick.

Hmm, denna var lite klurigare men om du länkar till en extern CSS så ska det nog gå fint. ex.

 <link rel="stylesheet" type="text/css" href="http://www.mindomän.nu/nyhetbrev.css" />

Ann-Sofie skrev:

C) Det två sista bilderna ska ju ligga i linje med varandra (bottenlinjen) men detta är ju hur svårt som helst, ser det bra ut i FF vilket det oftast gör skiljer det sig supermycket i IE och tvärtom.

Tja, gör det det med en tabelldesign är det ju inte alls svårt, eller? Flera exempel nedan:

Exempel 1: Uppgift A & C

<table>
<tr>
      <td colspan="3">
             <!-- Headern -->
              <table>
                <tr>
                       <td></td>
                       <td></td>
                 </tr>
                </table>
       </td>
</tr>
<tr>
      <td> <!-- Högra spalten -->
      <table>
      <tr>
            <td></td>
       </tr>
      </table>
      </td>
      <td> <!-- Mellanspalten som fungerar som separerare --> </td>
      <td> <!-- Vänstra spalten -->
       <table>
      <tr>
            <td></td>
       </tr>
      </table>
     </td>
</tr>
<tr>
     <td colspan="3"> <!-- sidfoten -->
       <table>
      <tr>
            <td> <!-- vänsterspalt --></td>
            <td> <!-- mellanspalten igen --></td>
            <td> <!-- högerspalt --></td>
       </tr>
      </table>
     </td>
</tr>
</table>

Uff, det var länge sedan man höll på med tabellen märker jag nu ;)

Exempel 2: Uppgift B: Den kan nästan lösa enkelt med hjälp av divvar och tabeller, inte helt korrekt kanske men det tenderar att fungerar okej iallafall - men svårare med div-css enbart fast det skulle bli korrekt då. Det är som sagt Semantiskt för HTML 4.0 - inte xHTML.

<td>
 <div align="right"><img src="hast.jpg" /></div>
 <img src="hej.jpg" />

 Massa text
</td>

Edit Ber om ursäkt för att jag missade sista frågan. Se bottenkoden för "Exempel 1: Uppgift A & C".

Ann-SofieMedlem sedan mars 2003136 inlägg
#13

Ann-Sofie skrev:

när vi har testat att skicka som nyhetsbrev har jag kodat i tabell och då är det inga problem, den här designen får jag absolut inte till i tabell-form. Ser ni att det går?

Sasch skrev:

Inga som helst problem.

Jag är ledsen men jag fick problem, du kan väl kolla på https://www.invitasweden.se/ger/news/newsforum.html där jag har lagt den provisoriskt för att se hur den blir. Du ser ju källkoden att jag använt din mall men slutbilderna drar inte jämnt. Tycker också att det blir för stort glapp upptill och dessutom fick jag inte till mittenkolumnen som borde vara prickad. Testade att lägga in en bild där men den blev för lång och störde övrigt innehåll, sen blev den för kort och ja.... grr.... då slängde jag den!

Jag har en annan version (eller ärligt talat har jag rätt många just nu) som heter http://www.invitasweden.se/ger/news/novembernews_click.html där bilderna nästa är i linje (de längst ner pratar jag hela tiden om) Men den är ju inte gjord i tabell vilket jag egentligen vill.

Om du vill får du väldigt gärna titta på filerna och återkomma med feedback, det får andra också göra såklart! All feedback tas emot tacksamt!

Saschs avatarSaschMedlem sedan nov. 2002830 inlägg
#14

I första exemplet så kan du ju använda den som bakgrund och styra det med hjälp av stilmall (antingen i dokumentet (Rekomenderas ej):

 <td style="width:20px;background: url(streckad-linje-vertical.gif) repeat-y;">

 <style type="text/css">
    .middlecolumn {width:20px;background: url(streckad-linje-vertical.gif) repeat-y;}
 </style>

 <td class="middlecolumn"> <!-- Mellanspalten som fungerar som separerare --></td>

Fast det var kanske den som blev för långt ner?

Samt för att minska utrymmet i toppen skriver du:

 <style type="text/css">
 .leftcolumn {vertical-align: top; width:487px;}
 </style>

 <td class="leftcolumn"> <!-- Högra spalten som egentligen är den vänstra -->

Dock kommer inte bilderna att dra jämt då heller då det är mera innehåll i den högra än det är i den vänstra vilket automagiskt kommer ge dig massor med whitespace däri.

Din divlösning verkade ju vara väldigt fin, verkade ju som om du hade vad du behövde, endast en mindre fix för explorer behövs ju där. Placera under din style-tagg som ligger i det dokumentet.

<!--[if IE]>
    <style type="text/css">@import("ie-fix.css");</style>
<![endif]-->

I ie-fix.css:
 .box2 {
  padding-bottom: 0; /* justera efter tycke */
 }

ie-fix.css bör läggas i samma mapp som html-dokumentet. Jag har inte testat någon av koderna (allt taget ur huvudet) men det är ju bara fortstätta med lite hjälp så fortsätter vi ju att lösa det på något sätt.

Ann-SofieMedlem sedan mars 2003136 inlägg
#15

Tusen tack för din hjälp och stöd Sasch *du är en klippa*, tack vare dig så gav jag inte upp utan har trixat och grejat. Dock slutade det med fulkod så det skulle se snyggt ut i IE. Jag gör ju två versioner och den som är i tabellform är den jag skickar med i mejl-programmet - den versionen har jag fått till jättebra nu tack vare dig Sasch!

Den andra versionen är den jag kallar webbversionen och den har jag inte ändrat. Den IE fix koden som du gav mig antar jag att jag ska lägga dit när sidan ser perfekt ut i FF så fixar den koden till så det ser bra ut i IE också?

Jag har inte haft ork att gå in och ändra den idag, den får se ut så i FF. jag fick veta att den var fin i Mac Safari också så då känns ju det bra.

Men när detta har lagt sig och jag får en stund över igen typ i nästa vecka så ska jag testa och då hoppas jag att få återkomma hit och acceptera ett slutgiltigt svar alternativ hojta på mer hjälp.

jag ska inte ge mig när jag är så nära!!!!

:q En sak innan jag ger mig för ikväll är att när jag ska skriva ut den här tabell-html-sidan (http://www.invitasweden.se/ger/news/newsforum8.html) så håller inte sidan ihop. Den skrivs ut lite snett och vint, mittbilden (prickarna) skrivs ut på ett eget blad och bottentabellen på en egen sida. Skumt! Nån idé om varför det blir så eller hur man ska göra för att få utskriften som sidan ser ut? Ska man fejka och lägga en skrivut knapp som leder till den snygga pdf-filen istället? Fast pdf kanske är onödigt tungt?

Saschs avatarSaschMedlem sedan nov. 2002830 inlägg
#16

Ann-Sofie skrev:

Tusen tack för din hjälp och stöd Sasch *du är en klippa*, tack vare dig så gav jag inte upp utan har trixat och grejat. Dock slutade det med fulkod så det skulle se snyggt ut i IE. Jag gör ju två versioner och den som är i tabellform är den jag skickar med i mejl-programmet - den versionen har jag fått till jättebra nu tack vare dig Sasch!

Så lite så. tur att du inte gav upp, då hadde du ju inte fått lära dig så mycket heller ;)

Ann-Sofie skrev:

Den andra versionen är den jag kallar webbversionen och den har jag inte ändrat. Den IE fix koden som du gav mig antar jag att jag ska lägga dit när sidan ser perfekt ut i FF så fixar den koden till så det ser bra ut i IE också?

Det är ju en fördel om du är nöjd med hur det ser ut i FF (Då kan du ju räkna med att det ser ganska bra i övriga läsare med) innan du pillar vidare i IE kanske (Eftersom det nästan enbart är IE som behöver specialfix)? ;) Möjligt kan det behövas fler fixar i ie-fix.css efter du har pillat klart i den vanliga koden för FF men det kan man ju avgöra då :)

Ann-Sofie skrev:

Jag har inte haft ork att gå in och ändra den idag, den får se ut så i FF. jag fick veta att den var fin i Mac Safari också så då känns ju det bra.

Standardiserad kod FTW (For the win) ;)

Ann-Sofie skrev:

:q En sak innan jag ger mig för ikväll är att när jag ska skriva ut den här tabell-html-sidan (http://www.invitasweden.se/ger/news/newsforum8.html) så håller inte sidan ihop. Den skrivs ut lite snett och vint, mittbilden (prickarna) skrivs ut på ett eget blad och bottentabellen på en egen sida. Skumt! Nån idé om varför det blir så eller hur man ska göra för att få utskriften som sidan ser ut? Ska man fejka och lägga en skrivut knapp som leder till den snygga pdf-filen istället? Fast pdf kanske är onödigt tungt?

Hmm, I vilken webbläsare skrivs den ut konstigt? IE7 och FF ser den fin ut (relativt iallafall, den högra kolumnen är fortfarande lite längre men misstänker att det är på grund av en "<p>" i toppen för mycket kanske.

Eller menar du i konverteringen till pdf? Om du ska länka till en pdf bör du kanske skriva "pdf version (storlek i kb)" - ge dom den fina versionen i sådan fall ;) och ge en alternativ webversion kanske (div-versionen då möjligtvis)?

En möjlig anledning till att det blir helt knas när du använder plugin för IE att konvertera hemsida till pdf är möjligtvis för att de olika marginalerna för en sidvisning är annorlunda än för webbsida. Vilket gör att webbsidan kanske blir för lång. Om sidan då är gjord i tabell så styckar pdf-konverteraren om möjligt upp tabellen vilken kan ge en ganska konstig layout.

156 ms totalt · 3 externa anrop · v20260731065814-full.25f56b17
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
143 ms — hämta tråd, inlägg och bilagor (db)