Forum Mjukvara Programmering och digitalt skapande Tråd

Optimera hemsida för utseende hos webbläsare.

1
Skriv svar
Permalänk
Medlem ★
●

Optimera hemsida för utseende hos webbläsare.

Jag håller på att designa en sida som inte riktigt går med på vad jag gör.

I Safari, FireFox och Chrome så är hemsidan nästan exakt likadan på varje, men såfort jag öppnar IE så ser sidan omkastad ut.
Bilder:
Chrome; Safari; FireFox och till sist, problemet: IE.

Jag har ärligt talat ingen aning hur jag löser det här men jag hoppas ni ninjor på html kan hjälpa mig med detta.
Källkod här under.

Index.html

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
    <link href="stylepath" rel="stylesheet" />
<![endif]-->
<html>
<head>

</head>

<body>
<div id="Header">
<div id="Header_Main">
<img src="graphics/logotype_transparent.png"/>
<p><a href="#">Webbplatsöversikt</a>    |    <a href="#">Om företaget</a>    |    <a href="#">Kontakta oss</a><form method="get" action="http://www.mysite.com/search.php"> 
<table cellpadding="0px" cellspacing="0px"> 
<tr> 
<td>
<input type="text" name="username" value="Skriv in ditt sökord" class="input_search"> 
</td>
<td> 
<button type="submit" value="ok" class="button_search">
</td>
</tr>
</table>
</form></p>

</div>

<div class="menubar">
 
</div>
</div>

    <div id="container">
    
        <div class="content">
        
    <div id="sidebar">
        
        
        <div class="sidebar_box_top_news">
            <p>Nyheter</p>
        </div>
    	<div class="sidebar_box">
        	<p>
            Testnyhet <br/>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae justo sed augue semper blandit ut et eros. Nunc auctor a mauris.<br/><a href="#">Läs hela nyheten >></a>
            </p>
        </div>
        
        
        <div class="sidebar_box_top_login">
            <p>Logga in</p>
        </div>
    	<div class="sidebar_box_login">
        	<input type="text" name="username" value="Användarnamn" class="input_username">
        	<input type="password" name="username" value="Lösenord" class="input_password"><input type="submit" value="Ok" class="button"><br/><br/>
            <a href="#">Har du glömt ditt lösenord?</a>
        </div>
    </div>   
        <img src="graphics/content.jpg"/>
        
            <div class="content_adjust">
            
            <h1>Huvudrubriken sitter fint h&aumlr</h1>
            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut suscipit diam. Donec posuere sem sem, sit amet tincidunt nunc fauc.</h4><p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut siscipit diam. Donec posuere sem sem, sit amet tincidunt nunc faucibus vel. Donec consequat dui eros, a porta tellus tincidunt sit amet. In libero libero, tincidunt ut blandit quis, sodales a eros. In tellus ligula, posuere a rutrum et, dignissim nec augue. Nulla est felis, volutpat id lorem vitae, tempor aliquet ante.
            </p>
            
                <div class="content_decoration">
                        <img src="graphics/box.jpg"/>
                        
                            <div class="content_decoration_content">
                            <table>
                            <tr>
                            <tr>
                                <td><h2>Mer information</h2></td>
                                </tr>
                                <tr>
                                <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut<br/>suscipit diam. Donec posuere sem sem, sit amet tincidunt nunc faucibus vel.</p></td>
                                </tr>
                            </div>
                            </tr>
                            </table>
                </div>
                
            </div>
        </div>     
    </div>
</div>
<div id="Footer">
	<div id="footer_adjust">
    
    <table style="float:left">
    <tr>
    <td>
    <b>Om företaget</b>
    </td>  
    <td>
    	<b>Kontakt</b>
    </td>
    <td>
    	<b>Snabblänkar</b>
    </td>
    </tr>
    <tr>
    <td>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut<br/>suscipit diam. Donec posuere sem sem, sit amet tincidunt nunc faucibus<br/>vel. Donec consequat dui eros, a porta tellus tincidunt sit amet. In libero.</p>
    </td>
    <td>
    <p>Telefon: 063 - 701 08 01<br/>Fax: 063 - 701 08 00<br/>E-post: <a href="#">info@internetmedia.se</a>
    </td>
    <td>
    <a href="#">Underlänkar</a><br/>
    <a href="#">Underlänkar #2</a><br/>
    <a href="#">Underlänkar #3</a><br/>
    </td>
    </tr>
    </table>
    </div>
</div>
</body>


</html>
Dold text

CSS

html, body
{
	width: 100%;
	height: 100%;
	background-color: #FFF;
	padding 0;
	margin: 0;
}

/* main div */

#container
{
	width: 600px;
	background-color: #FFF;
	height: auto;
	margin: 20px 0 20px 0;
	margin-left: 550px;
	float: left;
}

/* Content */

.content
{
	float:left;
	width: 800px;
}
.content img
{
width: 100%;
max-width: 600px;
height: auto;
}

.content_adjust
{
	margin-left: 15px;
	
max-width: 600px;
}

.content_adjust p
{
	font-size: 9.38pt;
}

.content_adjust h1 {
	font: 24pt "Museo 300", Helvetica, Arial, sans-serif;
	color: #000;
	padding: 5 0 5 0;
	margin: 0;
}

.content_decoration
{
	height: 75px;
	background-color: #fafafa;
	margin: 20px 0 20px 0;
}

.content_decoration img
{
	height: 75px;
	width: auto;
	float:left;
}

.content_decoration h2
{
	font: 16pt "Museo 500", Helvetica, Arial, sans-serif;
	color: #5f5e66;
}

.content_decoration_content
{
	font-size: 16px;
	height: 75px;
	width: auto;
}

.content_decoration_content h2
{
	float: left;
	padding: 0;
	padding-left: 20px;
	margin: 0;
}

.content_decoration_content p
{
	font-size: 12px;
	text-align: left;
	padding-left: 20px;
	float: left
	position: absolute;
}

/* sidebar */

#sidebar
{
	width: 100px;
	height: auto;
	float: right;
}

.sidebar_box_login
{
	-webkit-border-radius:  0 0 10px 10px;
	-moz-border-radius:  0 0 10px 10px;
	border-radius:  0 0 10px 10px;
	float: right;
	height: 130px;
	width: 180px;
	background-color: #fafafa;
}

.sidebar_box_login a
{
	font-size: 10.5px;
	margin-left: 10px;
}

.sidebar_box
{
	-webkit-border-radius:  0 0 10px 10px;
	-moz-border-radius:  0 0 10px 10px;
	border-radius:  0 0 10px 10px;
	float: right;
	height: 180px;
	width: 180px;
	background-color: #fafafa;
}

.sidebar_box p
{
	padding-left: 10px;
	line-height: 160%;
	font-size: 12px;
}

.sidebar_box_top_news
{
	background-color: #050505;
	font: 13.5pt "Museo 500", Helvetica, Arial, sans-serif;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	color: #FFF;
	width: 180px;
	height: 40px;
	float: inherit;
}

.sidebar_box_top_news p
{
	line-height: 8px;
	width: auto;
	padding-left: 10px;
}

.sidebar_box_top_login
{
	background-color: #050505;
	font: 13.5pt "Museo 500", Helvetica, Arial, sans-serif;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	color: #FFF;
	width: 180px;
	height: 40px;
	float: inherit;
	margin-top: 40px;
}

.sidebar_box_top_login p
{
	line-height: 8px;
	width: auto;
	padding-left: 10px;
}

/* Inputs */

.input_search {
  border: 1px solid #d8d8d8;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
  font-size: 12px;
  padding: 14px 7px;
  border-right: 0px;
  outline: 0;
  width: 130px;
  -webkit-appearance: none;
}

.input_username {
  border: 1px solid #d8d8d8;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font-size: 12px;
  padding: 4px 7px;
  outline: 0;
  width: 160px;
  margin-top: 15px;
  -webkit-appearance: none;
}

.input_password {
  border: 1px solid #d8d8d8;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font-size: 12px;
  padding: 4px 7px;
  outline: 0;
  width: 115px;
  -webkit-appearance: none;
}

input:focus {
  border-color: #339933;
}

input
{
	margin-left: 10px;
}

/* Buttons */

.button
{
	  color: #94df34;
	  background-color: #242424;
	  -moz-border-radius: 3px;
	  -webkit-border-radius: 3px;
	  border-radius: 3px;
	  border: 0px;
}

.button_search{
    background: url(../graphics/search.png);
	-moz-border-radius: 0 3px 3px 0;
	-webkit-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;  
    width:1cm;
    height:1.15cm;
    border:none;
    cursor:pointer;
}


/* Header */

.menubar li
{
	float:left;
	background-color: #FFF;
	width: 3.14cm;
	height: 1.71cm;
	max-height: 50px;
	border-left: solid 1px #e1e1e1;
	border-right: solid 1px #e1e1e1;

}

.menubar a
{
	display:block;
	line-height: 150%;
	width:auto;
	vertical-align: middle;
}

.menubar
{
	float:left;
	width: 800px;
	margin: 0 auto 0 auto;
	height: 50px;
	background-color: #f4f4f3;
	bottom: 0;
	left: 0;
}

#Header
{
	height: 160px;
	
	background: -moz-linear-gradient(top, #FAFAFA, #FCFCFC);
	
	background: -webkit-gradient(linear,
            left top, left bottom, from(#FAFAFA), to(#FCFCFC));
			
	filter: progid:DXImageTransform.Microsoft.Gradient(
            StartColorStr='#FAFAFA', EndColorStr='#FCFCFC', GradientType=0);
  padding: 0;
}

#Header_Main
{
	width: 800px;
	padding-top: 40px;
	margin-left: auto;
	margin-right: auto;
}

#Header_Main p
{
	text-align: center;
	padding-left: 50px;
	float:left;
}

#Header_Main a
{
	color: #000;
	font-style: normal;
	text-decoration:underline;
}

#Header_Main a:hover
{
	color: #000;
	font-style: normal;
	text-decoration:none;
}

#Header_Main img
{
	margin: 20px auto 0 auto;
	float:left;
}

/* footer */

#Footer
{
	background: -moz-linear-gradient(top, #FAFAFA, #FCFCFC);
	
	background: -webkit-gradient(linear,
		left top, left bottom, from(#FAFAFA), to(#FCFCFC));
		
	filter: progid:DXImageTransform.Microsoft.Gradient(
		StartColorStr='#FAFAFA', EndColorStr='#FCFCFC', GradientType=0);
		
	position: fixed;
	bottom:0;
	width:100%;
	height:180px;
}

#footer_adjust
{
	width: 880px;
	margin-left: auto;
	margin-right: auto;
}

#footer_adjust b
{
	padding: 0;
	margin: 0;
}

#footer_adjust table
{
	border-spacing: 20px;
}


/* fonts and text */

a{
	color: #609022;	
}


b{
	font: 12pt "Museo 500", Helvetica, Arial, sans-serif;
}

h4{
	font: 13.5pt "Museo 500", Helvetica, Arial, sans-serif;
	color: #5f5e66;
	padding: 8 0 10 0;
	margin: 0;
}


@font-face {
font-family: "Museo 300";
src: url("../fonts/Museo300-Regular.eot");
src: local("../fonts/Museo 300"), local("Museo 300"),
url("../fonts/Museo300-Regular.otf") format("opentype");
}

@font-face {
font-family: "Museo 500";
src: url("../fonts/Museo500-Regular.eot");
src: local("../fonts/Museo 500"), local("Museo 500"),
url("../fonts/Museo500-Regular.otf") format("opentype");
}


@font-face {
font-family: "Museo 700";
src: url("../fonts/Museo700-Regular.eot");
src: local("../fonts/Museo 700"), local("Museo 700"),
url("../fonts/Museo700-Regular.otf") format("opentype");
}
Dold text
Visa signatur

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!
AzireVPN - Felkod40

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tables ska ENDAST användas till att presentera data på ett vettigt sätt, inte till positionering som du har använt det till. Det har du css till. Förövrigt vet jag inte vad som är fel på koden (kollade knappt), men IE är kända för att vara allmänt buggiga... Kan rekommendera att använda utvecklar-, och debug-verktygen som följer med respektive webbläsare (eller okej, firebug är the shit till firefox), då får du snabbare en överblick av varför sidan ser ut som den gör.

Värt att nämna är att "margin: 0 auto;" är den css-regel som centrerar ett objekt (förutsatt att objektet har en bestämd bredd). Kan vara värt att lägga hela sidan i en div-tagg med endast en bredd och margin: 0 auto; för att testa.

Visa signatur

CPU: Intel i5 2500K @ 4,7GHz Mobo: Asus P8Z68-V
GPU: Asus STRIX 970 RAM: 8GB Corsair Vengence 1600 MHz CL9
PSU: OCZ ModXStream 700W Chassi: NZXT Phantom

Citera så att jag hittar tillbaka!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Du har massa floats, men inget som stoppar den att fortsätta ut i intet.
Läs på om hur man rensar floats så att dom inte förstör din layout:
http://www.quirksmode.org/css/clearing.html

Som jag ser så är det inget fel med IE, utan den verkar köra med nolltolerans för sådana misstag, dvs, den visar den som den borde se ut. Andra webbläsare vet jag brukar kunna vara lite snälla med detta. Dock ser jag några av felen i de andra webbläsarna också.

Sluta använda tables för att strukturera hemsidan/element, det är det CSS klasser är till för.
Tables är som sagt för visning av data.

Sluta använda HTML kod för att skapa avstånd:
    |    

Margin & padding används för att sätta avstånd mellan element.

Senast redigerat
Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Florrpan:

Du har massa floats, men inget som stoppar den att fortsätta ut i intet.
Läs på om hur man rensar floats så att dom inte förstör din layout:
http://www.quirksmode.org/css/clearing.html

Som jag ser så är det inget fel med IE, utan den verkar köra med nolltolerans för sådana misstag, dvs, den visar den som den borde se ut. Andra webbläsare vet jag brukar kunna vara lite snälla med detta. Dock ser jag några av felen i de andra webbläsarna också.

Sluta använda tables för att strukturera hemsidan/element, det är det CSS klasser är till för.
Tables är som sagt för visning av data.

Sluta använda HTML kod för att skapa avstånd:
    |    

Margin & padding används för att sätta avstånd mellan element.

Gå till inlägget

Tack, du är grym, ska läsa och lära.

Skrivet av csoLs:

Tables ska ENDAST användas till att presentera data på ett vettigt sätt, inte till positionering som du har använt det till. Det har du css till. Förövrigt vet jag inte vad som är fel på koden (kollade knappt), men IE är kända för att vara allmänt buggiga... Kan rekommendera att använda utvecklar-, och debug-verktygen som följer med respektive webbläsare (eller okej, firebug är the shit till firefox), då får du snabbare en överblick av varför sidan ser ut som den gör.

Värt att nämna är att "margin: 0 auto;" är den css-regel som centrerar ett objekt (förutsatt att objektet har en bestämd bredd). Kan vara värt att lägga hela sidan i en div-tagg med endast en bredd och margin: 0 auto; för att testa.

Gå till inlägget

Tack

Visa signatur

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!
AzireVPN - Felkod40

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Din HTML-kod ser ju rätt så trasig ut. Du anger ingen doctype vilket gör att IE automatiskt går in i quriks-mode och då är du körd. Sen har du lite taggar innan din <html>-tag, de taggarna borde ju rimligtvis ligga inom <head>.

Se till att HTML och CSS validerar så är du en bit på väg; http://validator.w3.org/ samt http://jigsaw.w3.org/css-validator/.

Visa signatur

WS: Antec P182B | FSP Aurum 500W | Asus P8Z77-V PRO | i5 3570k | 16GB DDR3 | Intel 320 80GB SSD | HDD 5TB | Asus Xonar DX | Arch Linux (x86_64) | Eizo EV2795
HTPC: Philips 50PUS8804, Kodi samt extern usb-disk
Server: Raspberry Pi 3 model B+ | 1GB RAM | HDD 750GB | Arch Linux (armv7h)

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av '[vEX:

;13784635']Din HTML-kod ser ju rätt så trasig ut. Du anger ingen doctype vilket gör att IE automatiskt går in i quriks-mode och då är du körd. Sen har du lite taggar innan din <html>-tag, de taggarna borde ju rimligtvis ligga inom <head>.

Se till att HTML och CSS validerar så är du en bit på väg; http://validator.w3.org/ samt http://jigsaw.w3.org/css-validator/.

Ja, ursäkta. Är van vid C# men ska in på HTML lite mer.
Ska fixa det där, gjorde det redan innan du anmärkte och det vart stor skillnad.
Tack för anmärkningen dock, vill göra rätt från början, men har åtminstone gjort ett försök
Första gången jag programmerar html på 4 år.

Visa signatur

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!
AzireVPN - Felkod40

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Inget att be om ursäkt om.

Men som du märkte så är IE utan doctype inget man vill ha att göra med, quirks-mode är ett helvete. Jag vet inte hur illa det är med nyare IE, men i 6an så vart hela boxmodellen trasig i quirks-mode.

Visa signatur

WS: Antec P182B | FSP Aurum 500W | Asus P8Z77-V PRO | i5 3570k | 16GB DDR3 | Intel 320 80GB SSD | HDD 5TB | Asus Xonar DX | Arch Linux (x86_64) | Eizo EV2795
HTPC: Philips 50PUS8804, Kodi samt extern usb-disk
Server: Raspberry Pi 3 model B+ | 1GB RAM | HDD 750GB | Arch Linux (armv7h)

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

<!DOCTYPE html>

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag föredrar att alltid börja med CSS-reset, även om det kanske inte löser det i ditt fall.
Men bra är det!

"Slår ut"/tar bort alla "fördomar" webbläsare har av hur de ska tolka t.ex. rubriker m.m. Så du får göra allt från scratch istället med classer, men blir bättre (Y)

http://meyerweb.com/eric/tools/css/reset/

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Nikkop:

Jag föredrar att alltid börja med CSS-reset, även om det kanske inte löser det i ditt fall.
Men bra är det!

"Slår ut"/tar bort alla "fördomar" webbläsare har av hur de ska tolka t.ex. rubriker m.m. Så du får göra allt från scratch istället med classer, men blir bättre (Y)

http://meyerweb.com/eric/tools/css/reset/

Gå till inlägget

Detta är absolut nödvändigt - att utveckla webbplatser när alla webbläsare gör egna antaganden på hur det ska se ut är ett helvete.

Däremot vill jag argumentera för att en full reset är lite som att bomba en kokosnöt; det är bättre att normalisera utseendet på de saker som faktiskt skiljer sig mellan webbläsare. På så sätt får man samma effekt som en full reset men man kan samtidigt behålla användbara defaults.

Nicolas Gallaghers projekt normalize.css gör just detta, dessutom korrigerar det flera vanliga buggar vilket en reset inte gör.

Visa signatur

Min webbyrå

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett tips är att slopa tables helt och bara använda divs. Tables är väldigt 2005 och divs är bättre på alla möjliga sätt. Som dom tidigare nämnt: efter att du floatat en rad med objekt så kan det vara nödvändigt att lägga in en div med style="float: none; clear: both;" efter objekten du floatat.

Jag vet att IE är jobbiga men dom har ju iallafall fixat allt som dom låg efter med nu o IE 10, då 10:an är mycket mera lik de andra webbläsarna. Men du behöver fortfarande anpassa din sida efter tidigare IE-versioner vilket kan vara a pain in the ass.

Hoppas du förstår trots min Svengelska. Lycka till med projektet förresten.

Visa signatur

Chassi: Antec Three Hundred | CPU: Intel i5 2500K @ 4,5GHz | GPU: PowerColor Radeon HD 7970 | Mobo: Asus P8P67 | Skärm: BenQ GL2450 | Nätagg: Corsair TX650

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av antonlundin:

Tables är väldigt 2005 och divs är bättre på alla möjliga sätt.

Gå till inlägget

Nej. Däremot skall Tables användas för att visa tabulär data och inte som layout.

Visa signatur

Mh-hm!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av antonlundin:

Ett tips är att slopa tables helt och bara använda divs. Tables är väldigt 2005 och divs är bättre på alla möjliga sätt. Som dom tidigare nämnt: efter att du floatat en rad med objekt så kan det vara nödvändigt att lägga in en div med style="float: none; clear: both;" efter objekten du floatat.

Jag vet att IE är jobbiga men dom har ju iallafall fixat allt som dom låg efter med nu o IE 10, då 10:an är mycket mera lik de andra webbläsarna. Men du behöver fortfarande anpassa din sida efter tidigare IE-versioner vilket kan vara a pain in the ass.

Hoppas du förstår trots min Svengelska. Lycka till med projektet förresten.

Gå till inlägget

Om man vet hur floats fungerar så är det ofta helt onödigt att lägga in en så kallad "clearer div". Och som sagts, tables har sitt användningsområde. Divar är om något överanvända.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Man ska inte vara rädd för att använda det som passar bäst och löser uppgiften på bästa sätt.

Om det är enklast och bäst att använda en table ska man göra det. Sen att det bryter mot dess ursprungliga syfte spelar mindre roll.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara