Sidan 1 av 2 1 2
 
Verktyg Visningsval
2013-09-19, 13:05   #1

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

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:
Spoiler:
#searchField
{
    
width198px;
    
height50px;
    
floatright;


Sidans html:
Spoiler:

<div id="Header">
<
div id="Header_Main">
        <
div id="logotype"></div>
    
        <
div id="menu">
            <
div id="menu_links">
                <
a href="index.html">Webbplats&ouml;versikt</a><span class="text_seperator">|</span><a href="#">Om f&ouml;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&ouml;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&ouml;kord'; }"><button type="submit" value="ok" class="button_search" />
                
                </
div>
        </
div>
    </
div>
</
div


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

Varför?
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-19, 13:18   #2

Toke

Medlem

Tokes avatar

Plats: Göteborg

Registrerad: okt 2002

Citat:
Ursprungligen inskrivet av freddyfresh Visa inlägg
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:
Spoiler:
#searchField
{
    
width198px;
    
height50px;
    
floatright;


Sidans html:
Spoiler:

<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


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-...ly-stylesheet/

Skickades från m.sweclockers.com
__________________
| Apple iMac 24" 3,06 GHz | 4GB RAM | 1TB HDD | OSX 10.8.2 |(halvdöd)
| Macbook Pro Retina | 16GB RAM | 256GB HDD | | OSX 10.8.2 |
Toke är inte uppkopplad
2013-09-19, 13:39   #3

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

Citat:
Ursprungligen inskrivet av Toke Visa inlägg
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-...ly-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.
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-19, 15:19   #4

SpaceWeed

Medlem

SpaceWeeds avatar

Plats: Gnosjö

Registrerad: maj 2012

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
SpaceWeed är inte uppkopplad
2013-09-19, 15:26   #5

MrMadMan

Medlem

Plats: Umeå

Registrerad: maj 2003

Tips: Kolla in Modernizr för ett mer robust sätt att hantera CSS (och JavaScript) i olika webbläsare.
MrMadMan är inte uppkopplad
2013-09-19, 15:39   #6

Fronix

Medlem

Fronixs avatar

Plats: Kawlmar

Registrerad: feb 2009

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.
__________________
Fractal Design Arc | Intel Core i7 2600K | Asus P8Z68 Deluxe | Corsair Vengeance 32GB (1600MHz) DDR III | Intel 320 Series 120GB x 2 | ASUS GeForce GTX 780 3GB | DELL U2312HM x 3 --> Galleriet
Fronix är inte uppkopplad
2013-09-19, 21:36   #7

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

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.

Senast redigerad av freddyfresh 2013-09-19 klockan 21:44.
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-20, 11:30   #8

Mest

Medlem

Mests avatar

Plats: Borås

Registrerad: aug 2012

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.
__________________
Min webbyrå
Mest är inte uppkopplad
2013-09-20, 11:58   #9

Ernesto

Medlem

Plats: Stockholm

Registrerad: aug 2005

Citat:
Ursprungligen inskrivet av freddyfresh Visa inlägg
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.)
__________________
Intel 2500K @ 4.6Ghz | Asus Matrix 7970 Crossfire | Asus P8P67-Pro | Antec P183 |
Eyefinity 3x Dell u2312hm | Corsair HX 750w | 2x Intel 320 240GB SSD | 3 x Mekanisk HDD
Ernesto är inte uppkopplad
2013-09-20, 13:15   #10

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

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.

Senast redigerad av freddyfresh 2013-09-20 klockan 13:49.
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-20, 13:25   #11

davidgp

Medlem

Plats: Göteborg

Registrerad: feb 2004

IE7 e död.

Med det sagt, har du en länk till sidan, så ska jag ta mig en titt.
__________________
Mvh
David
davidgp är inte uppkopplad
2013-09-20, 13:39   #12

Motsols

Medlem

Registrerad: jul 2011

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.
Motsols är inte uppkopplad
2013-09-20, 13:42   #13

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

Citat:
Ursprungligen inskrivet av davidgp Visa inlägg
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)

Citat:
Ursprungligen inskrivet av Motsols Visa inlägg
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.
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-20, 13:47   #14

Teknocide

Medlem

Plats: i din garderob

Registrerad: sep 2007

Citat:
Ursprungligen inskrivet av freddyfresh Visa inlägg
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.
__________________
Bilanaloger är som Volvo — varenda svenne kör med dem
Teknocide är inte uppkopplad
2013-09-20, 13:48   #15

davidgp

Medlem

Plats: Göteborg

Registrerad: feb 2004

Okej, kan du ge komplett kod (html/css/js) ?
__________________
Mvh
David
davidgp är inte uppkopplad
2013-09-20, 13:51   #16

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

Citat:
Ursprungligen inskrivet av davidgp Visa inlägg
Okej, kan du ge komplett kod (html/css/js) ?
Min head.asp:
Spoiler:
<!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')"> 


Min body.beg.asp:
Spoiler:
<div id="Header">
<
div id="Header_Main">
        <
div id="logotype"></div>
        <
div id="menu">
            <
div id="menu_links">
                <
a href="#">Webbplats&ouml;versikt</a><span class="text_seperator">|</span><a href="#">Om f&ouml;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&ouml;kord" class="input_search" onfocus="if(this.value == 'Skriv in ditt s&ouml;kord') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Skriv in ditt s&ouml;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&auml;nster</a>
            <
a href="#" class="menubar_unselected">V&aring;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 ametconsectetur adipiscing elitNam vitae justo sed augue semper blandit ut et erosNunc auctor a mauris.<br/><a href="#">L&auml;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&auml;ndarnamn" 
                
class="input_username"  
                
onfocus="if(this.value == 'Anv&auml;ndarnamn') { this.value = ''; }" 
                
onblur="if(this.value == '') { this.value = 'Anv&auml;ndarnamn'};">
                
                <
input type="password" 
                
name="username" 
                
value="L&ouml;senord" 
                
class="input_password"  
                
onfocus="if(this.value == 'L&ouml;senord') { this.value = ''; }" 
                
onblur="if(this.value == '') { this.value = 'L&ouml;senord'};"><input type="submit" value="Ok" class="button"><br/>
                <
a href="#">Har du gl&ouml;mt ditt l&ouml;senord?</a>
            </
div>
        </
div>   
        
        <
img name="slideImg" onclick="getNextImage()" width=500 height=375 border=0>
        
        <
div class="content_adjust">
            <
h1>Huvudrubriken sitter fint h&auml;r</h1>
            <
h4>Lorem ipsum dolor sit ametconsectetur adipiscing elitMauris ut suscipit diamDonec posuere sem semsit amet tincidunt nunc fauc.</h4><p>
            
Lorem ipsum dolor sit ametconsectetur adipiscing elitMauris ut siscipit diamDonec posuere sem semsit amet tincidunt nunc faucibus velDonec consequat dui erosa porta tellus tincidunt sit ametIn libero liberotincidunt ut blandit quissodales a erosIn tellus ligulaposuere a rutrum etdignissim nec augueNulla est felisvolutpat id lorem vitaetempor 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 ametconsectetur adipiscing elitMauris ut<br/>suscipit diamDonec posuere sem semsit amet tincidunt nunc faucibus vel.</p>    
                </
div>                
            </
div>
        </
div>
        </
div></div


Min body.end.asp:
Spoiler:

<div id="Footer">
    <
div id="footer_adjust">
        <
div id="footer_about">
            <
b>Om f&ouml;retaget</b>
            <
p>Lorem ipsum dolor sit ametconsectetur adipiscing elitMauris ut<br/>suscipit diamDonec posuere sem semsit amet tincidunt nunc faucibus<br/>velDonec consequat dui erosa porta tellus tincidunt sit ametIn libero.</p>
        </
div>
        
        <
div id="footer_contact">
                <
b>Kontakt</b>
                <
p>Telefon063 701 08 01<br/>Fax063 701 08 00<br/>E-post: <a href="#">info@internetmedia.se</a></p>
        </
div>
        
        <
div id="footer_links">
            <
b>Snabbl&auml;nkar</b>
            <
p>
            <
a href="#">Underl&auml;nkar</a><br/>
            <
a href="#">Underl&auml;nkar&nbsp;#2</a><br/>
            
<a href="#">Underl&auml;nkar&nbsp;#3</a><br/></p>
        
</div>
    </
div>
</
div>
</
body>
</
html



Och min css:
Spoiler:
@charset "UTF-8";

htmlbody{
    
width100%;
    
min-heigth2000px;
    
height100%;
    
background-color#FFFFFF;
    
color#000000;
    
margin0;
}

/* header starts here                    ---------------------------------------->*/

#Header{
    
background-imageurl(../resources/header.png);
    
background-positioncenter center;
    
background-sizecover;
    
positionrelative;
    
background-repeat:no-repeat;
    
min-width100%;
    
height160px;
    
background-color#fcfcfc ;
    
color#000;
    
z-index0;
}

/* header field starts here                    ---------------------------------------->*/

#Header_Main{
    
width800px;
    
padding-top40px;
    
margin-leftauto;
    
margin-rightauto;
}

#Header_Main a{
    
color#000;
    
background-colorinherit;
    
font-stylenormal;
    
text-decoration:underline;
}

#Header_Main a:hover{
    
text-decoration:none;
}

#Header_Main img{
    
margin20px auto 0 auto;
    
float:left;
}

/* main-field starts here                    ---------------------------------------->*/

#container{
    
width600px;
    
clearboth;
    
margin20px auto 20px auto;
    
positionrelative;
    
    
height800px;
    
floatleft;
}

/* content starts here                    ---------------------------------------->*/

.content{
    
overflowauto;
    
width100%;
    
min-width800px;
    
margin-left245px;
}
.
content img{
    
width100%;
    
max-width600px;
}

.
content_adjust{
    
margin-left15px;
    
max-width600px;
}

.
content_adjust p{
    
font-size9.38pt;
}

.
content_adjust h1 {
    
font28pt "Museo 300"HelveticaArialsans-serif;
    
padding-top5px;
    
padding-right5px;
    
margin0;
}

/* logotype starts here                    ---------------------------------------->*/

#logotype{
    
background-imageurl(../resources/logotype_transparent.png);
    
width214px;
    
background-colorinherit;
    
height43px;
    
floatleft;
}

/* menu formatting starts here             ---------------------------------------->*/

#menu{
    
min-width200px; !important
    max
-width200px
    
height50px;
    
padding0px;
    
margin0px;
}

#menu a{
    
width300px;
    
overflowauto;
    
padding-left15px;
    
padding-right15px;
    
height50px;
    
line-height270%;
    
vertical-alignmiddle;
}

#menu_links{
    
height50px;
    
min-width100px; !important
    max
-width200px;
    
font-size9pt;
    
background-colorinherit;
    
padding0;
    
margin0;
    
floatleft;
}

/* menu links starts here             ---------------------------------------->*/

#menu_links button 
{
    
padding0;
    
margin0;
    
floatright;
}

/* content formatting starts here             ---------------------------------------->*/


.content_decoration{
    
height75px;
    
color#000;
    
background-color#fafafa;
    
margin20px 0 20px 0;
}

.
content_decoration p{
    
margin-left125px;
}


.
content_decoration img{
    
height75px;
    
float:left;
    
widthauto;
}

.
content_decoration h2{
    
background-colorinherit;
    
font16pt "Museo 500"HelveticaArialsans-serif;
    
color#5f5e66;
}

.
content_decoration_content{
    
font-size16px;
    
height75px;
    
background-color#fafafa;
    
widthauto;
    
max-width550px;
}

.
content_decoration_content h2{
    
floatleft;
    
padding-top10px;
    
padding-left20px;
    
margin0;
}

.
content_decoration_content p{
    
font-size12px;
    
text-alignleft;
    
padding-left30px;
    
floatleft;
    
width400px;
    
positionabsolute;
}

/* sidebar starts here             ---------------------------------------->*/

#sidebar{
    
width100px;
    
height200px;
    
margin0;
    
floatright;
}

/* 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;
    
floatright;
    
height130px;
    
color#000;
    
width180px;
    
background-color#fafafa;
}

.
sidebar_box_login a{
    
font-size10.5px;
    
margin-left5px;
}

.
sidebar_box_top_login{
    
background-color#050505;
    
font13.5pt "Museo 500"HelveticaArialsans-serif;
    -
webkit-border-radius10px 10px 0 0;
    -
moz-border-radius10px 10px 0 0;
    
border-radius10px 10px 0 0;
    
color#fafafa;
    
width180px;
    
height40px;
    
floatinherit;
    
margin-top10px;
}

.
sidebar_box_top_login p{
    
line-height40px;
    
widthauto;
    
padding-left10px;
    
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;
    
floatright;
    
color#000;
    
height160px;
    
width180px;
    
background-color#fafafa;
}

.
sidebar_box p{
    
padding-left10px;
    
line-height160%;
    
font-size12px;
}

.
sidebar_box_top_news{
    
background-color#050505;
    
font13.5pt "Museo 500"HelveticaArialsans-serif;
    -
webkit-border-radius10px 10px 0 0;
    -
moz-border-radius10px 10px 0 0;
    
border-radius10px 10px 0 0;
    
color#fafafa;
    
width180px;
    
height40px;
    
floatinherit;
}

.
sidebar_box_top_news p{
    
line-height40px;
    
widthauto;
    
padding-left10px;
    
vertical-alignmiddle;
}


/* input starts here             ---------------------------------------->*/

input{
    
margin-left3px;
    
background-colorinherit;
}

input:focus
{
    
clear();
}


input:focus {
      
border-color#339933;
}

.
input_search {
      
border1px solid #d8d8d8;
      
-moz-border-radius5px 0 0 5px;
      -
webkit-border-radius5px 0 0 5px;
      
border-radius5px 0 0 5px;
      
font-size9px;
      
padding15px 7px;
      
border-right0px;
    
floatleft;
    
positionabsolute;
      
outline0;
      
width141px;
      
height8px;
    
background-color#FFF;
      
-webkit-appearancenone;
}

.
input_username {
      
border1px solid #d8d8d8;
      
-moz-border-radius10px;
      -
webkit-border-radius10px;
      
border-radius10px;
      
font-size12px;
      
padding4px 7px;
    
background-color#FFF;
      
outline0;
      
width155px;
      
margin-top15px;
      -
webkit-appearancenone;
}

.
input_password {
      
border1px solid #d8d8d8;
      
-moz-border-radius10px;
      -
webkit-border-radius10px;
      
border-radius10px;
    
background-color#FFF;
      
font-size12px;
      
padding4px 7px;
      
outline0;
      
width120px;
      -
webkit-appearancenone;
}

/* buttons starts here             ---------------------------------------->*/

.button{
    
color#94df34;
    
background-color#242424;
    
-moz-border-radius3px;
    -
webkit-border-radius3px;
    
border-radius3px;
    
bordernone;
    
cursor:pointer;
}

.
button_search{
    
backgroundurl(../resources/search.png0 0 no-repeat;
    -
moz-border-radius0 3px 3px 0;
    -
webkit-border-radius0 3px 3px 0;
    
border-radius0 3px 3px 0;
    
width:1cm;
    
height:48px;
    
outline0;
    
padding0;
    
margin0;
    
border:none;
    
cursor:pointer;
}

/* searchfield starts here             ---------------------------------------->*/

#searchField
{
    
width198px;
    
float:right;
    
height50px;
    
positionrelative;
    
right0;
}

/* menubar starts here             ---------------------------------------->*/

.menubar{
    
border-radius5px 5px 0 0;
    
width840px;
    
margin-left240px;
    
margin-top24px;
    
height45px;
    
background-color#fafafa;
    
color#000;
    
    
z-index1;
}

.
menubar_unselected{
    
color#000;
    
widthauto;
    
text-indent0;
    
background-color#fafafa;
    
background-positionleft top;
    
font12pt "Museo 300"HelveticaArialsans-serif;
}

.
menubar a{
    
display:block;
    
floatleft;
    
border-left1px solid #e1e1e1;
    
border-right1px solid #e1e1e1;
    
height30px;
    
bottom0;
    
font-size12pt;
    
text-decorationnone;
    
line-height150%;
    
padding-left25px;
    
padding-right25px;
    
padding-top15px;
    
vertical-alignmiddle;
    
text-aligncenter;    
}

.
menubar a:hover
{
    
text-decorationunderline;
}

.
menubar_leftMostSelected{
    
display:block;
    
background-color#000;
    
floatleft;
    
border-radius5px 0 0 0;
    
height100px;
    
line-height200%;
    
color#9ae835;
    
font-weightbold;
    
widthauto;
    
vertical-alignmiddle;
    
text-aligncenter;
    
font18pt "Museo 700"HelveticaArialsans-serif;
}

.
menubar_leftMostUnselected{
    
display:block;
    
background-color#fafafa;
    
floatleft;
    
border-radius5px 0 0 0;
    
height100px;
    
line-height200%;
    
color#000;
    
font-weightbold;
    
widthauto;
    
vertical-alignmiddle;
    
text-aligncenter;
    
font18pt "Museo 300"HelveticaArialsans-serif;
}

.
menubar_selected{
    
display:block;
    
background-color#000;
    
floatleft;
    
height55px;
    
line-height250%;
    
color#9ae835;
    
font18pt "Museo 700"HelveticaArialsans-serif;
    
border-left0.5px solid #E0E0E0;
    
border-right0.5px solid #E0E0E0;
    
font-size18pt;
    
text-decorationnone;
    
width:auto;
    
vertical-alignmiddle;
    
text-aligncenter;
}

/* footer starts here             ---------------------------------------->*/

#Footer{
    
background-color#fcfcfc;
    
positionrelative;
    
color#000;
    
width:100%;
    
height:160px;
    
margin0;
    
left0;
    
bottom0;
    
padding0;
    
text-alignleft;
    
floatleft;
}

#footer_adjust{
    
padding-top30px;
    
width1020px;
    
height160px;
    
color#000;
    
background-colorinherit;
    
margin-leftauto;
    
margin-rightauto;
}

#footer_about{
    
widthauto;
    
max-width480px;
    
padding-left100px;
    
color#000;
    
floatleft;
    
background-colorinherit;
}

#footer_contact{
    
padding0 20px 0 20px;
    
min-width230px;
    
color#000;
    
max-width230px;
    
widthauto;
    
background-colorinherit;
    
floatleft;
}

#footer_links{
    
widthauto;
    
color#000;
    
floatleft;
    
min-width170px;
    
max-width170px;
    
background-colorinherit;
}

/* text-formatting starts here             ---------------------------------------->*/

a{
    
color#609022;
    
margin0;
    
background-colorinherit;
    
padding0;
}

h1{
    
font12pt "Museo 300"HelveticaArialsans-serif;
}

h2{
    
font12pt "Museo 500"HelveticaArialsans-serif;
}

h3
{
    
font12pt "Museo 700"HelveticaArialsans-serif;
    
background-colorinherit;
    
color#000;
}

h4{
    
font13.5pt "Museo 500"HelveticaArialsans-serif;
    
background-colorinherit;
    
color#5f5e66;
    
padding8px 0px 10px 0px;
    
margin0;
}

b{
    
font12pt "Museo 500"HelveticaArialsans-serif;
}

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

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


@
font-face {
font-family"Museo 700";
srcurl("../fonts/Museo700-Regular.eot");
srclocal("../fonts/Museo 700"), local("Museo 700"),
url("../fonts/Museo700-Regular.otf"format("opentype");

__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-20, 14:20   #17

Teknocide

Medlem

Plats: i din garderob

Registrerad: sep 2007

Litet tips vid sidan av: skriv åäö istället för &aring;&auml;&ouml;
__________________
Bilanaloger är som Volvo — varenda svenne kör med dem
Teknocide är inte uppkopplad
2013-09-20, 14:21   #18

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

Citat:
Ursprungligen inskrivet av Teknocide Visa inlägg
Litet tips vid sidan av: skriv åäö istället för &aring;&auml;&ouml;
Vet men av någon anledning funkar inte charset för mig. Så då får jag ? iställlet.
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-20, 14:24   #19

Ernesto

Medlem

Plats: Stockholm

Registrerad: aug 2005

Citat:
Ursprungligen inskrivet av freddyfresh Visa inlägg
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! =)
__________________
Intel 2500K @ 4.6Ghz | Asus Matrix 7970 Crossfire | Asus P8P67-Pro | Antec P183 |
Eyefinity 3x Dell u2312hm | Corsair HX 750w | 2x Intel 320 240GB SSD | 3 x Mekanisk HDD
Ernesto är inte uppkopplad
2013-09-20, 14:26   #20

davidgp

Medlem

Plats: Göteborg

Registrerad: feb 2004

Ser inte var du inkluderar din css nånstans?
__________________
Mvh
David
davidgp är inte uppkopplad
2013-09-20, 14:26   #21

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

Citat:
Ursprungligen inskrivet av Ernesto Visa inlägg
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.
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-20, 14:31   #22

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

Citat:
Ursprungligen inskrivet av davidgp Visa inlägg
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.

Senast redigerad av freddyfresh 2013-09-20 klockan 14:39.
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-20, 14:39   #23

davidgp

Medlem

Plats: Göteborg

Registrerad: feb 2004

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.
__________________
Mvh
David
davidgp är inte uppkopplad
2013-09-20, 14:41   #24

davidgp

Medlem

Plats: Göteborg

Registrerad: feb 2004

Citat:
Ursprungligen inskrivet av freddyfresh Visa inlägg
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.
__________________
Mvh
David
davidgp är inte uppkopplad
2013-09-20, 14:42   #25

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

Citat:
Ursprungligen inskrivet av davidgp Visa inlägg
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
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-20, 14:43   #26

Ernesto

Medlem

Plats: Stockholm

Registrerad: aug 2005

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.
__________________
Intel 2500K @ 4.6Ghz | Asus Matrix 7970 Crossfire | Asus P8P67-Pro | Antec P183 |
Eyefinity 3x Dell u2312hm | Corsair HX 750w | 2x Intel 320 240GB SSD | 3 x Mekanisk HDD
Ernesto är inte uppkopplad
2013-09-20, 14:47   #27

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

Citat:
Ursprungligen inskrivet av Ernesto Visa inlägg
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
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
2013-09-20, 15:04   #28

Ernesto

Medlem

Plats: Stockholm

Registrerad: aug 2005

#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.
__________________
Intel 2500K @ 4.6Ghz | Asus Matrix 7970 Crossfire | Asus P8P67-Pro | Antec P183 |
Eyefinity 3x Dell u2312hm | Corsair HX 750w | 2x Intel 320 240GB SSD | 3 x Mekanisk HDD
Ernesto är inte uppkopplad
2013-09-20, 15:05   #29

Ernesto

Medlem

Plats: Stockholm

Registrerad: aug 2005

#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.
__________________
Intel 2500K @ 4.6Ghz | Asus Matrix 7970 Crossfire | Asus P8P67-Pro | Antec P183 |
Eyefinity 3x Dell u2312hm | Corsair HX 750w | 2x Intel 320 240GB SSD | 3 x Mekanisk HDD
Ernesto är inte uppkopplad
2013-09-20, 15:28   #30

freddyfresh

Medlem

freddyfreshs avatar

Plats: 127.0.0.1

Registrerad: apr 2010

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å?
__________________
Programmering : C# | HTML | CSS | PHP | C++ | SQL | Ruby

Citera för snabbt svar.
freddyfresh är uppkopplad nu
Senaste nyheterna

Redaktionens senaste nyhetsrubriker