Problem z CSS różnice w wygądzie stron w IE6, IE7 i FF3

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
yeetti
Nowy
Nowy
Posty: 56
Rejestracja: sob lut 11, 2006 9:30 pm

Re: Problem z CSS różnice w wygądzie stron w IE6, IE7 i FF3

Post autor: yeetti »

a po co ci ten znacznik ?
slabo sobie przypominam do czego tego potrzebowalem - zapewne do menu - jakos mi starcza okreslanie szerokosci elementow w em lub gdzies z grubsza w procentach i regulowanie pozycji elementow przez marginesy ujemne
Na górę
gorylek
Zaczyna działać
Zaczyna działać
Posty: 427
Rejestracja: śr gru 19, 2007 7:29 pm

Re: Problem z CSS różnice w wygądzie stron w IE6, IE7 i FF3

Post autor: gorylek »

Proste, w większości przypadków wystarczy że nadamy elementowi odpowiedni padding a zawartość nie pozwoli mu się zmniejszyć za bardzo. Są jednak przypadki gdy element skalowalny powinien nieć usztywnioną minimalną szerokość/wysokość niezależnie od zawartości. Od tego jest min-width/height itp.
Na górę
spider
Posty: 10
Rejestracja: sob paź 11, 2008 6:55 pm

Re: Problem z CSS różnice w wygądzie stron w IE6, IE7 i FF3

Post autor: spider »

Witam!
Wyzerowanie zewnętrznych i wewnętrznych marginesów na stronie([http://www.gcklobzenica.web-4-you.pl ) nie pomogło.
Na górę
yeetti
Nowy
Nowy
Posty: 56
Rejestracja: sob lut 11, 2006 9:30 pm

Re: Problem z CSS różnice w wygądzie stron w IE6, IE7 i FF3

Post autor: yeetti »

Przepuszczałem tez stronkę przez walidator.
ale niestety jak dotad bledy sie nie wyzerowaly ...mozna przepuszczac stronki przez validator wiecej razy niz jedyny i zawsze za friko.
Zlikwidowanie trzech prostych bledow to nie jakas wielka fucha sie nie spocisz - jak dla mnie ten temat jest poki co wyczerpany.
Na górę
yeetti
Nowy
Nowy
Posty: 56
Rejestracja: sob lut 11, 2006 9:30 pm

Re: Problem z CSS różnice w wygądzie stron w IE6, IE7 i FF3

Post autor: yeetti »

gorylek pisze:Proste, w większości przypadków wystarczy że nadamy elementowi odpowiedni padding a zawartość nie pozwoli mu się zmniejszyć za bardzo. Są jednak przypadki gdy element skalowalny powinien nieć usztywnioną minimalną szerokość/wysokość niezależnie od zawartości. Od tego jest min-width/height itp.
gorylek pytajac "na co ci to ?" nie mialem na mysli, ze nie wiem co to jest i jak dziala - mialem na mysli, ze jak dotad nie znalazlem silnej potrzeby by tego uzyc.
Moaze raz czy dwa usilowalem, ale okazywalo sie sie zbedne /lub niefunkcjonowalo dobrze/, wiec znajdowalem inna solucje
Na górę
Regulus
Nowy
Nowy
Posty: 86
Rejestracja: wt lis 13, 2007 8:40 pm

Re: Problem z CSS różnice w wygądzie stron w IE6, IE7 i FF3

Post autor: Regulus »

yeetti pisze:
Regulus pisze:gorylek@ Czas na efekt mojej walki , wiem jest dział "oceń stronę" jednak przebudowałem ją dzięki Twojej pomocy, dlatego zamieszczam link tutaj:http://mrsmok.pl/. Jakbyś mógł spojrzeć na kody CSS i HTML-a, czy wszystko jest już zgodne ze standardami? Mi się wydaje, że już prawie tak choć podejrzewam, że popełniłem jakieś błędy z pozycjonowaniem DIV-ów, w każdym razie strona wydaje się wyświetlać poprawnie w IE7 i FF3.


R.
Bardzo ladna graficznie ta strona - css validuje sie doskonale jako css 2.1 - problem z html: moj Firefox pokazuje mi na dziendobry 39 powaznych bledow i 3 ostrzezenia ...polecam zainstalowanie pod Firefoxem modulu komplementarnego HTML Validator - to pozwala kontrolowac na biezaco poprawnosc kodu.
Pozniejsza validacja przez w3c moze co prawda wykazac jeszcze jakies drobne bledy - standarty zmieniaja sie dosc czesto.


powalczyłem z tym i strona wygląda tak http:// mrsmok.midimania.pl
rozbudowana będzie o galerię
kod CSS

Kod: Zaznacz cały

		/*galeria*/
BODY 					{
        				margin-top: 0px;
        				padding-top: 0px;
        				font-size: 10px;
        				color: #000000;
        				font-family: Tahoma;
						font-size: 11px;
						text-align: justify;
						}		
			
* { padding: 0; margin: 0; }


#tlo					{
						left: auto;
						right:auto;
						padding-top: 0px;
       					margin-top: 0px;
        				margin-left: auto;
        				margin-right: auto;
						width: 780px;
						height: 400px;
						border-left: 1px solid #000000;
	    				border-right: 1px solid #000000;
    					border-bottom: 1px solid #000000;
						background-image: url(smokdol.jpg);
						}
		
		
img 					{
						border: 1px solid #000000;
						cursor: pointer;
						filter:alpha(opacity=100); 
						opacity: 0.9;
						}		
							
														
b 						{
						position:relative; 
						z-index: 200;
						}

							
p 						{
    	    			margin-top: 0px;
	        			padding-top: 0px;
        				padding-left: 10px;
        				padding-right: 10px;
        				text-align: justify;
		}
 b p .spa,
.spa1 * img				{
						filter:alpha(opacity=90); 
						opacity: 0.9;
						}									
							
p, b,
.spa, 
.sp1
						{
						display: block; 
						position: absolute;
						}							

#i1 					{
						position: absolute;
						top:0px; 
						left: 0px;
						margin-left: 10px;
						}	

#i2						{
						position: absolute;
						top: 80px;
						left: 0px;
						margin-left: 10px;
						}	

#i3						{
						position: absolute;
						top: 160px; 
						left: 0px;
						margin-left: 10px;
						}	
							
#i4						{
						position: absolute;
						top: 240px; 
						left: 0px;
						margin-left: 10px;
						}
							
#i5						{
						position: absolute;
						top: 320px; 
						left: 0px;
						margin-left: 10px;
						}
							
#i6						{
						position: absolute;
						top: 0px; 
						left: 103px;
						margin-left: 10px;
						}
							
														
#i7						{
						position: absolute;
						top: 80px; 
						left: 103px;
						margin-left: 10px;
						}	
													
#ismok					{
						position: absolute;
						top: 172px; 
						margin-left: 110px;
						font-weight: bold;
        				font-family: BeinetCondensed, tahoma;
        				text-align: right;
        				font-size: 24px;
        				color: #FFFFFF;
						}
														
														
#i8						{
						position: absolute;
						top: 240px; 
						left: 103px;
						margin-left: 10px;
						}
																					
														
														
#i9						{
						position: absolute;
						top: 320px; 
						left: 103px;
						margin-left: 10px;
						}
							
#i10 					{
						position: absolute;
						top:0px; 
						left: 663px;
						margin-left: 10px;
						}			

							
#i11 					{
						position: absolute;
						top:80px; 
						left: 663px;
						margin-left: 10px;
						}								

#i12 					{
						position: absolute;
						top: 160px; 
						left: 663px;
						margin-left: 10px;
						}							
						
#i13					{
						position: absolute;
						top:240px; 
						left: 663px;
						margin-left: 10px;
						}	
																					
														
														
.strzalka				{
						position: absolute;
						left: 663px;
						margin-left: 10px;
						top: 320px; 
        				font-family: BeinetCondensed, tahoma;
						}					

b .spa,
b .spa1					{
						visibility:hidden;
						position:absolute;
						padding-top: 10px;
						}    


b:hover .spa, 
b:hover .spa1,
b.msieFix .spa, 
b.msieFix .spa1			{
						visibility:visible;
						}

					
fieldset 				       {
						z-index: 100;
						}
							

a						{
						background-image: url(dalej_a.gif);
						width:95px;		
						height: 71px;
						color: green;
						border: 1px dotted #000000;
						cursor: pointer;
						}
								
a:hover 				{
						background-image: url(dalej_b.gif);
						color: red;
						}	
					
/************przykładowe ustawienia************/
.spa					{
						background:#ddb; 
						width:202px; 
						height: 172px; 
						top:0px; 
						left:230px; 
						border: 1px solid #000000; 
						z-index: 2;
						filter:alpha(opacity=90); 
						opacity: 0.9;
						}
.spa1 							
							
	
						{
						background:#ddb; 
						width:404px; 
						height: 380px; 
						top:0px; 
						left:230px; 
						border: 1px solid #000000; 
						z-index: 2;
						filter:alpha(opacity=90); 
						opacity: 0.9;
						}
kod HTNL:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2"/>
<META NAME="Keywords" CONTENT="adam, bórkowski, muzyka, elektroniczna"/>
<META NAME="Description" CONTENT="Strona poszukiwacza barw, twórcy muzyki elektronicznej. Adam Bórkowski"/>
<META NAME="Author" CONTENT="Wawrzyniec"/>
<META NAME="Robots" CONTENT="index"/>
<LINK rel="stylesheet" HREF="galeria.css" type="text/css" />


<TITLE>Mr. Smok Adam Bórkowski</TITLE>
</HEAD>
<BODY>
<div id="tlo">
<b onmouseover="this.className='msieFix'" onmouseout="this.className=''">
<IMG SRC="smok-m1.png" WIDTH="95" HEIGHT="71" BORDER="0"id="i1"/>
<p class="spa">
<IMG SRC="smok-m1.png" WIDTH="200" HEIGHT="150" BORDER="0" ALT=""/><BR/>opis 1</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m2.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" id="i2"/>
<p class="spa">
<IMG SRC="smok-m2.png" WIDTH="200" HEIGHT="152" BORDER="0" ALT=""/><BR />opis 2</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m3.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i3"/>
<p class="spa1">
<IMG SRC="smok-m3.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""><BR />opis 3</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m4.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i4"/>
<p class="spa1">
<IMG SRC="smok-m4.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""/><BR />opis 4</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m5.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i5"/>
<p class="spa1">
<IMG SRC="smok-m5.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""><BR />opis 5</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m6.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i6"/>
<p class="spa1">
<IMG SRC="smok-m6.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""/><BR />opis 6</p></b>

<p id="ismok">Mr Smok<BR>Galeria</p>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m7.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i7"/>
<p class="spa1">
<IMG SRC="smok-m7.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""/><BR />opis 7</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m8.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i8"/>
<p class="spa1">
<IMG SRC="smok-m8.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""/><BR />opis 8</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m9.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i9">
<p class="spa1">
<IMG SRC="smok-m9.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""/><BR />opis 9</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m10.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i10"/>
<p class="spa1">
<IMG SRC="smok-m10.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""/><BR />opis 10</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m11.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i11"/>
<p class="spa1">
<IMG SRC="smok-m11.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""/><BR />opis 11</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m12.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i12"/>
<p class="spa1">
<IMG SRC="smok-m12.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""/><BR />opis 12</p></b>

<b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
<IMG SRC="smok-m13.png" WIDTH="95" HEIGHT="71" BORDER="0" ALT="" ID="i13"/>
<p class="spa1">
<IMG SRC="smok-m13.png" WIDTH="400" HEIGHT="299" BORDER="0" ALT=""/><BR />opis 11</p></b>

<p><A HREF="#" class="strzalka"></A></p>
</div>
</BODY>
</HTML>
i tu się pojawia problem z walidacją poprawności kodu hrml, jak to poprawić napisać by było ok? Strona wprawdzie wyświetla się prawidłowo we wszystkim ale jednak są ostrzeżenia validatora.


R.
Na górę
ODPOWIEDZ

Wróć do „Technologie WWW - cz. 1 Client-side (HTML, CSS, JAVA SCRIPT)”