alexa-tracking

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/50a76974e574b4f50f000112/tanya-masalah-css-yng-eror-di-internet-explorer
{tanya} masalah css yng eror di internet explorer
maaf gan ane msh nubi, lagi belajar bikin theme tapi ane ada kendala di CSS yang eror di internet explorer
Spoiler for CSS:

masalah nya ketika di load di IE tampilan nya acak2kan

berikut penampakan nya
Spoiler for IE:


sedangkan yang di load pake Firefox
Spoiler for Firefox 16.0.2:



Quote: ane minta maaf bila penjelasan di atas kurang mastah mengerti, di sini saya cuma nubi yang sedang cari solusi, jadi mohon pencerahan nya
Quote:Original Posted By Tarasarre
maaf gan ane msh nubi, lagi belajar bikin theme tapi ane ada kendala di CSS yang eror di internet explorer
Spoiler for CSS:

masalah nya ketika di load di IE tampilan nya acak2kan

berikut penampakan nya
Spoiler for IE:


sedangkan yang di load pake Firefox
Spoiler for Firefox 16.0.2:



Ya itulah gan susah klo develop theme, khususnya untuk mengatasi kompatible web browser.
Apakah ada kode untuk me-load file css-nya? css-nya apakah udah dibedakan untuk web browser umum (selain IE), ama IE?
Klo pengalaman saya mengamati theme CMS Opencart, dia menggunakan beberapa file css untuk menangani IE. Misal untuk IE7, maka di file tpl ada
Code:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie7.css" />
<![endif]-->

di file ie7.css itu penyesuaiannya dilakukan.

berarti itu harus bikin lagi file css yang buat IE ya gan,
apa gak bisa pake reset CSS??
Quote:Original Posted By Tarasarre
berarti itu harus bikin lagi file css yang buat IE ya gan,
apa gak bisa pake reset CSS??


Pingin liat kode HTML-nya ... emoticon-Malu (S)
Quote:Original Posted By medymelody


Pingin liat kode HTML-nya ... emoticon-Malu (S)


Quote:
<html>
<head>
</head>
<body>
<div id="wraper">
<div id="header">
<div class="logo">

</div>
</div>

<div id="rocket">
<p>a a a a a a a a a a a a a a a a a a a a a a </p>
</div>
<div id="footer">
</div>


</div>
</body>
</html>
Codingan agan ribet juga ya emoticon-Bingung (S)
id=rocket ada di atas id=footer tp nongolnya paling bawah agan bilang bener maunya kyk begitu... ane jadi binun emoticon-Bingung (S)

Coba kayak gini gan... berhubung sepertinya agan cuma mencari posisi DIV yg bener di atas & bawah emoticon-Malu (S)
css di-hardcode ke html, ga lagi pake css agan emoticon-Malu (S)
DOCTYPE jangan ketinggalan emoticon-thumbsup

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<style type="text/css">
body {
 margin: 0 auto;
 padding: 0;
 background: #000 url(images/bgg.jpg) no-repeat fixed;
 background-position: center;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #fcd7b6;
}

div#top{
 overflow: auto;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 25px;
 margin: 0 auto;
 padding: 0;
    background: -moz-linear-gradient(center top, #282828 0%, #1d1c1c 40%, #0e0d0d 60%) repeat scroll 0 0 transparent;
    border-color: #130b04 #130b04 #130b04;
    border-radius: 0 0 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 4px 0 #AAAAAA;
 text-align:center;
}

div#bottom {
 overflow: auto;
 position: absolute;
 bottom: 2px;
 left: 25%;
 right: 25%;
 width: 50%;
 margin: 0 auto;
 padding: 5px;
    background: transparent;
    border-color: #AAAAAA #CCCCCC #AAAAAA #CCCCCC;
    border-radius: 0 4px 0 0;
    border-style: solid;
    border-width: 1px;
 box-shadow: 0 0 4px #AAAAAA;
 text-align: center;
}

@media screen {
 body>div#top { position:fixed; }
 body>div#bottom { position:fixed; }
}
</style>
</head>

<body>
 <div id="top"></div>
 <div id="bottom"><p>a a a a a a a a a a a a a a a a a a a a a a </p></div>
</body>
</html>
Quote:Original Posted By medymelody
Codingan agan ribet juga ya emoticon-Bingung (S)
id=rocket ada di atas id=footer tp nongolnya paling bawah agan bilang bener maunya kyk begitu... ane jadi binun emoticon-Bingung (S)

Coba kayak gini gan... berhubung sepertinya agan cuma mencari posisi DIV yg bener di atas & bawah emoticon-Malu (S)
css di-hardcode ke html, ga lagi pake css agan emoticon-Malu (S)
DOCTYPE jangan ketinggalan emoticon-thumbsup

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<style type="text/css">
body {
 margin: 0 auto;
 padding: 0;
 background: #000 url(images/bgg.jpg) no-repeat fixed;
 background-position: center;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #fcd7b6;
}

div#top{
 overflow: auto;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 25px;
 margin: 0 auto;
 padding: 0;
    background: -moz-linear-gradient(center top, #282828 0%, #1d1c1c 40%, #0e0d0d 60%) repeat scroll 0 0 transparent;
    border-color: #130b04 #130b04 #130b04;
    border-radius: 0 0 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 4px 0 #AAAAAA;
 text-align:center;
}

div#bottom {
 overflow: auto;
 position: absolute;
 bottom: 2px;
 left: 25%;
 right: 25%;
 width: 50%;
 margin: 0 auto;
 padding: 5px;
    background: transparent;
    border-color: #AAAAAA #CCCCCC #AAAAAA #CCCCCC;
    border-radius: 0 4px 0 0;
    border-style: solid;
    border-width: 1px;
 box-shadow: 0 0 4px #AAAAAA;
 text-align: center;
}

@media screen {
 body>div#top { position:fixed; }
 body>div#bottom { position:fixed; }
}
</style>
</head>

<body>
 <div id="top"></div>
 <div id="bottom"><p>a a a a a a a a a a a a a a a a a a a a a a </p></div>
</body>
</html>


maksud ane id=rocket memang pengen di taroh di atas id=footer
ane pengen bikin rocketdocs kek punya appleemoticon-Sorry

oke ane coba dulu script agan...

Quote:@media screen {
body>div#top { position:fixed; }
body>div#bottom { position:fixed; }
} maaf gan saya pengen tau ini fungsi nya buat apa?

perlu ente tau kalo IE itu browser yang paling dibenci oleh kebanyakan web developer apalagi web designer

Karena IE selalu memparse web dengan acak-acakan
Apa lagi IE6 emoticon-Big Grin
Quote:Original Posted By gigcarnation
perlu ente tau kalo IE itu browser yang paling dibenci oleh kebanyakan web developer apalagi web designer

Karena IE selalu memparse web dengan acak-acakan
Apa lagi IE6 emoticon-Big Grin

Saya setuju sekali dengan pernyataan ini. Di file css ie untuk cms opencart selalu di awali dengan
/* God i hate Microsoft */

oh gitu yah,,,, tp masih adakah pengguna IE di alam ini??
Quote:Original Posted By Tarasarre
maaf gan ane msh nubi, lagi belajar bikin theme tapi ane ada kendala di CSS yang eror di internet explorer
Spoiler for CSS:

masalah nya ketika di load di IE tampilan nya acak2kan

berikut penampakan nya
Spoiler for IE:


sedangkan yang di load pake Firefox
Spoiler for Firefox 16.0.2:

pake ini gan
jquery browser slector
http://rafael.adm.br/css_browser_selector/
jos pokonya
penggunaan:
  • include file jquery
  • include jquery browser slectornya
  • di css gunakan .ie -> jika browser ie atau liat contoh