Permalänk
Medlem

CSS fel för IE7

Tjenare.

Ska programmera ASP (classic) med HTML och kört fast på en grej som jag inte riktigt fattar varför den gör som den gör.

Felbilder: IE7; IE8

Som ni ser på bilderna så flyttar sig sökfältet neråt och uppåt beroende på IE version, i IE8+ är den fin, men i IE8- är den fel.
Varför händer det?

CSS till sökfältet:

#searchField { width: 198px; height: 50px; float: right; }

Dold text

Sidans html:

<div id="Header"> <div id="Header_Main"> <div id="logotype"></div> <div id="menu"> <div id="menu_links"> <a href="index.html">Webbplatsöversikt</a><span class="text_seperator">|</span><a href="#">Om företaget</a><span class="text_seperator">|</span><a href="#">Kontakta oss</a> </div> <div id="searchField"> <input type="text" name="username" value="Skriv in ditt sökord" class="input_search" onfocus="if(this.value == 'Skriv in ditt sökord') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Skriv in ditt sökord'; }"><button type="submit" value="ok" class="button_search" /> </div> </div> </div> </div>

Dold text

Ingen asp-kod än sålänge så ren HTML.

Varför?

Visa signatur

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

Permalänk
Medlem
Skrivet av freddyfresh:

Tjenare.

Ska programmera ASP (classic) med HTML och kört fast på en grej som jag inte riktigt fattar varför den gör som den gör.

Felbilder: IE7; IE8

Som ni ser på bilderna så flyttar sig sökfältet neråt och uppåt beroende på IE version, i IE8+ är den fin, men i IE8- är den fel.
Varför händer det?

CSS till sökfältet:

#searchField { width: 198px; height: 50px; float: right; }

Dold text

Sidans html:

<div id="Header"> <div id="Header_Main"> <div id="logotype"></div> <div id="menu"> <div id="menu_links"> <a href="index.html">Webbplatsöversikt</a><span class="text_seperator">|</span><a href="#">Om företaget</a><span class="text_seperator">|</span><a href="#">Kontakta oss</a> </div> <div id="searchField"> <input type="text" name="username" value="Skriv in ditt sökord" class="input_search" onfocus="if(this.value == 'Skriv in ditt sökord') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Skriv in ditt sökord'; }"><button type="submit" value="ok" class="button_search" /> </div> </div> </div> </div>

Dold text

Ingen asp-kod än sålänge så ren HTML.

Varför?

IE är inte jätteroligt och renderar kod lite som de vill jämfört med andra webbläsare.

Ibland kan man få göra separata stylesheets.

Läs mer:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Skickades från m.sweclockers.com

Permalänk
Medlem
Skrivet av Toke:

IE är inte jätteroligt och renderar kod lite som de vill jämfört med andra webbläsare.

Ibland kan man få göra separata stylesheets.

Läs mer:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Skickades från m.sweclockers.com

Förståerligt, problemet är dock att jag ej vet vilken kod jag ska använda för att få den att sluta.

Visa signatur

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

Permalänk
Medlem

Behöver du inte ha en IE 7, 8 kompatibel sida så rekommenderar jag dig att skippa det helt pga att det är så gammlat. Annars kan du skapa ett script som inkluderar en css fil till IE7 och 8 som fixar de felen som uppstår där

Permalänk
Medlem

Tips: Kolla in Modernizr för ett mer robust sätt att hantera CSS (och JavaScript) i olika webbläsare.

Permalänk
Medlem

Rekommenderar att du använder http://html5boilerplate.com/ med https://github.com/h5bp/ant-build-script/

Du slipper problemen med IE och alla dina projekt har alltid samma standader.

Visa signatur

ᕦ(ツ)ᕤ

Permalänk
Medlem

Lyckades göra det underliga. Gjorde sidan bra för Chrome, Firefox och IE7 men inte IE7+...
Skapligt trött nu, suttit hela dagen.

Jag måste ha IE7-IE10, Firefox och Chrome åtminstone...

Dock tvångsmatad genom <!--[if lt IE 8]> och <!--if chrome> samt <!--if firefox> formatering i style.
Utan detta är det enda som syns i gte 7 headern. Allt annat försvinner och syns inte ens omkastat.

Visa signatur

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

Permalänk
Medlem

Inte för att vara sådan, men användandet av IE7 i Sverige har gått från 0.38% i januari i år till 0.16% nu i september (källa). Det känns rätt safe att sluta stödja IE7. I ditt fall rör det sig om en lite felplacerad ruta, och jag menar, värre saker har ju hänt.

Visa signatur
Permalänk
Medlem
Skrivet av freddyfresh:

Lyckades göra det underliga. Gjorde sidan bra för Chrome, Firefox och IE7 men inte IE7+...
Skapligt trött nu, suttit hela dagen.

Jag måste ha IE7-IE10, Firefox och Chrome åtminstone...

Dock tvångsmatad genom <!--[if lt IE 8]> och <!--if chrome> samt <!--if firefox> formatering i style.
Utan detta är det enda som syns i gte 7 headern. Allt annat försvinner och syns inte ens omkastat.

Man behöver i princip aldrig använda de där taggarna. Gör man det har man dålig CSS i nästan samtliga fall.

Skit i IE7 helt, se till att det ser bra ut i första hand i:
Chrome (Webkit), Firefox och IE9+

Sen kollar du att det ser bra ut i IE8.

(Ibland i IE7 lägger man elementet man floatar till höger först för att förhindra ny rad om man inte floatar det vänstra elementet.)

Permalänk
Medlem

Får se hur jag löser det, mest inriktad på att sakerna i första hand ligger rätt åtminstone.

Jag är inte en ninja på html direkt men det här känns ju skumt:

Allt över IE 7:

Chrome, Firefox, Safari:

Den visar inte ens bilder, text eller annat innehåll längre i IE.
Kan skapa en div som är tom med en border i, funkar fint i headern
men inte resten av sidan.'

Händer såfort dokumenttypen är över IE 7, i IE 9 med compat. view går han ju tillbaka till IE7 och funkar. Dock inte riktigt meningen.

Visa signatur

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

Permalänk
Medlem

IE7 e död.

Med det sagt, har du en länk till sidan, så ska jag ta mig en titt.

Visa signatur

Mvh
David

Permalänk
Medlem

Du kan säga till webbläsaren att försöka köra som IE7.
Lägg till <meta http-equiv="X-UA-Compatible" content="IE=7"> inom <head> taggarna.

Permalänk
Medlem
Skrivet av davidgp:

IE7 e död.

Med det sagt, har du en länk till sidan, så ska jag ta mig en titt.

Ligger lokalt på min IIS (sidorna är ASP)

Skrivet av Motsols:

Du kan säga till webbläsaren att försöka köra som IE7.
Lägg till <meta http-equiv="X-UA-Compatible" content="IE=7"> inom <head> taggarna.

Ingen skillnad.

Visa signatur

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

Permalänk
Medlem
Skrivet av freddyfresh:

Lyckades göra det underliga. Gjorde sidan bra för Chrome, Firefox och IE7 men inte IE7+...
Skapligt trött nu, suttit hela dagen.

Jag måste ha IE7-IE10, Firefox och Chrome åtminstone...

Dock tvångsmatad genom <!--[if lt IE 8]> och <!--if chrome> samt <!--if firefox> formatering i style.
Utan detta är det enda som syns i gte 7 headern. Allt annat försvinner och syns inte ens omkastat.

<!-- if chrome/firefox> har, så vitt jag vet, ingen speciell betydelse. Använder du dem så läses förmodligen inte den CSS:en in.

Angående <!--[if lt IE 8]> och liknande: Det var Microsoft som la till sådana taggar för IE för att underlätta CSS-hacks.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Okej, kan du ge komplett kod (html/css/js) ?

Visa signatur

Mvh
David

Permalänk
Medlem
Skrivet av davidgp:

Okej, kan du ge komplett kod (html/css/js) ?

Min head.asp:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script type="text/javascript"> /* <![CDATA[ */ function clearForm() { if(document.getElementById('input').defaultValue == document.getElementById('input').value) { document.getElementById('input').value = ""; } } /* ]]> */ </script> <script language="javascript"> var interval = 1500; var random_display = 0; var imageDir = "/core/resources/bildspel/"; var imageNum = 0; imageArray = new Array(); //inladdning av bilder imageArray[imageNum++] = new imageItem(imageDir + "Desert.jpg"); imageArray[imageNum++] = new imageItem(imageDir + "Hydrangeas.jpg"); imageArray[imageNum++] = new imageItem(imageDir + "Jellyfish.jpg"); imageArray[imageNum++] = new imageItem(imageDir + "Koala.jpg"); var totalImages = imageArray.length; function imageItem(image_location) { this.image_item = new Image(); this.image_item.src = image_location; } function get_ImageItemLocation(imageObj) { return(imageObj.image_item.src) } function randNum(x, y) { var range = y - x + 1; return Math.floor(Math.random() * range) + x; } function getNextImage() { if (random_display) { imageNum = randNum(0, totalImages-1); } else { imageNum = (imageNum+1) % totalImages; } var new_image = get_ImageItemLocation(imageArray[imageNum]); return(new_image); } function switchImage(place) { var new_image = getNextImage(); document[place].src = new_image; var recur_call = "switchImage('"+place+"')"; timerID = setTimeout(recur_call, interval); } </script> <style> <!--[if lt IE 8]> <style> #searchField{ width: 198px; float:right; height: 50px; position: relative; margin-top: -60px; right: 0; } .menubar{ border-radius: 5px 5px 0 0; width: 840px; margin-top: 24px; height: 45px; background-color: #fafafa; color: #000; left: -790px; top: 120px; } #container{ width: 100%; clear: both; margin: 20px auto 20px auto; position: relative; left: -1040px; top: 120px; height: 800px; float: left; text-align: left; } .content_decoration{ height: 95px; background-color: #fafafa; margin: 20px 0 20px 0; width: 620px; top: 120px; } .content{ overflow: auto; width: 100%; top: 120px; min-width: 800px; } .content_adjust{ margin-left: 15px; max-width: 600px; width: 600px; top: 120px; float: left; } .content_decoration p{ margin-left: 2px; float: left; width: 400px; } .content_decoration img{ height: 75px; float:left; width: auto; max-width: 130px; top: -30px; } #sidebar{ width: 180px; height: 200px; margin-top: 16px; margin-left: 14px; float: right; } .content_decoration_content{ font-size: 16px; height: 75px; background-color: #fafafa; width: 400px; top: 120px; max-width: 550px; } .sidebar_box_top_login p{ line-height: 20px; width: 80px; margin-top: 10px; height: 20px; padding-left: 10px; } .sidebar_box_top_news p{ line-height: 20px; width: 80px; height: 20px; margin-top: 10px; padding-left: 10px; } #Footer{ background-color: #fcfcfc; position: relative; width:100%; height:160px; margin: 0; top: 120px; left: -880px; bottom: 0; padding: 0; text-align: left; float: left; } .input_username { border: 1px solid #d8d8d8; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; font-size: 12px; padding: 4px 7px; background-color: #FFF; outline: 0; width: 155px; margin-top: 150px; -webkit-appearance: none; } .input_password { border: 1px solid #d8d8d8; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #FFF; font-size: 12px; padding: 4px 7px; outline: 0; width: 120px; -webkit-appearance: none; } <![endif]--> <!--[if gte ie 7]> .content{ overflow: auto; width: 100%; min-width: 800px; margin-left: 245px; left: -1020px; z-index: 9000; } #container{ width: 600px; clear: both; margin: 20px auto 20px auto; position: relative; left: -800px; z-index: 8999; height: 800px; float: left; } .menubar{ border-radius: 5px 5px 0 0; width: 840px; margin-left: 240px; margin-top: 24px; height: 45px; background-color: #fafafa; color: #000; } <!end if--> </style> </head> <body onLoad="switchImage('slideImg')">

Dold text

Min body.beg.asp:

<div id="Header"> <div id="Header_Main"> <div id="logotype"></div> <div id="menu"> <div id="menu_links"> <a href="#">Webbplatsöversikt</a><span class="text_seperator">|</span><a href="#">Om företaget</a><span class="text_seperator">|</span><a href="#">Kontakta oss</a> <div id="searchField"> <input type="text" name="username" value="Skriv in ditt sökord" class="input_search" onfocus="if(this.value == 'Skriv in ditt sökord') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Skriv in ditt sökord'; }"><button type="submit" value="ok" class="button_search" /> </div> </div> </div> </div> <div class="menubar"> <a href="#" class="menubar_leftMostSelected">Start</a> <a href="#" class="menubar_unselected">Tjänster</a> <a href="#" class="menubar_unselected">Våra produkter</a> <a href="#" class="menubar_unselected">Underl&aumlnk</a> <a href="#" class="menubar_unselected">Underl&aumlnk</a> </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" onfocus="if(this.value == 'Användarnamn') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Användarnamn'};"> <input type="password" name="username" value="Lösenord" class="input_password" onfocus="if(this.value == 'Lösenord') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Lösenord'};"><input type="submit" value="Ok" class="button"><br/> <a href="#">Har du glömt ditt lösenord?</a> </div> </div> <img name="slideImg" onclick="getNextImage()" width=500 height=375 border=0> <div class="content_adjust"> <h1>Huvudrubriken sitter fint här</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="/core/resources/box.jpg" style="height: 39; width: 120" alt="Unreachable image content_decoration_content"/> <div class="content_decoration_content"> <h2>Mer information</h2><br/><br /> <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> </div> </div> </div> </div></div>

Dold text

Min body.end.asp:

<div id="Footer"> <div id="footer_adjust"> <div id="footer_about"> <b>Om företaget</b> <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> </div> <div id="footer_contact"> <b>Kontakt</b> <p>Telefon: 063 - 701 08 01<br/>Fax: 063 - 701 08 00<br/>E-post: <a href="#">info@internetmedia.se</a></p> </div> <div id="footer_links"> <b>Snabblänkar</b> <p> <a href="#">Underlänkar</a><br/> <a href="#">Underlänkar #2</a><br/> <a href="#">Underlänkar #3</a><br/></p> </div> </div> </div> </body> </html>

Dold text

Och min css:

@charset "UTF-8"; html, body{ width: 100%; min-heigth: 2000px; height: 100%; background-color: #FFFFFF; color: #000000; margin: 0; } /* header starts here ---------------------------------------->*/ #Header{ background-image: url(../resources/header.png); background-position: center center; background-size: cover; position: relative; background-repeat:no-repeat; min-width: 100%; height: 160px; background-color: #fcfcfc ; color: #000; z-index: 0; } /* header field starts here ---------------------------------------->*/ #Header_Main{ width: 800px; padding-top: 40px; margin-left: auto; margin-right: auto; } #Header_Main a{ color: #000; background-color: inherit; font-style: normal; text-decoration:underline; } #Header_Main a:hover{ text-decoration:none; } #Header_Main img{ margin: 20px auto 0 auto; float:left; } /* main-field starts here ---------------------------------------->*/ #container{ width: 600px; clear: both; margin: 20px auto 20px auto; position: relative; height: 800px; float: left; } /* content starts here ---------------------------------------->*/ .content{ overflow: auto; width: 100%; min-width: 800px; margin-left: 245px; } .content img{ width: 100%; max-width: 600px; } .content_adjust{ margin-left: 15px; max-width: 600px; } .content_adjust p{ font-size: 9.38pt; } .content_adjust h1 { font: 28pt "Museo 300", Helvetica, Arial, sans-serif; padding-top: 5px; padding-right: 5px; margin: 0; } /* logotype starts here ---------------------------------------->*/ #logotype{ background-image: url(../resources/logotype_transparent.png); width: 214px; background-color: inherit; height: 43px; float: left; } /* menu formatting starts here ---------------------------------------->*/ #menu{ min-width: 200px; !important max-width: 200px; height: 50px; padding: 0px; margin: 0px; } #menu a{ width: 300px; overflow: auto; padding-left: 15px; padding-right: 15px; height: 50px; line-height: 270%; vertical-align: middle; } #menu_links{ height: 50px; min-width: 100px; !important max-width: 200px; font-size: 9pt; background-color: inherit; padding: 0; margin: 0; float: left; } /* menu links starts here ---------------------------------------->*/ #menu_links button { padding: 0; margin: 0; float: right; } /* content formatting starts here ---------------------------------------->*/ .content_decoration{ height: 75px; color: #000; background-color: #fafafa; margin: 20px 0 20px 0; } .content_decoration p{ margin-left: 125px; } .content_decoration img{ height: 75px; float:left; width: auto; } .content_decoration h2{ background-color: inherit; font: 16pt "Museo 500", Helvetica, Arial, sans-serif; color: #5f5e66; } .content_decoration_content{ font-size: 16px; height: 75px; background-color: #fafafa; width: auto; max-width: 550px; } .content_decoration_content h2{ float: left; padding-top: 10px; padding-left: 20px; margin: 0; } .content_decoration_content p{ font-size: 12px; text-align: left; padding-left: 30px; float: left; width: 400px; position: absolute; } /* sidebar starts here ---------------------------------------->*/ #sidebar{ width: 100px; height: 200px; margin: 0; float: right; } /* sidebar login here ---------------------------------------->*/ .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; color: #000; width: 180px; background-color: #fafafa; } .sidebar_box_login a{ font-size: 10.5px; margin-left: 5px; } .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: #fafafa; width: 180px; height: 40px; float: inherit; margin-top: 10px; } .sidebar_box_top_login p{ line-height: 40px; width: auto; padding-left: 10px; vertical-align:middle; } /* sidebar news starts here ---------------------------------------->*/ .sidebar_box{ -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; float: right; color: #000; height: 160px; 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: #fafafa; width: 180px; height: 40px; float: inherit; } .sidebar_box_top_news p{ line-height: 40px; width: auto; padding-left: 10px; vertical-align: middle; } /* input starts here ---------------------------------------->*/ input{ margin-left: 3px; background-color: inherit; } input:focus { clear(); } input:focus { border-color: #339933; } .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: 9px; padding: 15px 7px; border-right: 0px; float: left; position: absolute; outline: 0; width: 141px; height: 8px; background-color: #FFF; -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; background-color: #FFF; outline: 0; width: 155px; margin-top: 15px; -webkit-appearance: none; } .input_password { border: 1px solid #d8d8d8; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #FFF; font-size: 12px; padding: 4px 7px; outline: 0; width: 120px; -webkit-appearance: none; } /* buttons starts here ---------------------------------------->*/ .button{ color: #94df34; background-color: #242424; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none; cursor:pointer; } .button_search{ background: url(../resources/search.png) 0 0 no-repeat; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; width:1cm; height:48px; outline: 0; padding: 0; margin: 0; border:none; cursor:pointer; } /* searchfield starts here ---------------------------------------->*/ #searchField { width: 198px; float:right; height: 50px; position: relative; right: 0; } /* menubar starts here ---------------------------------------->*/ .menubar{ border-radius: 5px 5px 0 0; width: 840px; margin-left: 240px; margin-top: 24px; height: 45px; background-color: #fafafa; color: #000; z-index: 1; } .menubar_unselected{ color: #000; width: auto; text-indent: 0; background-color: #fafafa; background-position: left top; font: 12pt "Museo 300", Helvetica, Arial, sans-serif; } .menubar a{ display:block; float: left; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; height: 30px; bottom: 0; font-size: 12pt; text-decoration: none; line-height: 150%; padding-left: 25px; padding-right: 25px; padding-top: 15px; vertical-align: middle; text-align: center; } .menubar a:hover { text-decoration: underline; } .menubar_leftMostSelected{ display:block; background-color: #000; float: left; border-radius: 5px 0 0 0; height: 100px; line-height: 200%; color: #9ae835; font-weight: bold; width: auto; vertical-align: middle; text-align: center; font: 18pt "Museo 700", Helvetica, Arial, sans-serif; } .menubar_leftMostUnselected{ display:block; background-color: #fafafa; float: left; border-radius: 5px 0 0 0; height: 100px; line-height: 200%; color: #000; font-weight: bold; width: auto; vertical-align: middle; text-align: center; font: 18pt "Museo 300", Helvetica, Arial, sans-serif; } .menubar_selected{ display:block; background-color: #000; float: left; height: 55px; line-height: 250%; color: #9ae835; font: 18pt "Museo 700", Helvetica, Arial, sans-serif; border-left: 0.5px solid #E0E0E0; border-right: 0.5px solid #E0E0E0; font-size: 18pt; text-decoration: none; width:auto; vertical-align: middle; text-align: center; } /* footer starts here ---------------------------------------->*/ #Footer{ background-color: #fcfcfc; position: relative; color: #000; width:100%; height:160px; margin: 0; left: 0; bottom: 0; padding: 0; text-align: left; float: left; } #footer_adjust{ padding-top: 30px; width: 1020px; height: 160px; color: #000; background-color: inherit; margin-left: auto; margin-right: auto; } #footer_about{ width: auto; max-width: 480px; padding-left: 100px; color: #000; float: left; background-color: inherit; } #footer_contact{ padding: 0 20px 0 20px; min-width: 230px; color: #000; max-width: 230px; width: auto; background-color: inherit; float: left; } #footer_links{ width: auto; color: #000; float: left; min-width: 170px; max-width: 170px; background-color: inherit; } /* text-formatting starts here ---------------------------------------->*/ a{ color: #609022; margin: 0; background-color: inherit; padding: 0; } h1{ font: 12pt "Museo 300", Helvetica, Arial, sans-serif; } h2{ font: 12pt "Museo 500", Helvetica, Arial, sans-serif; } h3 { font: 12pt "Museo 700", Helvetica, Arial, sans-serif; background-color: inherit; color: #000; } h4{ font: 13.5pt "Museo 500", Helvetica, Arial, sans-serif; background-color: inherit; color: #5f5e66; padding: 8px 0px 10px 0px; margin: 0; } b{ font: 12pt "Museo 500", Helvetica, Arial, sans-serif; } @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!
Felkod40

Permalänk
Medlem

Litet tips vid sidan av: skriv åäö istället för åäö

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Litet tips vid sidan av: skriv åäö istället för åäö

Vet men av någon anledning funkar inte charset för mig. Så då får jag ? iställlet.

Visa signatur

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

Permalänk
Medlem
Skrivet av freddyfresh:

Vet men av någon anledning funkar inte charset för mig. Så då får jag ? iställlet.

Det är för att du inte sparar filerna i UTF-8!

Permalänk
Medlem

Ser inte var du inkluderar din css nånstans?

Visa signatur

Mvh
David

Permalänk
Medlem
Skrivet av Ernesto:

Det är för att du inte sparar filerna i UTF-8!

Men varför måste jag spara dem som UTF-8 om jag tvingar ett charset på utf-8?

Som sagt, inte alls så bra på det här men vill bli.

Visa signatur

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

Permalänk
Medlem
Skrivet av davidgp:

Ser inte var du inkluderar din css nånstans?

Ingen aning ärligt talat varför det inte funkar, men i head.asp är det meningen att <link rel="stylesheet" href="1.all.css" type="text/css"> ska finnas med, dock om jag tar bort eller lägger till den så ändras ingenting. Hade den i början inlagd men tog bort den då den inte bidrog till något.
Vet inte om jag gör det på fel ställe.

Tog bort all <!-- kod och länkade till stylesheeten, ser likadant ut fastän nu funkar inte IE7 heller.
Samma resultat som förut för ie7+ dock.

Av misstag laddade jag Quirks och sen tillbaka, nu syns iaf grejerna, men inte om jag inte gör det, måste alltså göra så varje gång för att något ska synas i IE så doctypen måste ju vara fel på iaf.

Visa signatur

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

Permalänk
Medlem

OK, men en snabbanalys.

Du har lagt alla !important efter ; de ska ligga före. (sen ska man helst inte ha några alls, utan ha rätt "ordning" i css:en).

Sen har du en max-bredd på #menu_links på 200px, som sökfältet ligger inom, vilket kan göra att det inte får plats och därför glider ner.

Testa sedan din CSS i http://jigsaw.w3.org/css-validator/ för att se vad som kan vara galet mer. (Det blir förm. mest varningar).

Ett annat bra tips är att kika på http://caniuse.com - där ser du vad som funkar och inte i de olika webbläsarna.

Visa signatur

Mvh
David

Permalänk
Medlem
Skrivet av freddyfresh:

Men varför måste jag spara dem som UTF-8 om jag tvingar ett charset på utf-8?

Som sagt, inte alls så bra på det här men vill bli.

För att om du skriver ett åäö och filformatet är iso-8859-1, så sparas de så, emedan webbläsaren försöker tolka tecknen som UTF-8. Då är det omöjligt att få nåt annat än ?.

Filencoding OCH charset måste vara överens.

Visa signatur

Mvh
David

Permalänk
Medlem
Skrivet av davidgp:

För att om du skriver ett åäö och filformatet är iso-8859-1, så sparas de så, emedan webbläsaren försöker tolka tecknen som UTF-8. Då är det omöjligt att få nåt annat än ?.

Filencoding OCH charset måste vara överens.

Okej för jag kan bara spara mina ASP som Canonical

Visa signatur

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

Permalänk
Medlem

http://jsfiddle.net/ är utmärkt när du vill dela med dig av ett problem. Släng in koden i de olika boxarna och dela med dig av adressen, då är det mycket mycket lättare att hjälpa!

Sen ett tips att passa dig för !important - Det är en mycket ful nödlösning som kan ställa till jätteproblem senare för dig, det är lite som att tejpa ihop bilen med eltejp - Håller för stunden men när du ska stajla och dra en handbromssladd framför korvmojjen kommer hjulen ramla av. Då blir det ju ingen brutta, det förstår ju vem som helst.

Permalänk
Medlem
Skrivet av Ernesto:

http://jsfiddle.net/ är utmärkt när du vill dela med dig av ett problem. Släng in koden i de olika boxarna och dela med dig av adressen, då är det mycket mycket lättare att hjälpa!

Sen ett tips att passa dig för !important - Det är en mycket ful nödlösning som kan ställa till jätteproblem senare för dig, det är lite som att tejpa ihop bilen med eltejp - Håller för stunden men när du ska stajla och dra en handbromssladd framför korvmojjen kommer hjulen ramla av. Då blir det ju ingen brutta, det förstår ju vem som helst.

http://jsfiddle.net/bMznc/

Tackar grymt för alla tips ni har att komma med

Visa signatur

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

Permalänk
Medlem

#menu behöver "overflow:hidden".

Samtliga block-element, som har ett element flotat i sig, kan inte ärva det floatade elementets höjd, vilket resulterar att parent-elementet får en felaktik höjd, och det blir buggar med margins och paddings och hej och hans moster.

Man löser det på två sätt, det ena lärde en kille här på sweclocker mig:
Det bra sättet han lärde mig:
Lägg till overflow:hidden på parent-elementet.

Om det inte funkar bra, för att man av misstag gömmer saker som inte ska gömmas, använder man en clearing div, typ så här:

<div style="clear:both"></div>

Släng in lite "overflow:hidden" på de element som har andra element floatade i sig så kommer det börja trassla ut sig rätt mycket.

Permalänk
Medlem

#menu a

<a> är ett inline-element, man kan inte sätta bredd på inline-element, de svarar inte på det - Oavsett om elementet hade varit ett block, hade width:300px blivit skandal.

Du har försökt laga massa saker med lite olika position:relative och position:absolute och floata lite element hit och dit, det är mestadels de taggarna som ger dig problem, samt det fundamentala problemet att du inte angett en bredd på moderelementet och satt relativ marginal (centrerat), det vill säga <div id="Header">

Om du sätter en bredd på den och skippar massa "width:100%" etc kommer du klara dig bra - Du har helt enkelt massor av onödig CSS, säkert 3/4 av din CSS är onödig och ställer bara till problem för dig som du måste laga hela tiden.

Permalänk
Medlem

Har kommit såhär långt, så ser sidan ut nu i IE

Utan några "hacks". Det är främst container/content som inte ligger rätt, den som håller i alla andra taggar. Såfort jag redigerar header så flippar allt annat ut, kanske mer där då?

Visa signatur

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