html5 - Internet Explorer problemer - Udvikleren.dk - Programmering, webdesign og grafik

Tags: ie8 html5 css3

<< < 1 2 > >>

Bruger #10114 @ 29.01.12 18:03

Hej, jeg har problemer med Internet Explorer 8, og måske også andre versioner.

Ved godt der er nogle ting i HTML5 og CSS3 der ikke fungere i alle browsere, men jeg er lidt ligeglad med det, da det kun er et par visuelle effekter i sidehovedet. Bare jeg kan få det til at se nogenlunde ud, er jeg glad.

Når jeg ser sitet i IE8, fylder baggundsbilledet ikke hele sidehovedet ud.

Mit site

Jeg har prøvet at få det til at fungere bare en smule ved at bruge dette:

HTML kode

 <!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
     
     <link rel="stylesheet" type="text/css" href="inc/styles/reset.css" />
     <link rel="stylesheet" type="text/css" href="inc/styles/main.css" />

Koden der er problem med.

HTML kode

 <header>
     
     <h1>Borgen44</h1>
     
     <aside id="search">
         
         <form name="search" enctype="text/plain" accept-charset="ISO-8859-1" action="search.php" method="POST" >
             <input type="text" name="search" size="30" />
             <input type="submit" name="submitsearch" value="S&oslash;g" />
         </form>
         
     </aside>
     
     <nav id="topmenu">
         
         <a href="#" class="topmenu">Topmenu</a>
         
     </nav>
     
     <nav id="submenu">
         
         <a href="#" class="submenu">Submenu</a>
         
     </nav>
     
     <div style="clear: both; visibility: hidden;"></div>
     
 </header>

Og mine css filer:

reset.css

CSS kode

 /* 
 html5doctor.com Reset Stylesheet
 v1.6.1
 Last Updated: 2010-09-17
 Author: Richard Clark - http://richclarkdesign.com 
 Twitter: @rich_clark
 */
 
 html, body, div, span, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 abbr, address, cite, code,
 del, dfn, em, img, ins, kbd, q, samp,
 small, strong, sub, sup, var,
 b, i,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section, summary,
 time, mark, audio, video {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     font-size:100%;
     vertical-align:baseline;
     background:transparent;
 }
 
 body {
     line-height:1;
 }
 
 article,aside,details,figcaption,figure,
 footer,header,hgroup,menu,nav,section { 
     display:block;
 }
 
 nav ul {
     list-style:none;
 }
 
 blockquote, q {
     quotes:none;
 }
 
 blockquote:before, blockquote:after,
 q:before, q:after {
     content:'';
     content:none;
 }
 
 a {
     margin:0;
     padding:0;
     font-size:100%;
     vertical-align:baseline;
     background:transparent;
 }
 
 /* change colours to suit your needs */
 ins {
     background-color:#ff9;
     color:#000;
     text-decoration:none;
 }
 
 /* change colours to suit your needs */
 mark {
     background-color:#ff9;
     color:#000; 
     font-style:italic;
     font-weight:bold;
 }
 
 del {
     text-decoration: line-through;
 }
 
 abbr[title], dfn[title] {
     border-bottom:1px dotted;
     cursor:help;
 }
 
 table {
     border-collapse:collapse;
     border-spacing:0;
 }
 
 /* change border colour to suit your needs */
 hr {
     display:block;
     height:1px;
     border:0;   
     border-top:1px solid #cccccc;
     margin:1em 0;
     padding:0;
 }
 
 input, select {
     vertical-align:middle;
 }

main.css

CSS kode

 h1 {
     padding-top: 15px;
     padding-left: 15px;
     padding-right: 5px;
     padding-bottom: 5px;
     font-size: 100px;
     font-family: DaysLater;
     filter: alpha(opacity= 60);
     -moz-opacity: .60;
     opacity: .60;
     text-shadow: 0px 0px 5px #FFFFFF;
     color: #B00000;
     float: left;
 }
 
 #search {
     padding-top: 15px;
     padding-left: 5px;
     padding-right: 15px;
     padding-bottom: 5px;
     float: right;
 }
 
 #container {
     width: 900px;
     
     margin: 0 auto;
     
     border-top-left-radius: 25px;
     border-top-right-radius: 25px;
     border-bottom-right-radius: 25px;
     border-bottom-left-radius: 25px;
     -moz-border-top-left-radius: 25px;
     -moz-border-top-right-radius: 25px;
     -moz-border-bottom-right-radius: 25px;
     -moz-border-bottom-left-radius: 25px;
     
     box-shadow: 0px 0px 15px #000000;
 }
 
 header {
     width: 900px;
     height: 190px;
     
     margin: 0 auto;
     
     border: 2px solid;
     
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 25px;
     border-bottom-left-radius: 25px;
     
     -webkit-border-top-left-radius: 0px;
     -webkit-border-top-right-radius: 0px;
     -webkit-border-bottom-right-radius: 25px;
     -webkit-border-bottom-left-radius: 25px;
     
     -khtml-border-top-left-radius: 0px;
     -khtml-border-top-right-radius: 0px;
     -khtml-border-bottom-right-radius: 25px;
     -khtml-border-bottom-left-radius: 25px;
     
     -moz-border-top-left-radius: 0px;
     -moz-border-top-right-radius: 0px;
     -moz-border-bottom-right-radius: 25px;
     -moz-border-bottom-left-radius: 25px;
     
     behavior: url(border-radius.htc);
     
     box-shadow: 0px 0px 15px #000000;
     
     background: transparent url(banners/Borgen44.png);
     -moz-background-size: 100% 100%;
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }

Jeg sidder selv på Xubuntu, og har installeret Firefox, Opera og Chrome, men har ikke mulighed for at teste sitet i Safari eller IE. Jeg har lånt en vens computer en gang imellem for at teste det i IE8.

Hvis der er nogle der har mulighed for at se det i Safari og i hhv. IE7, IE8 og IE9 ville det være fedt med en "rapport".

Indlæg senest redigeret d. 29.01.2012 18:33 af Bruger #10114

14 svar postet i denne tråd vises herunder
5 indlæg har modtaget i alt 27 karma

Sorter efter stemmer Sorter efter dato

Bruger #16824 @ 29.01.12 18:56

IE8: http://gratisupload.dk/vis_billede/672789/

Der er ret mange ting der ikke fungerer optimalt i IE8, men det siger du at du er ligeglad.

For at forsøge at besvare dit spørgsmål:
Det er i din main.css

CSS kode

 background-size: 100% 100%;

Det registrerer IE8 tilsyneladende ikke.

Muligt fix:
Din side er wrappet i en bredde på 900px. Men dit baggrundsbillede i toppen er kun 897px bredt. Opskalér billedet til 900px i stedet for at rette til med css.

Det burde ikke ændre noget i de nyere browsere.

Edit: Eller hvis du har en redigerbar fil på billedet, eksporterer du det selvfølgelig bare i 900px.
Alternativt kan du jo også lave indholdets bredde 897 i stedet for 900. Hvis det ikke medfører andre konflikter.

Indlæg senest redigeret d. 29.01.2012 19:01 af Bruger #16824

Bruger #16983 @ 30.01.12 20:47

http://browsershots.org/ er langsom og ustabil i forhold til Adobes browserlab, som er guds gave til en HTML5 og CSS3 programmør.

Link:
browserlab

Bruger #17015 @ 30.01.12 00:16

614

Hvis du selv vil teste dit layout i browsere, som du ikke har adgang til, så kan BrowserStack anbefales ( http://www.browserstack.com/ )

Det er en slags virtualmachine, der kører direkte i din browser, og som lader dig teste i de fleste gængse browsere, dog med undtagelse af iOS og Android browsere. Men de kører jo på webkit motorer begge to, så det er ikke den store ulykke*, da de i forvejen er dækket ind via safari/chrome. :-)

* Et af de få punkter jeg har fundet, hvorpå mobile og dekstop webkit opfører sig forskelligt er i forhold til position fixed. Det fungerer ikke som man er vandt til fra desktoppen da man vil opleve at fixerede elementer vil blive scrollet rundt, som var de absolut placeret på mobile-webkit. I virkeligheden har det nok mere at gøre med forskelle på de to platforme end browseren i sig selv - men lad nu det ligge. Hvis man bruger position fixed på en header eller footer, eller noget andet element, så gør man bedst i at ændre det for mobile browsere - evt bare med media-queries.

Bruger #13010 @ 30.01.12 00:46

440

Jeg kan anbefale http://browsershots.org/ til at få screenshots fra diverse browsere og versioner.

Bruger #17015 @ 30.01.12 03:50

614

@Jacob Christensen og andre,

Hvis du synes BrowserStack ser uoverskuelig ud, findes der et lille screencast der kører igennem det mest basale brug af det her: http://css-tricks.com/video-screencasts/106-browserstack/

Det er altså noget helt andet at teste på den måde end med screenshots. Screenshots er ikke meget værd. Og du slipper for ventetiden!

Bruger #13010 @ 29.01.12 18:26

440

Prøv og kom med nogen screenshot hvis du kan til os som ikke har ie8.

Bruger #10114 @ 29.01.12 18:36

Jeg får sendt et screenshot senere af min ven.

Bruger #10114 @ 29.01.12 23:07

Ah, hader de små fejl.

Tak Stani, nu fungere det

Evt. nogen der har mulighed for at se om det også virker i Safari, IE7 og IE9?

Bruger #13010 @ 29.01.12 23:26

440

Ser ikke ud til text-shadow virker på din <h1> overskrift i ie9.
Der er i hvert fald ikke nogen hvid defus skygge omkring "Borgen44".

Prøv og fjern mellemrummet efter = (i inc/styles/main.css) :
filter: alpha(opacity= 60);

Indlæg senest redigeret d. 29.01.2012 23:30 af Bruger #13010

Bruger #17015 @ 30.01.12 00:53

614

@scootergrisen, browserstack er overlegen da det er en slags vm og ikke bare screenshots. Det koster dog et symbolsk beløb efter den første time.

<< < 1 2 > >>

Internet Explorer problemer

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler