webForumDet fria alternativet
Logga in

CSS problem

13 svar · 1 991 visningar · startad av 7516463

7516463Medlem sedan dec. 201349 inlägg
#1

Hej.

Jag har ett problem.

Jag håller på att göra om min sida till en responsiv sida. Allt funkar bra men när jag surfar in på en mobil så ändras tekenstorleken i två av de tre boxarna jag har på sidan.

Jag använder en extern css fil och jag har inga speciellt font taggar för de olika boxarna utan kör hela fontinställningarna från "body"taggen.

Är det de mobila webläsarna som tolkar samma kod olika på olika ställen på sidan eller är det något jag missat?

tacksam för hjälp :bire

voigtann1Medlem sedan juni 20019 519 inlägg
#2

du få nog ge lite kod så man kan se och återskapa problemet.

7516463Medlem sedan dec. 201349 inlägg
#3

CSS filen

Här är CSS filen...

body {font-size:100%;}
table, td, th, p {font-size:1.0em;} 
#wrap {
max-width: 800px;
margin-left: auto ;
margin-right: auto ;

}
#main {
float: left;
width: 58%;
background-color: #ffffff;
border-radius: 15px;
padding: 1px;	
border: 1px solid #000000;
font-size: 10px ;
font-family: verdana;

}
#right {
float: right;
width: 40%;
background-color: #ffffff;
border-radius: 15px;
padding: 1px;	
border: 1px solid #000000;
font-size: 10px ;
font-family: verdana;
}
#bottom
{
float: right;
width: 100%;
background-color: #ffffff;
border-radius: 15px;
padding: 1px;	
border: 1px solid #000000;
font-size: 10px ;
font-family: verdana;
margin: 5 -4 100 150px;
}

.rubrik {
		background-color:#C0c0c0;
		vertical-align:text-top;
		font-family: verdana, Times, serif;
		font-size: 15px;
		text-align:center;
		border-radius: 15px;
		font-weight:bold; 
}
#top
{
		width:100%;
		background-color:#b0e0e6;
		border-radius: 15px;
		padding: 1px;	
		border: 1px solid #000000;
		margin-left: auto ;
		margin-right: auto ;
}

@media screen and (max-width: 1000px) {
#main {
float: none;
width: 95%;

}
#right {
float: none;
width: 95%;
margin: 2 0 0px; 
}
#bottom {
float: none ;
width: 95%;
margin: 2 0 0px; 
}
}
img {
max-width: 100%;
height: auto;
width: 100%
}
Danne VMedlem sedan aug. 20068 090 inlägg
#4

Att bara se stilmallen säger inte ett smack. Du måste ju visa källkoden också och ange var och hur fonterna visas.

Men du har ju två fontstorlekar angivna:

body {font-size:100%;}
table, td, th, p {font-size:1.0em;}

Ta bort den andra och kolla hur det blir då. Eller sätt båda till samma storlek och enhet, dvs antingen 100% eller 1.0 em.

7516463Medlem sedan dec. 201349 inlägg
#5

Det lustiga är att det verkar bara var på den php fil som är "includade" där finns en massa Tabeller och databas anrop men inget som har med font storleken att göra. Om jag skriver en tabell i lorem.txt filen så blir det rätt

Under Main DIV så är texten som den ska men på right DIV så är texten mycket mindre.

<HTML>
<HEAD>
<link href="CSS.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV ID="wrap">
<IMG SRC="logo.jpg">
<BR><BR>
<DIV ID="main">
<?php include "lorem.txt"; ?><BR>
</DIV>
<DIV ID="right">
<?php include "fil1.php"; ?>
</DIV>
<DIV id="bottom">
<TABLE><TR><TD>Botten <BR></TD></TR></TABLE>
</DIV>
</DIV>
</BODY>
</HTML>

här är php-filen

<?php     

$filen = fopen ( "c:/fil.txt", "r" ); 
$date =  date('Y-m-d H:i:s');

if ( $filen ) 
{ 
        
        //echo "Så här ser filen ut<br />"; 
        //while( ! feof ( $filen ) ) 
{ 
           
$raden = fgets ( $filen, 255 ); 
           
            
} 
rewind ( $filen ); 

         //while( ! feof ( $filen ) ) 
        { 
            
$raden = fgetcsv ( $filen, 255 , ";" ); 
$dag = round ($raden[14]/$raden[5] ,2);
$timme = round ($dag*24,0);
$lager = 512;
$lagertot = $lager+$raden[14];
$tidlager = round ($lagertot/$raden[5] ,2);
$tidlager = round ($lagertot/$raden[5]*24);
$dagar = $timme/24;
$hela_dagar = floor($dagar); // 2
$del_av_dag = $dagar - $hela_dagar; // 0.25
$timmar = round ($del_av_dag*24 ,0);
$dagar2 = $tidlager/24;
$hela_dagar2 = floor($dagar2); // 2
$del_av_dag2 = $dagar2 - $hela_dagar2; // 0.25
$timmar2 = $del_av_dag2 * 24;

echo '<TABLE width="100%">';
echo '<TR>';
echo '<TD colspan="2" class="rubrik">Pelletsf&ouml;rbrukning</TD>';
echo '</TR>';
echo '<TR>';
echo '<TD>'; 
echo "Senaste puls: ";
echo "</TD>";
echo '<TD>';
$datetime1 = new DateTime($raden[0]);
$datetime2 = new DateTime($date);
$interval = $datetime1->diff($datetime2);
echo $interval->format('%i min och %s sek sedan');
echo "</td>";
echo "</TR>";
echo "<TR>";
echo "<TD>";
echo "Antal dagars loggtid:";
echo "</TD>";
echo "<TD>";
echo round ($raden[2]/60/24 ,2),' dagar' ; 
echo "</TD>";
echo "</TR>";
echo "<TR>";
echo "<TD>";
echo "Totalt f&ouml;rbr. pellets:";
echo "</TD>";
echo "<TD>";
echo $raden[3],' kg';
echo "</TD>";
echo "</TR>";
echo "<TR>";
echo "<TD>";
echo "Snittf&ouml;rbrukning:";
echo "</TD>";
echo "<TD>";
echo $raden[5],' Kg/dygn ('; echo round ($raden[5]/16,1),' S&auml;ck)' ;
echo "</TD>";
echo "</TR>";
echo "<TR>";
echo "<TD>";
echo "F&ouml;rbr. senaste 24h:";
echo "</TD>";
echo "<TD>";
echo $raden[6],' Kg';
echo "</TD>";
echo "</TR>";
echo "<TR>";
echo "<TD>";
echo "N&auml;sta p&aring;fyllning:";
echo "</TD>";
echo "<TD>";
echo $hela_dagar,' dag(ar) och ';
echo round ($timmar,1),' timmar';
echo round ($raden[14]/$raden[5]*24 ,2),' timmar' ; 
echo round ($raden[5]/24/60/60 ,2),' minuter' ; 
echo "</TD>";
echo "</TR>";
echo "<TR>";
echo "<TD>";
echo "Kvar i matarf&ouml;rr&aring;det:";
echo "</TD>";
echo "<TD>";
echo $raden[14],' kg/182 kg (' ; echo round($raden[14]/182*100,0),'%)' ;
			echo "</TD>";
			echo "</TR>";
			echo "<TR>";
			echo "<TD>";
			echo "Kvar i lager:";
			echo "</TD>";
			echo "<TD>";
echo $lager,' kg (Totalt ' ; echo round($lager+$raden[14]),' kg)';
			echo "</TD>";
			echo "</TR>";
			echo "<TR>";
			echo "<TD>";
			echo "Tot. m&auml;ngden r&auml;cker i:";
			echo "</TD>";
			echo "<TD>";
echo $hela_dagar2,' dag(ar) och ';echo $timmar2,' timmar';

			echo "</TD>";
			echo "</TR>";
			echo "<TR>";
echo '<td COLSPAN="2"><A HREF="graf.php#pellets">Grafer &ouml;ver pelletsf&ouml;rbrukningen</A></TD>';
			echo "</TR>";
			echo "</TABLE>";
			
		 

    } 
    else 
    { 
        echo "Det sket sig!"; 
    } 
     	
			
    fclose ( $filen ); 
?>
7516463Medlem sedan dec. 201349 inlägg
#6

Ni kan kika på sidan med en mobiltelefon så ser ni hur texten blir. Jag kollar på en Samsung Galaxy Note 2 med både firefox och chrome som webläsare. På min Sony Xperia tablet z och en vanlig dator så ser allt bra ut.

edit: en adress vore bra ;)
http://hakansta.com/test
http://hakansta.com:8080/test

7516463Medlem sedan dec. 201349 inlägg
#7

felsökning 101

Har lyckats få reda på att det är databasfilen som strular till fontstorleken. men det är att gå igenom den rad för rad och se var felet ligger

7516463Medlem sedan dec. 201349 inlägg
#8

nähä det var visst inte det... jag fattar inte vad det är för fel.

När jag fått till det med tabellen så blir delar av rubriken pytteliten istället.

I den mobila chrome har tabellen rätt fontstorlek men inte rubriken...och i mobila firefox är ingen av fonterna rätt.

Danne VMedlem sedan aug. 20068 090 inlägg
#9

Jamen alltså....

Jag skrev ett svar ovan. Det verkar som om du inte ens läste det. Om man försöker hjälpa kan det ju vara en bra idé att ge lite återkoppling...

Kollade nu webbplatsen och stilmallen. Tvärtom mot vad du skriver ovan har du ju ingen fontstorlek alls angiven i css.css. Det innebär att webbläsaren slänger in den font och fontstorlek den har som default för olika element.

Alltså: Ange en font och -storlek för body i stilmallen så är saken klar.

voigtann1Medlem sedan juni 20019 519 inlägg
#10

kan ju vara så att olika webbläsare har olika default värden på element.

7516463Medlem sedan dec. 201349 inlägg
#11

Jag har provat med alla alternativ när det gäller font i CSS-filen. haft font taggar under Body då ska den oavsett tabeller eller inte ha samma teckenstorlek över hela dokumentet, har även haft separata fonttaggar för tabeller men det är samma sak där. Jag provar hela tiden med olika taggar och alternativ, därför är filen annorlunda nu än det som jag skrev in här.

När det gäller olika webläsares olika tolkningar så kan det stämma att den gör det men sidan är kodad i HTML5 och CSS3 så det ska inte vara olika på olika webläsare... dock kanske det är så med mobila webbläsare.

Just nu är det bara rubrikerna i de gråa fälten som har fel teckenstorlek.

så här ser CSS filen ut nu. och jag har inga taggar i HTML-dokumentet

body, td {
font: normal 12px/150% verdana;
padding: 0px;
border-width: 5px;
}
#wrap {
max-width: 850px;
margin-left: auto ;
margin-right: auto ;

}
#main {
float: left;
width: 58%;
background-color: #ffffff;
border-radius: 15px;
padding: 1px;	
border: 1px solid #000000;

}
#right {
float: right;
width: 40%;
background-color: #ffffff;
border-radius: 15px;
padding: 1px;	
border: 1px solid #000000;
}
#bottom
{
float: right;
width: 100%;
background-color: #ffffff;
border-radius: 15px;
padding: 1px;	
border: 1px solid #000000;
margin: 5px -4px 100px 150px;
}

.rubrik {
		background-color:#C0c0c0;
		vertical-align:text-top;
		text-align:center;
		border-radius: 15px;
		width: 900px;
}
#top
{
		width:100%;
		background-color:#b0e0e6;
		border-radius: 15px;
		padding: 1px;	
		border: 1px solid #000000;
		margin-left: auto ;
		margin-right: auto ;
}

@media screen and (max-width: 1000px) {
#main {
float: none;
width: 95%;
margin-left: auto ;
margin-right: auto ;
}
#right {
float: none;
width: 95%;
margin: 2px 0px 0px; 
margin-left: auto ;
margin-right: auto ;

}
#bottom {
float: none ;
width: 95%;
margin: 2px 0px 0px; 
margin-left: auto ;
margin-right: auto ;
}
}
img {
max-width: 100%;
height: auto;
width: 100%
}
voigtann1Medlem sedan juni 20019 519 inlägg
#12

7516463 skrev:

sidan är kodad i HTML5 och CSS3 så det ska inte vara olika på olika webläsare

Alla webbläsare har en egen standard CSS, har inget med HTML5 eller CSS3 att göra.

Få man fråga varför du bygger delar av sajten i tabeller? känns lite onödigt på det flesta ställerna?

7516463Medlem sedan dec. 201349 inlägg
#13

När det gäller Databas delen måste jag nästan ha tabeller... det andra är mest för att testa om det var tabellerna som skapade problemet...men som tidigare sagt så är det bara rubrikerna som storleken inte stämmer med... och det får jag leva med ett tag.

Skulle vara kul och veta om det är så med alla telefoner... så om ni testar med era telefoner och beträttar för mig om det blir så vore det bra.

Danne VMedlem sedan aug. 20068 090 inlägg
#14

7516463 skrev:

Jag har provat med alla alternativ när det gäller font i CSS-filen. haft font taggar under Body då ska den oavsett tabeller eller inte ha samma teckenstorlek över hela dokumentet, har även haft separata fonttaggar för tabeller men det är samma sak där. Jag provar hela tiden med olika taggar och alternativ, därför är filen annorlunda nu än det som jag skrev in här.

När det gäller olika webläsares olika tolkningar så kan det stämma att den gör det men sidan är kodad i HTML5 och CSS3 så det ska inte vara olika på olika webläsare... dock kanske det är så med mobila webbläsare.

Just nu är det bara rubrikerna i de gråa fälten som har fel teckenstorlek.

så här ser CSS filen ut nu. och jag har inga taggar i HTML-dokumentet

body, td {
font: normal 12px/150% verdana;
padding: 0px;
border-width: 5px;
}

Förlåt mig, men du verkar mer än lovligt förvirrad.

Vaddå "fonttaggar"???? Dom övergavs för tio år sen. Vad exakt menar du?

Har du ens orkat tömma cache när du ändrat stilsättningen så att du är säker på att du inte tittar på fel formatering?

Varför lägga till "td" till stilen för body? Vad menar du med att body ska ha en border på 5 px, men inte anger färg, typ osv?

Och varför köra med fontstorlek i px, men line-height i %? Du hade liknande konstigheter tidigare med em och %. Håll dig till det ena eller andra, men var konsekvent!

Alltså: Så länge du bara formaterar body med en viss font, fontstorlek och radavstånd på rätt sätt så kommer stilen att slå igenom hela sajten. Det bara är så. Vill du vara ÄNNU mer säker på det, så kläm in ett "!important" i stilmallen så här:

font: normal 12px/16px verdana, sans-serif!important;

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